أهم إضافات Visual Studio Code

|

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

كباقي برامج بيئة التطوير المتكاملة IDE، يتوفر VSCode كذلك على متجر الإضافات Plugins خاصة به، يحتوي على آلاف الإضافات في مختلف التصنيفات، لمساعدتك في اختيار الإضافات المهمة والتي تستحق التجربة ستجد في هذه التدوينة 15 إضافة لـ VSCode ستساعدك في عملك.

Open-In-Browser



VSCode لا يتوفر على خاصية فتح الملفات مباشرة على المتصفح، فهذه الإضافة Open In Browser ستتيح لك فتح الملفات على المتصفح الافتراضي من المحرر، أو اختيار المتصفح بشكل يدوي عبر سطر الأوامر الخاص بالمحرر.

Quokka



إضافة Quokka تساعدك لعمل Debugging بشكل سهل ومباشر على الكود الذي تكتبه. فهي تُظهر لك نتيجة المتغيرات وخرج الدوال. فهذه الإضافة سهلت الإعدادت وتشتغل مع JSX و TypeScript.

Faker



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

CSS Peek



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

HTML Boilerplate



إضافة HTML Boilerplate ستختصر الوقت أثناء كتابة وسم head و body، فبعد تثبيت هذه الإضافة يكفيك كتابة html والضغط على زر Tab وسيتم توليد هيكلة لصفحة HTML كاملة.

Prettier



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

Color Info



إضافة صغيرة تمكنك من عرض المعلومات الخاصة بالألوان في CSS. يكفي فقط تمرر الفأرة على رمز الكود الخاص باللون لتظهر لك نافذة بها كافة المعلومات المتعلقة بهذا اللون.

SVG Viewer



ستتيح لك هذه الإضافة فتح صيغ الصور SVG بشكل مباشر بدون الاستعانة ببرنامج خارجي. مع إمكانية تحويلها إلى صيغة PNG وإنشاء رابط URI لها.

TODO Highlight



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

Icon Fonts



Icon Fonts إضافة صغيرة تتيح لك إمكانية تضمين خطوط الأيقونات عبر CDN. فهي تدعم أكثر من 20 نوع من الخطوط المعروفة ومن بينهم Font Awesome,، Ionicons، Glyphicons، وكذلك أيقونات الماتريال ديزاين.

Minify



إضافة مهمة ستحتاجها أثناء عملية الإنتاج، فهي تمكنك من إنتاج ملفات مصغرة minify لملفاتك، هذه الإضافة تدعم JavaScript، CSS، وكذلك HTML.

Change Case



يُخول لك VSCode تحويل النصوص من النصوص ذات الأحرف الصغيرة lowercase إلى الأحرف الكبيرة uppercase أو العكس. لكنه لا يتوفر على أي تحويل متقدم للنصوص، لكن إضافة Change Case سيمكنك عمل تغييرات أكثر على النصوص، كعمل camelCase، kebab-case، snake_case وغيرها من الأنماط الأخرى.

Regex Previewer



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

لغات البرمجة ومنصات العمل



يأتي VSCode مع دعم للعديد من لغات البرمجة، فإذا وجدت بأن المحرر لا يدعم لغتك بشكل افتراضي فيمكنك تحميل إضافة خاصة بهذه اللغة والتي ستجعل من السهل الاشتغال عليها داخل المحرر. فبعض منصات العمل كـ react native و vue يتوفرون على إضافات لدعمهم.

الثيمات Themes



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




إضافات البرمجة محرر ide VSCode

مواضيع ذات صلة