8 ملحقات قوية في Visual Studio Code لمطوري الواجهة الأمامية

على الرغم من أن Microsoft أصدرت أول إصدار ثابت من Visual Studio Code ، وهو محرر الكودات القوي الخاص به منذ بضعة أشهر فقط ، بحلول مارس 2016 ، إلا أنه يحتوي بالفعل على العديد من الملحقات المتاحة التي يمكن أن تنقل تجربة التشفير إلى المستوى التالي. ال ملحقات Visual Studio Code الرسمية يتم استضافتها في Visual Studio Code Marketplace ، والتي يمكن أن يكون الكثير منها مساعدة كبيرة لمطوري الويب.

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

كيفية تثبيت ملحقات رمز VS

تثبيت ملحق بسيط ومباشر في Visual Studio Code ، كما يمكنك تفعل ذلك داخل محرر الرمز. في VS Code Marketplace ، يكون لكل ملحق صفحته الخاصة ، ويمكنك العثور على الأمر الذي يمكنك من خلاله تثبيت الامتداد المحدد أعلى هذه الصفحة..

الأمر يبدأ دائما مع تحويلة تحويلة مصطلح. لتثبيت ملحق ، فقط صحافة CTRL + P داخل VS Code لبدء لوحة Quick Open, نسخ لصق هذا الأمر في ذلك ، وأخيرا أعد تشغيل محرر الكود لجعل العمل التمديد الجديد.

8 ملحقات قوية البصرية رمز الاستوديو

1. قصاصات HTML

   إذا كنت ترغب في كتابة HTML بشكل متكرر في Visual Studio Code ، فيمكن أن يكون ملحق HTML Snippets كأداة سهلة الاستخدام يضيف دعما مفصلا ل HTML. على الرغم من أن VS Code لديه دعم أساسي لـ HTML ، مثل تلوين بناء الجملة, يعرف ملحق HTML Snippets أكثر من ذلك بكثير.

   

   ربما الميزة الأكثر فائدة لهذا التمديد هو ذلك عندما تبدأ في كتابة اسم علامة HTML (بدون قوس زاوية البدء) ، HTML المقتطفات بسرعة يعرض قائمة من الخيارات المتاحة مع معلومات قصيرة عن كل.

   

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

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

2. HTML CSS Class Complete

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

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

   

   دعنا نقول ، تريد إنشاء موقع باستخدام Zurb Foundation ، وتريد استخدام الشبكة الصغيرة. لا تتذكر كيف تم تسمية الفئات بالضبط ، لكنك تعلم أن لها أسماء دلالات.

   مع HTML CSS Class Complete (إكمال فئة HTML CSS) ، تحتاج فقط إلى بدء كتابة الكلمة صغير, وتظهر الخيارات المتاحة على شاشتك في وقت واحد ، بحيث يمكنك بسهولة تحديد الخيار الذي تحتاجه.

   

3. عرض في المتصفح

   يعد العرض في المستعرض امتدادًا بسيطًا وقويًا لبرنامج Visual Studio Code. يمكن أن تسهل تطوير الواجهة الأمامية من خلال السماح لك إلقاء نظرة سريعة على نتيجة عملك في المتصفح أثناء الترميز. يمكنك فتح ملف HTML في المستعرض الافتراضي الخاص بك مباشرةً من رمز VS عن طريق الضغط على CTRL + F1 اختصار لوحة المفاتيح.

   لاحظ أن العرض في المتصفح يدعم HTML فقط, لذلك إذا كنت تريد أن ترى موقعك ، فأنت بحاجة إلى فتح ملف HTML. أنت لا يمكن الوصول مباشرة إلى المتصفح من ملف CSS أو JavaScript.

   

4. مصحح أخطاء Chrome

   تم إنشاء Debugger for Chrome بواسطة Microsoft نفسها ، وهو حاليًا ملحق 4 Visual Studio Code الذي يتم تنزيله بشكل متكرر.

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

   

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

   لاستخدام هذا الامتداد ، يلزمك تشغيل Chrome بـ تمكين تصحيح الأخطاء عن بُعد, واقامة السليم launch.json ملف. قد يستغرق هذا الأخير بعض الوقت ، ولكن يمكنك العثور على إرشادات مفصلة حول GitHub حول كيفية القيام بذلك بشكل صحيح.

5. JSHint

   يدمج ملحق JSHint في Visual Studio Code رمز JSHint JavaScript الشهير مباشرة في محرر الأكواد ، حتى تتمكن من ذلك كن على علم بأخطائك بمجرد ارتكابها. بشكل افتراضي ، يستخدم ملحق JSHint الخيارات الافتراضية للوحة التي يمكنك تخصيصها بمساعدة ملف التكوين.

   

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

   

6. قصاصات jQuery Code

   يمكن لقصاصات jQuery Code تسريع عملية التطوير الأمامية بشكل كبير في Visual Studio Code ، حيث تتيح لك كتابة jQuery بسرعة دون أخطاء في بناء الجملة الأساسية. قصاصات jQuery Code لديه حاليا حولها 130 قصاصات المتاحة يمكنك استدعاء عن طريق كتابة الزناد الصحيح.

   

   جميع قصاصات مسج ولكن واحدة تبدأ مع JQ اختصار. الاستثناء الوحيد هو ظائفها تحريك ذلك إدراج وظيفة مجهولة المصدر في المحرر.

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

   

7. كوخ ريفي

   يمكن أن يجعل امتداد Bower VS Code سير عمل تطوير الويب أكثر سهولة من خلال دمج مدير حزم Bower في Visual Studio Code.

   إذا وضعت هذا التمديد في استخدام لك ليس من الضروري التبديل بين المحطة والمحرر, ولكن يمكنك بسهولة تنفيذ مهام إدارة الحزمة الخاصة بك مباشرة داخل Visual Studio Code.

   

   يقودك ملحق Bower إلى إنشاء مشروعك bower.json file ، ويمكنك أيضًا تثبيت وإلغاء التثبيت والبحث عن حزم التحديث وإدارة ذاكرة التخزين المؤقت وتنفيذ العديد من المهام الأخرى باستخدامها (انظر قائمة الميزات الكاملة).

   يمكنك الوصول إلى الأوامر المتعلقة بـ Bower من خلال بدء تشغيل لوحة الأوامر عن طريق الضغط F1, الكتابة “كوخ ريفي” في شريط الإدخال ، والنقر على “كوخ ريفي” الخيار في القائمة المنسدلة التي تظهر ، واختيار أمر Bower المناسب.

   

8. بوابة التاريخ

   بوابة التاريخ يجعل من الممكن ل اتبع التغييرات لمشروع Git داخل Visual Studio Code. هذا التمديد مفيد بشكل خاص عندما تريد المساهمة في مشروع Github أكبر ، و بحاجة إلى وسيلة للتحقق بسرعة من التعديلات التي أجراها المطورين الآخرين.

   مع ملحق Git History مثبت يمكنك عرض التاريخ ملف بأكمله ، أو خط معين بداخله. بامكانك ايضا مقارنة الإصدارات السابقة من نفس الملف.

   

   يمكنك الوصول إلى الأوامر المتعلقة بـ Git History إذا قمت بكتابة الكلمة “بوابة” في لوحة القيادة (F1)، أختر “بوابة” داخل القائمة المنسدلة ، وأخيرا حدد الأمر الذي تحتاجه. لاحظ أن تحتاج إلى فتح الملف الذي تريد أن ترى السجل قبل أن تتمكن من تنفيذ أي إجراءات عليه.