Language-tools: الواردات التلقائية غير متسقة في VSCode

تم إنشاؤها على ٩ يوليو ٢٠٢٠ · 3تعليقات · مصدر: sveltejs/language-tools

صف الخلل
هذا جمالي بحت. عند استيراد ملف أو مكون في VScode تلقائيًا ، لا تتم إضافة عمليات الاستيراد الجديدة إلى الملفات بشكل صحيح.

يتم إدراجها _أعلى_ عمليات الاستيراد الحالية.
يتم إدراجها في مواضع مختلفة لملفات .ts و .svelte .
يتجاهلون تفضيلات quoteStyle للمحرر.
- على سبيل المثال ، مع typescript.preferences.quoteStyle: single في VSCode ، ستظل الواردات تستخدم علامات الاقتباس المزدوجة.
يفتقرون إلى المسافة البادئة.

لإعادة إنتاج
أنشئ مشروعًا جديدًا من sveltejs/template ، وأنشئ مكونًا فارغًا Test.svelte ، واستورده تلقائيًا إلى App.svelte . في مشاريع TypeScript ، يمكنك أيضًا رؤية أن الواردات من ملفات .ts يتم إدراجها مباشرة بعد علامة البرنامج النصي بدون سطر جديد.

Example

سلوك متوقع
أتوقع أن يعمل الاستيراد التلقائي تمامًا كما هو الحال في ملف عادي .ts ، ولكن مع بعض المسافة البادئة بسبب علامة البرنامج النصي.

أدخل بمسافة بادئة مناسبة ، خاصةً وفقًا للواردات الحالية.
تضاف أدناه الواردات الموجودة.
إدراج باستمرار لجميع أنواع الملفات.
استخدم تصميم اقتباس المحرر إذا كان متاحًا.

يجب أن يبدو الرمز الخاص بي بهذا الشكل بدون أي عمل يدوي:

<script lang="ts">
    import Test from './Test.svelte';
    import { testStore } from './test';

    export let name;
</script>

النظام (يرجى استكمال المعلومات التالية):

نظام التشغيل: Windows 10
IDE: VSCode، 1.46.1
المكون الإضافي / الحزمة: Svelte for VSCode ، 101.1.1

Fixed bug

مصدر

baileyherbert

ال 3 كومينتر

تكمن المشكلة الأساسية في أنه أثناء الاستيراد داخل القالب ، سيرمي المحول البرمجي svelte أخطاء لأنه في هذه المرحلة يكون الرمز غير صالح. بهذه الطريقة svelte2tsx لا يمكن ان تنتج صالح tsx الملف، لذلك نقع مرة أخرى إلى استخدام العلامة النصي المحتوى فقط. إذا قام المحلل اللغوي بإخراج كود صالح ، فإن svelte2tsx سينتج ملف tsx محوّل. هذا يجعل TypeScript يقوم بإدراج الواردات في نقطة مختلفة ويقوم التعيين الخاص بنا من tsx إلى الأصل svelte باستيراده في الأعلى. لست متأكدًا من كيفية حل هذه المشكلات بطريقة جيدة. يجب أن يكون الالتزام بتفضيلات المستخدم (نمط الاقتباس) ممكنًا. كحل بديل ، يمكنك استخدام الأمر "تنظيم عمليات الاستيراد" ، وسيهتم التنسيق الأجمل بأنماط المسافة البادئة والاقتباس.

dummdidumm في ٩ يوليو ٢٠٢٠

👍1

شكرًا dummdidumm على التوضيح والحل البديل! 😄

إذا كانت هناك طريقة لإدراجها أسفل الواردات الحالية ، فسيكون ذلك بمثابة تحسن كبير في كيفية عملها الآن. سيكون الامتداد أكثر قابلية للتقديم (كما هو الحال في دروس الفيديو) ، والأهم من ذلك ، أن الواردات ستبدو متسقة (من غير المعتاد البحث عن أحدث استيراد في الأعلى).

لقد اختبرت للتو ثلاث واردات ( test ، test2 ، test3 بهذا الترتيب) باستخدام Vetur وتم إدراجها في المواضع الصحيحة. فيما يلي نتائج المقارنة:

فيتور:

<script lang="ts">
  import Vue from 'vue';
import { testStore1 } from './test';
import { testStore2 } from './test2';
import { testStore3 } from './test3';

  export default Vue.extend({ /*...*/ });
</script>

Svelte لـ VSCode:

<script lang="ts">import { testStore3 } from "./test3";
import { testStore2 } from "./test2";

import { testStore } from "./test";


    export let name: string;

</script>

baileyherbert في ٩ يوليو ٢٠٢٠

هناك مشكلة أخرى في js / ts. لا يمكن لخريطة المصدر تعيين السطر التالي لعملية الاستيراد الأخيرة إلى موضعها الأصلي.