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