16 امتدادات أكواد VS الأعلى لمطوري الويب
نشرت: 2020-02-12يعد Microsoft Visual Studio Code (VS Code) أحد أفضل برامج تحرير التعليمات البرمجية لمطوري البرامج. منذ إطلاقه ، ارتفعت شعبيته ليس فقط بسبب النظام الأساسي المستقر الذي يوفره ، ولكن أيضًا بسبب الطبيعة القابلة للتوسيع التي بنتها Microsoft. يعد سوق الإضافات بمثابة وفرة من الوظائف الإضافية والميزات التي تسمح للمطورين بتخصيص VS Code في بيئة التطوير الخاصة بأحلامهم. نريد تفصيل بعض أهم امتدادات VS Code المتاحة اليوم حتى لا تفوتك أيًا منها.
1. خريطة مفاتيح نصية سامية ومستورد إعدادات
تتصدر قائمتنا عنوان Sublime Text Keymap and Settings Importer. في حال لم يكن العنوان وصفيًا بدرجة كافية ، يتيح لك هذا الامتداد سحب خرائط مفاتيح وإعدادات نص Sublime الحالية بحيث يمكنك الانتقال بسلاسة إلى استخدام VS Code كإعداد افتراضي. نظرًا لأن الكثير من الأشخاص يحبون Sublime وقد أمضوا سنوات في ذلك ، فإن جعل VS Code يحتفظ بذاكرة العضلات المكتسبة من هذا المحرر أمر منطقي للغاية.
2. مقتطفات كود JavaScript (ES6)
يمكن أن تصبح كتابة JavaScript (أو أي رمز) مرهقة عند تكرار نفس المقتطفات مرارًا وتكرارًا. يساعد هذا الامتداد في تخفيف ذلك من خلال السماح لك بشكل أساسي بكتابة اختصارات لمقتطفات التعليمات البرمجية المستخدمة كثيرًا. عند التشغيل ، يقوم المقتطف ببساطة باستبدال النص وإدراجه مباشرة في المستند.
3. قوس تلوين زوج 2
بغض النظر عن اللغة التي تكتبها ، فمن المحتمل أن تكون الأقواس جزءًا رئيسيًا منها. وإبقائها مستقيمة يمكن أن يكون صداعًا. ولكن باستخدام امتداد VS Code هذا ، يمكنك ترميز أزواج المطابقة بالألوان للمساعدة في تخفيف نقطة الألم هذه والعمل على جعل الكود نفسه يعمل - وليس المحرر.
4. ESLint
في نواح كثيرة، ESLint هو اللنت للجافا سكريبت. يعد اكتشاف الأخطاء وإعطائك ملاحظات وتحذيرات فورية أمرًا ضروريًا للحفاظ على رمز فريقك نظيفًا ، وليس هناك حقًا طريقة أفضل للقيام بذلك في JS من ESLint. نوصي بشدة بتثبيت هذا في أسرع وقت ممكن.
5. مدير المشروع
هناك مشكلة في VS Code تظهر في كثير من الأحيان وهي كيفية التبديل بين المشاريع المختلفة. بشكل افتراضي ، لا يكون التدفق هو الأكثر سهولة. لذا يعمل Project Manager على حل هذه المشكلة من خلال إعطائك قائمة في الشريط الجانبي يمكنك استخدامها لحفظ مجلدات مختلفة ومشاريع Git للتبديل بينها بسهولة. هذا ليس تحسينًا للمحرر بقدر ما هو عثرة في جودة الحياة.
6. معاينة المتصفح
أحد العناصر الأكثر بغيضًا في تطوير الويب هو تحميل وتحديث المحتوى الخاص بك في متصفحات مختلفة للاختبار. تساعد معاينة المتصفح في الحد من المقدار الذي تحتاجه للقيام بذلك من خلال منحك معاينة قوية لعملك داخل VS Code نفسها في عملية Chrome الجديدة.
7. أجمل
كلنا نريد كود أجمل. لذلك ربما ينبغي علينا جميعًا تثبيت Prettier للتعامل مع ذلك من أجلنا. يصف الوصف Prettier بأنه "مُنسق كود برأي ، فإنه يفرض نمطًا متسقًا من خلال تحليل التعليمات البرمجية الخاصة بك وإعادة طباعتها بقواعدها الخاصة التي تأخذ الحد الأقصى لطول السطر في الاعتبار ، وتغليف الكود عند الضرورة." قد لا ترغب في استخدامه لكل لغة أو مشروع ، لذلك هناك الكثير من إعدادات التهيئة حتى تتمكن من تخصيصها حسب رغبتك.
8. جيتلينك
نحن نحب gitlink بسبب بساطته. في حين أن هناك الكثير من امتدادات Git هناك ، فإن أحد الأشياء المتعلقة بـ gitlink هو أنه بسيط ويفعل شيئًا واحدًا فقط. وهي تعمل بشكل جيد. ما عليك سوى تحديد مقتطف من التعليمات البرمجية ، وسيقوم gitlink بعد ذلك بنقلك إلى الريبو عبر الإنترنت لهذا المقتطف المحدد. من المفيد للغاية الانتقال بسرعة إلى الريبو الخاص بك بغض النظر عن مكان استضافته عن بُعد.
9. أفضل التعليقات
يعد التعليق على الكود الخاص بك أحد أهم العادات التي يمكن أن يتمتع بها المطور. أكثر من ذلك ، فإن التعليق على الكود الخاص بك جيدًا هو مهارة يجب تدريسها في كل فصل دراسي لعلوم الكمبيوتر ومعسكر تدريب على الترميز هناك. ومع ذلك ، فإن التعليقات الأفضل هي واحدة من امتدادات VS Code التي يحتاجها الجميع لأنها ستتيح لك ، إذا كنت تؤمن بالاسم ، ترك تعليقات أفضل في التعليمات البرمجية الخاصة بك. من خلال الاختصارات التي تتيح لك التمييز بين الأسئلة ، وعلامات التعجب ، والرمز المعلق ، والاستعلامات ، والتنبيهات ، والإبرازات ، و TODO ، لن يجعل هذا الامتداد حياتك أسهل فحسب ، بل سيجعل حياة فريقك أسهل. وأي مطور يأتي بعدك في المشروع. لا يمكننا أن نوصي بهذا بما فيه الكفاية.
10. أيقونات رمز VS
جزء كبير من تخصيص VS Code مع الامتدادات هو التخصيص الفعلي. ليس فقط التغييرات الوظيفية. باستخدام أيقونات VS Code ، يصبح المحرر أكثر سخونة وأسهل في التنقل. تم تصميم نظام الملفات بأيقونات تمثل أنواعًا مختلفة من الملفات ، وتظهر هذه الرموز في المستكشف بالإضافة إلى علامات تبويب المستندات نفسها. يجعل العمل في طريقك عبر أنظمة الملفات المعقدة أسهل بكثير وأقل صعوبة. حرفيا في بعض الأحيان. كون الرموز سهلة القراءة تمنع إجهاد العين وبالتالي الصداع. لذلك من أجل صحتك ، قم بتثبيت VS Code Icons.
11. علامة الإغلاق التلقائي
ربما نكون نحن ، لكن كتابة علامات الإغلاق لأي لغة تصبح مهمة روتينية. هناك شيء ما حول إضافة ذلك / في النهاية يجعل ضغطات المفاتيح تشعر بالراحة قليلاً. لا تخف ابدا. جعلت علامة الإغلاق التلقائي حياتنا أسهل. لذلك نريد أن نجعل لك أسهل. الأمر بسيط وسهل ويمكنك الاستمرار في الكتابة بينهما وببساطة الضغط على مفتاح في طريقك إلى السطر التالي أو إلى نهايته. قم بتثبيت هذا وامنح أصابعك استراحة من الجمباز لإغلاق العلامات يدويًا.
12. تلوين
CSS رائع. اختيار الألوان في CSS ليس كذلك. عندما تتعامل مع الرموز السداسية وقيم RGBA ، يصعب أحيانًا الحصول على صورة ذهنية للوحة الألوان التي قمت بتعيينها للموقع. يساعد هذا الامتداد في التخفيف من ذلك من خلال تقديم ملاحظة مرئية لأي رموز لونية تستخدمها داخل ملفاتك. يمكنك رؤية الألوان التي تستخدمها داخل النص نفسه كتمييز حتى لا تضطر إلى التبديل باستمرار ذهابًا وإيابًا من الحوامل ومحددات الألوان وما إلى ذلك.
13. بولياكود
Polacode يشبه كاميرا Polaroid لمحرر الشفرة. تم تصميمه لجعل التقاط الكود الخاص بك أنظف وأسهل ، وهذا أمر لا بد منه لأي كتاب تعليمي يريد أن يكون رمزهم صحيحًا تمامًا.
14. GitLens
من الصعب حقًا شرح ما يجعل GitLens رائعًا للغاية. إنه يعمل كما لو تم تصميم Git و VS Code مع وضع بعضهما في الاعتبار ، وبدلاً من العمل من خلال التسلسلات الهرمية لسطر الأوامر ، يمكنك الحصول على تصورات ورؤى تزيل الكثير من الارتباك من عمل فريق Git. يمكنك عرض الأشياء عن طريق التمرير ، ومشاهدة التغييرات الأخيرة والتعليقات التوضيحية ، وطرق المقارنة داخل VS Code نفسها ، وخرائط الحرارة ، وسجل الخط ، وغير ذلك الكثير. إنه في الأساس امتداد Git المثالي ، ونعتقد أنه يجب عليك تثبيته برونتو.
15. لايف سيرفر
هل أردت يومًا إطلاق خادم تطوير محلي من داخل IDE الخاص بك والعمل عليه في الوقت الفعلي؟ بغض النظر عن إجابتك على هذا السؤال ، سترغب في إعطاء Live Server فرصة. لأن هذا بالضبط ما يمكنك فعله به. في حين أنه قد لا يزيل تمامًا الحاجة إلى منتجات مثل Local by Flywheel و MAMP ، إلا أنه بالتأكيد يقلل من ضرورتها في العديد من المواقف.
16. تجميل
يستخدم Beautify أسلوب js-beautify الشهير للحفاظ على مظهر JavaScript الخاص بك لطيفًا ومرتبًا. لا تقلق بشأن الخطوط المقطوعة والمسافات البادئة الغريبة. ما عليك سوى النقر فوق زر ، وستكون جميع التعليمات البرمجية جاهزة لقربها (ربما باستخدام Polacode من الأعلى).
استنتاج
هذه القائمة يمكن أن تكون طويلة الآلاف من العناصر. في الواقع ، ربما يكون هناك بعضكم ممن لديهم مئات من الملحقات المختلفة المثبتة التي تقوم بتمكينها وتعطيلها في أوقات مختلفة. لكننا نشعر أن هذه هي امتدادات VS Code التي يمكنك تثبيتها ثم معرفة ما تريده بينما تتعمق في السوق.
ما هي امتدادات go-to VS Code الخاصة بك؟ اسمحوا لنا أن نعرف في التعليقات!
صورة مميزة للمقال بواسطة SVIATLANA SHEINA / shutterstock.com