27 أدوات رمز VS رهيبة لمطوري JavaScript الحديثة

يعد Visual Studio Code (المعروف أيضًا باسم VS Code و VSCode) محرر تعليمات برمجية عبر منصة فعّالة من حيث التكلفة ولكنه قوي مصممًا كتطبيق سطح مكتب. وفقًا لمؤلف المادة ، التي ننشر ترجمتها اليوم ، يدعم VS Code العديد من أدوات التطوير - مثل TypeScript ومصحح أخطاء Chrome. هذا ، بالإضافة إلى حقيقة أن عددًا لا يصدق من امتدادات المصادر المفتوحة قد تمت كتابتها إليها ، يجعل VS Code محررًا شائعًا ومحبوبًا من قبل الكثيرين.



إذا كنت ترغب في إضافة شيء جديد إلى ترسانتك من مبرمج جافا سكريبت - يأمل مؤلف المادة أن تجد شيئًا مفيدًا لك هنا. ليس كل الأدوات السبعة والعشرين التي تم استعراضها هنا مخصصة فقط لتطوير JS. ولكن يمكن تطبيقها جميعًا بنجاح من قبل أولئك الذين يكتبون في JavaScript.

1. قصاصات المشروع

يعتمد ملحق Project Snippets ، المفضل لدي في كل الأوقات ، على أداة User Snippets المدمجة في VS Code.

إذا لم تكن معتادًا على ميزة VS Code القياسية ، فاعلم أنها تتيح للمستخدم تصميم أجزاء التعليمات البرمجية الخاصة به في شكل ما يسمى المقتطفات. يتم ذلك من أجل إعادة استخدامها في مشاريعهم. ماذا يعني إعادة الاستخدام؟

النظر في مثال. لنفترض أنك تجد أنه يتعين عليك في كثير من الأحيان كتابة نفس رمز النمطي. على سبيل المثال - هذا:

import { useReducer } from 'react' const initialState = {   // } const reducer = (state, action) => {   switch (action.type) {     default:       return state   } } const useSomeHook = () => {   const [state, dispatch] = useReducer(reducer, initialState)   return {     ...state,   } } export default useSomeHook 

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

إذا قمت ، في VS Code ، بالانتقال إلى File > Preferences > User Snippets ، يمكنك اختيارياً إنشاء New Global Snippets File عن طريق تحديد أمر New Global Snippets File .

على سبيل المثال ، من أجل إنشاء ملف مقتطف جديد لمشاريع React التي تستخدم TypeScript ، يمكنك تحديد الأمر New Global Snippets File وتعيين اسم الملف كـ typescriptreact.json . سيتم فتح ملف .json الذي تم إنشاؤه حديثًا في المحرر ، حيث سيكون من الممكن وصف المقتطفات.

أنشئ مقتطفًا استنادًا إلى جزء من الكود أعلاه. للقيام بذلك ، يجب تحويل ملف typescriptreact.json إلى ما يلي:

 {  "const initialState = {}; const reducer = (state, action)": {    "prefix": "rsr",    "body": [      "const initialState = {",      " //$1",      "}",      "",      "const reducer = (state, action) => {",      " switch (action.type) {",      "  default:",      "   return state",      " }",      "}"    ]  } } 

الآن بما أن الملف يحتوي على وصف مقتطف ، يمكنك إنشاء ملف TypeScript جديد بالملحق .tsx وإدخال بادئة rsr فيه. سيؤدي ذلك إلى ظهور نافذة منبثقة مع وصف المقتطف. الضغط على Tab يكمل الإجراء الخاص بإدراج مقتطف في ملف. سيمثلها الكود التالي:

 const initialState = {  // } const reducer = (state, action) => {  switch (action.type) {    default:      return state  } } 

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

افترض أن المشروع يستخدم بنية مجلد خاصة. لتبسيط العمل في هذا المشروع ، يمكن تحضير شيء مشابه للرمز التالي في ملف typescriptreact.json :

 {  "import Link from components/common/Link": {    "prefix": "gcl",    "body": "import Link from 'components/common/Link'"  },  "border test": {    "prefix": "b1",    "body": "border: '1px solid red',"  },  "border test2": {    "prefix": "b2",    "body": "border: '1px solid green',"  },  "border test3": {    "prefix": "b3",    "body": "border: '1px solid magenta',"  } } 

انتبه إلى المقتطف الأول. قد يكون مناسبًا لمشروع يحتوي على مجلد محدد وبنية ملف. ولكن ماذا لو كنا نعمل على مشروع آخر يقع فيه مكون Link على مسار مثل components/Link ؟

ألقِ نظرة الآن على المقتطفات الأخرى. يستخدمون علامات اقتباس مفردة. استخدامها يؤدي إلى ظهور هياكل مثل border: '1px solid red' في الكود.

مثل هذه البنى يمكن استخدامها تماما في جافا سكريبت. ولكن ماذا لو استخدمنا مكتبة المكونات المصممة كأداة لتصميم مشروع؟ في هذه الحالة ، فإن بناء الجملة لا يناسبنا. في الواقع ، تستخدم المكونات المصممة تصميمات CSS منتظمة!

في الواقع ، هنا ملحق Project Snippets يأتي لمساعدتنا.

يتيح لك هذا الملحق إنشاء قصاصات تعمل على مستوى المشروع أو مساحة العمل. لا تتعارض هذه المقتطفات مع المقتطفات التي تم إنشاؤها لمشاريع أخرى ولا تتعارض مع العمل معها. انها مريحة جدا.

2. أفضل تعليقات

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

باستخدام ملحق Better Comments ، يمكنك تمييز التعليقات بألوان مختلفة.


باستخدام أفضل تعليقات التمديد

الآن ، من بين أشياء أخرى ، إذا كنت تعمل على رمز في فريق ، سيكون من الأسهل بالنسبة لك لفت انتباه المطورين الآخرين إلى التعليقات المهمة التي تبدأ بـ ! او ? .

3. قوس زوج تلوين

عندما صادفت ظهور لقطات شاشة لأول مرة مع نتائج امتداد Bracket Pair Colorizer ، أصبح من الواضح لي أن هذا الملحق يجب أن يظهر ببساطة في صندوق الأدوات الخاص بي.

البرمجة هي شغفي ، وتسليط الضوء على الأقواس هو شيء يساعدني بالتأكيد على الاستمتاع بشكل كامل بهذا النشاط.


باستخدام ملحق زوج تلوين القوس

4. موضوع المواد

سمة المادة ، المقدمة من امتداد سمات المادة ، هي ظاهرة عظمى متاحة الآن لمحبي VS Code. استخدامه يتيح لك إحضار الكود إلى النموذج التالي.


صنع رمز باستخدام موضوع المواد

يجب أن يكون هذا أحد أفضل الموضوعات الموجودة.

5. @ typescript-eslint / parser

إذا كنت تكتب في TypeScript ، فيجب أن تفكر في تبديل تكوينات TSLint إلى typescript-eslint. الحقيقة هي أنه وفقًا لبعض التقارير ، سيتم إيقاف دعم Palantir TSLint بعد مرور بعض الوقت. بدلاً من TSLint ، سيتم استخدام typescript-eslint هناك.

تتحول المشاريع تدريجياً إلى استخدام حزمة @ typescript-eslint / parser والحزم ذات الصلة. يتم ذلك في محاولة للتحضير للتغييرات المستقبلية في النظام البيئي لتطوير TS. إذا كنت تحب Prettier ، فيمكنك استخدام هذه الأداة ، باستخدام غالبية قواعد ESLint.

6. Stylelint

Stylelint هي الأداة المستخدمة دائمًا في مشاريعي . هذا صحيح لعدة أسباب:

• إنها تساعد على تجنب الأخطاء.
• وهو يعزز اتفاقيات التصميم عند كتابة CSS.
• كان يعمل بشكل جيد مع Prettier.
• وهو يدعم CSS / SCSS / ساس / أقل.
• وهو يدعم المكونات الإضافية التي أنشأها مجتمع المطورين.

7. Markdownlint + docsify

لا أعرف كيف يقوم مطورو البرامج الآخرون بتدوين الملاحظات أثناء جلسات العصف الذهني ، لكنني أرغب في تدوين ملاحظات بتنسيق تخفيض السعر . هذا هو شكل بسيط ومريح. هناك العديد من الأدوات المتاحة لمساعدتك في كتابة نصوص تخفيض السعر. من بين هذه الأدوات ، يمكن ملاحظة تخفيض السعر .

هذا هو ملحق VS Code ، وهو عبارة عن .md يساعد في التحقق من الأنماط في ملفات .md . كما يدعم تنسيق النص باستخدام Prettier.

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

8. تودو تسليط الضوء

لدي عادة من كتابة الملاحظات مباشرة في التعليمات البرمجية حول ما يجب القيام به في المشروع. نتيجة لذلك ، أنا مهتم بالامتدادات مثل TODO Highlight . يساعدك هذا الملحق في العمل مع ملاحظات TODO.

9. تكلفة الاستيراد

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

10. تسليط الضوء على علامة مطابقة

في بعض الأحيان ، يمكن أن يتحول البحث عن الجزء الختامي لعلامة معينة إلى مهمة صعبة. في مثل هذه الحالات ، قد يكون ملحق Highlight Matching Tag مفيدًا.


باستخدام تمييز تمييز علامة التمديد

11. فسكودي سبوتيفي

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

يساعدني ملحق vscode-spotify ، الذي يسمح لك بالتحكم في مشغل Spotify مباشرةً من VS Code ، على حل هذه المشكلة.

بفضل هذا الملحق ، يمكنك الاطلاع على معلومات حول الأغنية التي يتم تشغيلها في شريط الحالة الخاص بالمحرر. يمكنك استخدام مفاتيح الاختصار لتبديل التسجيلات ؛ كما يمكن التحكم في Spotify من رمز VS باستخدام الأزرار.

12. GraphQL ل VSCode

تزداد شعبية تقنية GraphQL ، ويمكن رؤية أمثلة على تطبيقها في جميع أركان تطوير جافا سكريبت تقريبًا. لذلك ، من المرجح أن يجد الكثيرون ملحق GraphQL for VSCode مفيدًا.

يدعم هذا الامتداد تمييز بناء جملة GraphQL ، الوبر ، إكمال التعليمات البرمجية.

أستخدم Gatsby كثيرًا ، لذلك يجب علي قراءة رمز GraphQL كل يوم. ملحق GraphQL لـ VSCode يساعدني في هذا.

13. المسافة البادئة قوس قزح

امتداد Indent-Rainbow يشبه امتداد Highlight Matching Tag الموضح أعلاه. إذا لم يكن من السهل عليك في بعض الأحيان فهم المسافة البادئة ، فسوف يساعدك هذا الملحق في التعامل مع المشكلة عن طريق تحسين إمكانية قراءة التعليمات البرمجية. هنا مثال على استخدامه.


باستخدام المسافة البادئة قوس قزح التمديد

14. تسليط الضوء على اللون

Color Highlight هي واحدة من تلك الملحقات التي سُئلت عنها: "أين عثرت عليها؟". هذا التمديد يساعد في العمل مع اللون. يبدو أدناه.


باستخدام اللون تسليط الضوء على التمديد

15. لون المنتقى

Color Picker هو امتداد لرمز VS الذي يوفر للمستخدم واجهة رسومية لمساعدتك في اختيار الألوان للاستخدام في CSS.

16. راحة العميل

عندما أتيحت لي الفرصة لتجربة ملحق REST Client لأول مرة ، لم يبدو لي مفيدًا بشكل خاص. لا يمكن أن يقف مقارنة مع شيء مثل ساعي البريد .

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

عند التعامل معها ، يكفي إنشاء ملف جديد يكون فيه سطر واحد فقط:

 https://google.com 

من أجل تنفيذ طلب HTTP GET على هذا العنوان ، ما عليك سوى تحديده ، انتقل إلى شريط الأوامر ( CTRL + SHIFT + P ) ، وحدد الأمر Rest Client: Send Request . بعد ذلك ، سيتم فتح علامة تبويب جديدة ، حيث ستظهر قريباً معلومات حول الطلب والاستجابة. هذا مفيد جدا


باستخدام ملحق عميل REST

يتيح لك هذا الملحق أيضًا تكوين معلمات أو بيانات لطلبات POST. يتم ذلك مع بضعة أسطر من التعليمات البرمجية:

 POST https://test.someapi.com/v1/account/user/login/ Content-Type: application/json { "email": "someemail@gmail.com", "password": 1 } 

سيؤدي هذا البناء إلى طلب POST مع المعلمات { "email": "someemail@gmail.com", "password": 1 } .

وهذا ، في الواقع ، مجرد وصف موجز للغاية لإمكانيات هذا التمديد.

17. إعدادات مزامنة

لم يعجبني حقًا ، عند إعداد مكان عمل جديد ، إعداد قوائم بالملحقات التي استخدمتها ، ثم حفظها في شيء مثل Evernote ، ثم استعادتها يدويًا.

تمكنت من أتمتة هذه العملية باستخدام ملحق إعدادات المزامنة .

لاستخدامها ، تحتاج فقط إلى أن يكون لديك حساب gist / GitHub . إذا كانت هناك حاجة إلى حفظ الإعدادات (بما في ذلك ربط لوحة المفاتيح ، المقتطفات ، والإضافات ، وأكثر من ذلك بكثير) - فقط استخدم تركيبة المفاتيح SHIFT + ALT + U سيؤدي هذا إلى تحميل جميع هذه الإعدادات في حساب gist. ومع ذلك ، ستكون متاحة فقط لصاحب الحساب. لتنزيل الإعدادات ، على سبيل المثال ، عند التبديل إلى جهاز كمبيوتر جديد ، فقط قم بتثبيت هذا الامتداد وأدخل معلومات حساب gist واستخدم تركيبة المفاتيح SHIFT + ALT + D

18. تودو تري

يساعدك ملحق Todo Tree في العثور على تعليقات TODO في رمز المشروع. يقوم بإعداد هذه التعليقات بتنسيق الشجرة المعروض على الجانب الأيسر من الشاشة.


باستخدام امتداد شجرة تودو

19. تبديل الاسعار

Toggle Quotes هو امتداد مثير للاهتمام يسمح لك بتغيير مظهر علامات الاقتباس المستخدمة في الكود. لقد كان مفيدًا للغاية ، على سبيل المثال ، في الحالات التي تحتاج فيها إلى تغيير علامات الاقتباس العادية إلى backticks (backticks). قد تكون هناك حاجة لذلك عند تقريب السلاسل ، وقد يكون ذلك مفيدًا بشكل خاص عند قيام السلاسل Prettier بتصميم سلاسل باستخدام علامات اقتباس مفردة عادية.


باستخدام Toggle Quotes Extension

20. أفضل محاذاة

يسمح لك ملحق Better Align بمحاذاة الكود دون تمييزه أولاً.

لاستخدام هذا الامتداد ، تحتاج إلى وضع المؤشر في الكود المراد محاذاته ، وفتح شريط الأوامر (باستخدام CTRL + SHIFT + P أو اختصار لوحة المفاتيح الذي قمت بتعيينه لتنفيذ هذه المهمة) واستدعاء الأمر Align .

21. علامة إغلاق السيارات

لقد ساعدت ملحق Auto Close Tag منذ أن بدأت العمل في VS Code. يتيح لك إدخال شيء مثل <div> ، ثم الرمز / ، ثم إغلاق العلامة تلقائيًا.

هذه الوظيفة البسيطة والملائمة ليست في الميزات القياسية لكود VS ، لذلك أجد أن هذا الامتداد مفيد للغاية.

22. فرز الخطوط

أنا لا أحب المصفوفات التي عناصرها ليست بالترتيب الأبجدي. يساعدك ملحق Sort Lines في التعامل مع هذه المشكلة بسرعة. إذا كنت أيضًا لا تحب هذه المصفوفات - فقد يكون ذلك مفيدًا لك.

23. VSCode ترجمة جوجل

ربما أنا الشخص الوحيد الذي يجد أن امتداد VSCode Google Translate مفيد. ولكن هذا يساعدني ، حيث يجب أن أشارك في العمل في المشاريع التي يعمل معها الأشخاص الذين يتحدثون لغات مختلفة. يمكن أن يكون هذا الامتداد مفيدًا لأولئك الذين لا يريدون طي رمز VS لترجمة شيء ما.

24. أجمل

Prettier هو امتداد لرمز VS يمكنه تنسيق التعليمات البرمجية المكتوبة بلغة JavaScript و TypeScript ولغات أخرى تلقائيًا.

25. مادة أيقونة الموضوع

تعجبني الرموز الموجودة في حزمة Material Icon Theme أكثر من غيرها. استخدامها أسهل بكثير للتمييز بين أنواع الملفات. هذا ينطبق بشكل خاص على الحالات التي يتم فيها استخدام سمة مظلمة في VS Code.

26. IntelliSense for CSS names class in HTML

يتيح لك ملحق الاسم الطويل IntelliSense لأسماء فصول CSS في HTML تجهيز رمز VS مع القدرة على الإكمال التلقائي لأسماء فصول CSS في سمة HTML للفئة . يعتمد عمله على تعريفات الفصل الموجودة في مساحة العمل الخاصة بك.

27. مسار Intellisense

يساعد ملحق Path Intellisense في إكمال إدخال أسماء الملفات تلقائيًا.

النتائج

نأمل أن يكون هناك شيء مفيد لك من بين امتدادات VS Code التي قرأت عنها للتو.

أعزائي القراء! ما الامتدادات لـ VS Code التي تضيفها إلى الإضافات التي تمت مناقشتها في هذه المقالة؟