ملحقات غير ضرورية لـ VS Code

لقد أجريت مؤخرًا بحثًا شاملاً حول VS Code وقدمت بعض النتائج المثيرة للاهتمام. كما اتضح ، يحتوي المحرر على الكثير من الميزات والإعدادات التي تسمح لك بحل نفس المهام التي تحلها العديد من الإضافات الشائعة. سنتحدث هنا عن ستة مجالات لتطبيق الامتدادات يمكن فيها استبدال هذه الامتدادات بالآليات القياسية لـ VS Code.

1. إعادة تسمية وإغلاق تلقائي للعلامات

نحن نتحدث عن احتمالين. الأول هو القدرة على إعادة تسمية علامات الفتح والإغلاق في نفس الوقت. ثانيًا ، القدرة على إغلاق العلامات تلقائيًا.





إعادة تسمية تلقائي لعلامات البداية والنهاية

▍ الامتدادات

• علامة إعادة تسمية تلقائية (3.3 مليون عملية تنزيل): تقوم تلقائيًا بإعادة تسمية علامات HTML / XML المقترنة ، تمامًا كما يفعل Visual Studio IDE.
• علامة الإغلاق التلقائي (3.1 مليون عملية تنزيل): تغلق علامات HTML / XML تلقائيًا ، تمامًا كما تفعل مع Visual Studio IDE أو Sublime Text.

▍ ميزات كود VS

الإعداد المقابل في VS Code له اسم غامض إلى حد ما وغير مفهوم. ربما هذا هو سبب عدم تمكن الكثير من الناس من العثور عليه.

• Editor: Rename on Type: يتحكم في إعادة التسمية التلقائية للعلامات المقترنة أثناء إدخال رمز. الافتراضي هو false.

للعثور على هذا الإعداد ، يمكنك فتح نافذة إعدادات المحرر ( File > Preferences > Settings) وإدخال Editor: Rename on Typeالإعدادات في شريط البحث.



لتمكين هذه الميزة ، أضف ما يلي إلى settings.json:

"editor.renameOnType": true

يتم دعم ملفات HTML فقط حتى الآن ، ولكن لدى متتبع المشروع مشكلة مفتوحة فيما يتعلق بدعم ملف JSX.



من غير المحتمل أن يدعم VS Code نفسه هذا لملفات Vue. من المحتمل أن يتم تنفيذ آلية مماثلة في امتداد Vetur. تم بالفعل فتح مهمة مقابلة في أداة تعقب هذا المشروع .

2. تزامن الإعدادات

يدعم VS Code الآن مزامنة الإعدادات بين أجهزة كمبيوتر مختلفة. هذه الميزة متاحة بدءًا من VS Code Preview 1.48 (إصدار يوليو 2020).



أنا الآن أواجه هذه الفرصة وما زلت لم أواجه أي مشاكل.

▍ الامتداد

• مزامنة الإعدادات (1.8 مليون تنزيل): لمزامنة الإعدادات واختصارات لوحة المفاتيح والمقتطفات والإضافات وملفات launch.json والمزيد من GitHub Gist.

▍ ميزات كود VS

يمكنك أن تقرأ عن هذه الميزات في وثائق VS Code . الصفحات ذات الإعدادات المقابلة موضحة أدناه.





إعدادات



المزامنة للمزامنة ، يمكنك استخدام حسابات Microsoft أو GitHub ، ويمكنك تحديد ما يجب مزامنته.





تحديد العناصر للمزامنة

3. ضبط استيراد الوحدات

يمكن أن تكون إدارة استيراد وحدات JavaScript و TypeScript النمطية مهمة شاقة ، خاصة إذا كنت بحاجة إلى إعادة تشكيل مشروعك أو إعادة تشكيل التعليمات البرمجية الخاصة بك. يسعى المطورون إلى أتمتة هذا كلما أمكن ذلك.

▍ الامتدادات

• استيراد تلقائي (1.1 مليون عملية تنزيل): يبحث تلقائيًا عن أوامر استيراد الوحدة ويوزعها ، ويوفر آليات إكمال التعليمات البرمجية ، ويمكّن إجراءات التعليمات البرمجية. يدعم TypeScript و TSX.
• Move TS (تنزيلات 308K): يراقب حركة ملفات TypeScript ويحافظ على تحديث أوامر الاستيراد المرتبطة بها داخل مساحة العمل.
• استيراد تلقائي - ES6 و TS و JSX و TSX (تنزيلات 157 ألف ).

▍ ميزات كود VS

• JavaScript > Suggest: Auto Imports: يتيح لك تمكين أو تعطيل اقتراحات الاستيراد التلقائي. يتطلب استخدامه في مساحة عمل TypeScript منذ 2.6.1. الافتراضي هو true.
• TypeScript > Suggest: Auto Imports: يتيح لك تمكين أو تعطيل اقتراحات الاستيراد التلقائي. يتطلب استخدامه في مساحة عمل TypeScript منذ 2.6.1. الافتراضي هو true.
• JavaScript > Update Imports on File Move: Enabled: يتيح لك اختيار كيفية تحديث مسارات استيراد الوحدة تلقائيًا عند إعادة تسمية الملفات أو نقلها في VS Code. يتطلب استخدامه في مساحة عمل TypeScript منذ الإصدار 2.9. الافتراضي هو prompt.
• TypeScript > Update Imports on File Move: Enabled: يتيح لك اختيار كيفية تحديث مسارات استيراد الوحدة تلقائيًا عند إعادة تسمية الملفات أو نقلها في VS Code. يتطلب استخدامه في مساحة عمل TypeScript منذ الإصدار 2.9. الافتراضي هو prompt.

هكذا تبدو هذه الإعدادات في الملف settings.json:

"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",

أيضًا ، إذا كنت تريد تنظيم أوامر الاستيراد عند حفظ الملفات ، فأنت بحاجة إلى الإعداد التالي:

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

يؤدي استخدامه إلى إزالة عبارات الاستيراد غير المستخدمة ووضع أوامر الاستيراد بحيث يتم الانتقال أولاً إلى الأوامر التي تستخدم المسارات المطلقة. أنا معجب كبير بهذه الآليات ، والتي يمكنك ببساطة نسيانها بمجرد إعدادها.

4. مقتطفات HTML و CSS

قد تقرر أن ما يلي سيكون مفيدًا لك:

• استخدم قوالب HTML لإنشاء عناصر وصف الصفحة القياسية بسرعة.
• قم بإنشاء مستودع لأجزاء التعليمات البرمجية المستخدمة بشكل متكرر والتي يمكن استخدامها لتوفير الوقت.
• طرق مختصرة لوصف كتل كبيرة من التعليمات البرمجية.

كل هذه الميزات متشابهة ولكنها مختلفة قليلاً ، والتي سنناقشها في هذا القسم.

▍ الامتدادات

• قصاصات HTML (3.8 مليون عملية تنزيل): علامات HTML كاملة ، بما في ذلك مقتطفات HTML5.
• HTML Boilerplate ( 684K تنزيلات): مولد HTML5 Boilerplate بسيط.
• مقتطفات CSS (تنزيلات 22 ألف): مجموعة من مقتطفات CSS.

▍ ميزات كود VS

يحتوي VS Code على صندوق أدوات Emmet مدمج . تقدم هذه الأدوات اختصارات ومقتطفات لـ HTML و CSS. يتم تمكين Emmet افتراضيًا للملفات التالية: html، haml، pug، slim، jsx، xml، xsl، css، scss، sass، lessو stylus. راجع وثائق VS Code للحصول على التفاصيل .



على سبيل المثال ، لإضافة ترميز HTML للصفحة إلى الملف ، يكفي إدخال علامة التعجب ( !) والضغط على المفتاح Tab.





إضافة نموذج HTML إلى ملف



يدعم Emmet أيضًا الاختصارات ، والتي تتيح لك إدراج مجموعات من العناصر في المستندات. هيكلها مشابه لمحددات CSS.



على سبيل المثال ، دعنا ندخل البناء التالي في ملف HTML:

ul>li*5

اضغط على المفتاح Tab. سيتم تحويل هذا البناء إلى الكود التالي:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

إذا قمت بإدخال المحرر aوالنقر فوق Tab، فسيتم إدراج الإنشاء في الكود <a href="">، وسيتم وضع المؤشر داخل علامات الاقتباس ، مما يتيح لك إدخال قيمة السمة على الفور href.



هذه مجرد مقدمة قصيرة جدًا لقدرات Emmet في HTML. يقدم VS Code قدرات مماثلة لـ CSS أيضًا. من بين هذه الميزات ، أفضل ما لدي هو التهيئة التلقائية لبائعي المستعرضات. يمكنك العثور على تفاصيل حول Emmet في وثائق مجموعة الأدوات هذه. أيضًا ، قد تجد ورقة الغش Emmet هذه مفيدة .



يمكنك تخصيص المقتطفات الموجودة وإنشاء مقتطفات خاصة بك عن طريق تحرير الملف snippets.json. يدعم



Emmetليس فقط HTML و CSS. على سبيل المثال ، لاستخدام Emmet عند إنشاء تطبيقات Vue وعند كتابة كود JavaScript ، settings.jsonتحتاج إلى إضافة ما يلي إلى:

"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}

إذا كنت ترغب في تمكين دعم Emmet لعملية تخفيض السعر ، فهناك شيء واحد (أو بالأحرى خطأ ) يجب أن تكون على دراية به . يكمن في حقيقة أنك تحتاج emmet.excludeLanguagesإلى مصفوفة فارغة لتكتب إلى:

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}

مناقشة هذا يمكن العثور عليها هنا .

5. نص القالب

قد تحتاج إلى ملء نص العنصر النائب أثناء عملك على الصفحة. يتم ذلك عادةً لتقييم مظهر الصفحة التي يوجد بها بعض المحتوى. غالبًا ما يتم استخدام "Lorem ipsum" كنص مشهور. هناك امتدادات تسمح لك بإنشاء هذا النوع من النص ، لكن VS Code لها نفس القدرات.

▍ الامتداد

• Lorem Ipsum (168 ألف تنزيل).

▍ ميزات كود VS

ذكرنا أعلاه أن VS Code يحتوي على صندوق أدوات Emmet مدمج. Emmet له اختصار لإنشاء نص نائب. من أجل استخدامه ، فقط أدخل loremواضغط على المفتاح Tab. سيؤدي هذا تلقائيًا إلى إنشاء فقرة من 30 كلمة.





إدخال كلمة



الاختصار يمكن استخدام هذا الاختصار ليس فقط عند إنشاء فقرة واحدة من النص ، ولكن أيضًا ، على سبيل المثال ، لإنشاء مجموعات متعددة من بعض العناصر. لنفترض أن البناءp*2>loremسينتج عنه عنصرين<p>مليئين بنص عنصر نائب:

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
  molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias
  officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
  Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
  recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at
  neque quos facere sequi unde optio aliquam!
</p>

6. الإزالة التلقائية للمسافات الزائدة

عادةً ما تزيل الامتدادات المقابلة المسافات غير الضرورية في نهاية السطور ، إما أثناء تحرير التعليمات البرمجية أو عند الأمر. وإعدادات VS Code التي أقترح استخدامها بدلاً من هذه الامتدادات مصممة لإزالة المسافات عند حفظ الملفات.

▍ الامتدادات

• مسافات زائدة (447 ألف تنزيل): يسمح لك بتمييز وإزالة المسافات اللاحقة.
• Autotrim (15000 تنزيل): يوضح وصف هذا الامتداد ما يلي: "غالبًا ما تظهر المسافات الزائدة بعد تحرير التعليمات البرمجية ، بعد إزالة التركيبات في نهاية السطور ، بعد تنفيذ إجراءات أخرى مماثلة. يراقب هذا الامتداد عملية تحرير الكود ، ويتذكر رقم السطر الذي يوجد به المؤشر النشط. بعد عدم وجود مؤشر أكثر نشاطًا على هذا السطر ، سيتم إزالة علامات التبويب والمسافات اللاحقة منه. "

▍ ميزات كود VS

• Files : Trim Trailing Whitespace: عند تمكين هذه الميزة ، سيتم تجريد المسافات الزائدة عند حفظ الملفات. الافتراضي هو false.

لتمكين هذه الميزة ، settings.jsonيمكنك إضافة ما يلي إلى:

"files.trimTrailingWhitespace": true

النتيجة

قبل ذلك ، عندما تواجه الحاجة إلى حل مشكلة في VS Code ، ابدأ في البحث عن امتداد مناسب ، واكتشف ما إذا كانت هناك أداة لحل مشكلتك من بين الميزات القياسية لـ VS Code. يبدو الأمر واضحًا تمامًا ، لكننا جميعًا ربما فعلنا العكس تمامًا في بعض الأحيان. تظهر الميزات الجديدة في VS Code بشكل منتظم ، لذا من الجيد التحقق من سجل التغيير لهذا المحرر من وقت لآخر.



كلما أمكن ، هل تسعى جاهدة لاستخدام الميزات القياسية لـ VS Code بدلاً من الامتدادات؟