ربما يمكن استدعاء Visual Studio Code كأفضل محرر كود حديث. إذا كنت لا تعمل معه حتى الآن ، فعليك على الأقل النظر إليه. تمت كتابة العديد من الإضافات لـ VS Code ، والتي يتم وضعها في دليل
Marketplace ، ويتم الوصول إليها بسهولة من المحرر نفسه.
هناك ملحقات لتصحيح الأخطاء وتنسيق التعليمات البرمجية ، وهي ملحقات تسهل العمل مع منصات مختلفة (مثل Heroku و GitHub و Docker و Azure) والتقنيات. في Marketplace ، يمكنك العثور على مظاهر للمحرر واللنت وأدوات لتسهيل إدخال أجزاء التعليمات البرمجية المتكررة والمزيد.
اختار مؤلف المادة ، التي ننشر ترجمتها اليوم ، أفضل 10 امتدادات لـ VS Code ، مخصصة في المقام الأول لأولئك الذين يشاركون في تطوير الواجهة الأمامية ، أي أنها تعمل مع HTML و CSS وجافا سكريبت وأطر الويب المختلفة.
معلومات أولية
إذا لم تكن قد عملت مع VS Code من قبل ، ولكنك تريد تجربة هذا المحرر ، يمكنك تنزيله من
هنا . ولكن ، إذا كانت مهتمة ، مادة تظهر قدراتها.
بعد تنزيل وتثبيت VS Code ، افتح لوحة الملحقات.
لوحة التمديدبعد ذلك ، باستخدام حقل البحث ، ابحث عن الإضافة التي تهتم بها ، وادرس المعلومات المتعلقة بها ، وإذا قررت أنك بحاجة إليها ، فقم بتثبيتها. تبدو أدوات البحث عن الإضافات مثل الصورة أدناه.
ملحقات البحث لرمز VS في السوقالآن لنتحدث عن الإضافات.
خادم مباشر
ملحق خادم مباشرتم تصميم هذا الملحق الرائع لإنشاء خادم محلي ، يُستخدم أثناء التطوير لاستضافة صفحات ثابتة وديناميكية عليه. بعد تثبيت هذا الامتداد ، سيظهر زر Go Live على شريط المهام ، والذي يسمح لك ببدء تشغيل الخادم. سيؤدي الضغط على هذا الزر أثناء تحرير صفحة HTML إلى فتح هذه الصفحة في مستعرض. يدعم الخادم إعادة تحميل الصفحة التفاعلية ، والتي يتم إجراؤها بعد إجراء تغييرات على التعليمات البرمجية وحفظ الملفات المقابلة.
مترجم ساس لايف
ملحق Live Sass Compilerيقوم هذا الملحق ، بشكل تفاعلي ، بتجميع ملفات SCSS إلى ملفات CSS. يتم ذلك بسرعة كبيرة. يمكنك بدء معاينة نتائج تطبيق الأنماط المترجمة في متصفح باستخدام الزر Watch my sass في شريط المهام. هذا التمديد ، كما تمت مناقشته للتو ، يدعم إعادة التحميل التفاعلية للمواد.
مقتطفات رمز جافا سكريبت (ES6)
مقتطفات رمز امتداد جافا سكريبت (ES6)هذا التمديد جدير بالملاحظة أنه يحتوي على أكثر من 2 مليون عملية تنزيل ، ويبدو أن شعبيته تتزايد بمرور الوقت فقط. يوفر للمطور برمجيات (مقتطفات) مناسبة للاستخدام في أنواع الملفات التالية:
- TypeScript (.ts)
- تفاعل جافا سكريبت (jsx.)
- تفاعل TypeScript (.tsx)
- Html (.html)
- Vue (.vue)
الآلية الوقائية الوطنية
ملحق NPMهذا هو الملحق الرسمي لـ Node Package Manager (npm) لـ VS Code. يجعل من السهل العمل مع ملف package.json. على وجه الخصوص ، يعرض تحذيرات حول التبعيات المنعكسة في الملف ولكن لم يتم تثبيتها ، بالإضافة إلى تلك التي تم تثبيتها ولكنها غير مسجلة في package.json. يساعد على تحديد الحزم التي لا تتوافق إصداراتها مع القواعد المحددة في package.json ، وتزود المطور بأدوات ملائمة لتشغيل أوامر npm.
ESLint
ملحق ESLintيوفر هذا الملحق قدرات الفحص لملفات .js و. jsx. هو شكلي ويسمح بتنسيق رمز موحد. يمكن استدعاء ESLint ، مع ما يقرب من 12 مليون عملية تنزيل ، واحدة من الامتدادات الأكثر شيوعًا لـ VS Code.
أجمل
ملحق أجملهذا الامتداد الشائع للغاية يضم ما يقرب من أربعة ملايين تنزيل. يساعد على تنسيق كود JavaScript ، والذي يسمح بالحفاظ على قاعدة تعليمات برمجية موحدة ويحسن من سهولة قراءة البرامج. هناك امتداد مماثل في Marketplace ، Beautify ، وهو أيضًا شائع جدًا.
نظرة خاطفة على CSS
ملحق CSS Peekهذا الملحق المفيد مفيد عند العمل مع تخطيط الصفحة ، وتحديد واشتقاق ، بناءً على أسماء الفئات ومعرفات العناصر والأنماط المطبقة عليها. يساعد على توفير الوقت من خلال القضاء على حاجة المطور للتبديل باستمرار بين ملفات HTML و CSS. بالطبع ، يمكن حل هذه المهام من خلال عرض الملفات المناسبة في وضع تقسيم الشاشة ، ولكن لا يحب الجميع العمل بهذا النمط.
القصاصات الزاوي 6
ملحق القصاصات 6 الزاويهذا هو الملحق الرسمي الذي يقدم مقتطفات للمطورين لـ Angular 6. يتبع الرمز المقابل دليل النمط الزاوي ، باستخدام هذا الملحق يسرع عملية تطوير المشاريع Angular ، على وجه الخصوص ، بسبب اكتمال الشفرة. وهو يدعم TypeScript ، وبناء عامل الخدمة ، و RxJS ، و ngRx ، وحتى Angular Material. إذا كنت تقوم بتطوير تطبيقات Angular في VS Code ولا تستخدم هذا الملحق بعد ، فيجب عليك بالتأكيد إلقاء نظرة عليه.
فيتور
ملحق فيتورهذا هو الملحق الرسمي لـ Vue.js لـ VS Code مع عدد مذهل من التنزيلات ، والذي يحتوي على أكثر من 5 ملايين. الغرض منه هو تسهيل تطوير تطبيقات Vue.js. يمكن لـ Vetur التحقق من الرمز بحثًا عن الأخطاء ، ويدعم الإكمال التلقائي والمقتطفات.
المصحح لمتصفح Chrome
المصحح لملحق كرومهذا هو الملحق الرسمي لـ VS Code ، المصمم لتصحيح أخطاء JS code باستخدام Google Chrome. وهي حاليًا واحدة من ملحقات VS Code الأكثر استخدامًا.
الملخص
لقد درسنا فقط اثني عشر امتدادًا لـ VS Code ، ولكن في الواقع هناك الكثير منها. من المحتمل جدًا أنه عند فحص كتالوج Marketplace ، ستجد شيئًا هناك يبدو لك أكثر فائدة من الإضافات التي تمت مناقشتها. ومع ذلك ، يمكن لمعظمها أن يساعد بشكل كبير أي مطور أمامي. نأمل أن تكون مفيدة لك أيضًا.
إذا كنت مهتمًا بموضوع امتدادات VS Code -
إليك مادة أخرى عننا ، تركز على مطوري JS. من خلال نشر هذه المادة ، سألنا القراء سؤالًا عن الإضافات التي يستخدمونها. ثم
اتضح أن هذا هو Code Outline و Todo Tree و GitHub. اليوم ، أعزائي القراء ، نريد أن نسألك نفس السؤال. ما هي ملحقات VS Code التي تفضلها؟
