أطلقت مايكروسوفت مؤخرا نسخة من محررها المميز Visual Studio Code  لبرمجة الويب  وهي نسخة خفيفة ومتاحة على جميع البيئات ( ويندوز – لينكس – ماك )  , اضافة الى متجر خاص بالاضافات المميزة والتي تخدم المطور وتساعد على تسريع عملية التطوير لمشروعه .

بعد استخدامي له بفترة وتحميل الاضافات  والتي افادتني كثيرا وحبيت اشارككم بها .

لنبدأ  برابط الموقع لتحميل المحرر باختلاف نظامك   Visual Studio Code

بعد تحميل المحرر نبدأ الان بتنزيل الاضافات   عن طريق زيارة متجر الاضافات  او مباشرة عن طريق المحرر بالضغط على اختصار  CTRL + SHIFT + X أو الايقونة

side bar tools

1 – Material Theme Kit

material theme image

فلنبدأ اولا بتجميل وتحسين المظهر الجمالي للمحرر وبالطبع مظهر ماتيريال ديزاين لا يعلى عليه , نستطيع اضافته للمحرر عن طريق الاضافة المخصصة له واختياره كمظهر اساسي للمحرر .

2 – Material Icon Theme

show material icons

فبعد اختيار المظهر للمحرر مظهر ماتيريال ديزاين , تبقت خطوة واحدة لاكمال مظهر المحرر بشكل متكامل بمظهر ماتيريال ديزاين . الا وهي اختيار اشكال الايقونات . هذه الاضافة تتستبدل ايقونات الملفات كايقونات مظهر ماتيريال ديزاين . وبهذا اكتمل المظهر الجمالي للمحرر ,

3 – (Git History (git log

how to use git history in visual studio code by example

بالطبع لكل مطور يعمل على مشروع لا غنى عنه لاستخدام Git  لادارة المشروع هذي الاضافة الرائعة تفيدك جدا عند استخدامها بحيث تمكنك من استعراض جميع التغييرات والسجلات السابقة للمشروع والتي تم تخزينها في Git .وتستطيع التعامل ايضا مع Git بشكل كامل عن طريق المحرر نفسه .

4 – Emmet

how to use emmet in visual studio code by example

لكل مطور للغات الويب وخاصة المصممين Front-End بالتأكيد لا غنى لهم عن Emmet . تساعدك بتسريع كتابة التاقات وعناصر الصفحات وبالتالي تختصر عليك عناء الكثير من الكتابة العادية لكل تاق . مع بعض الاختصارات تستطيع الانتهاء من عناصر الصفحة بكل سهولة واقل وقت . وأضع لكم رابط لاكثر الاوامر شيوعا لتفيدك في استخدامها CHEAT SHEET EMMET .

بعد ان تضيف الاضافة الخاصة بها  الى المحرر بكل يسر وسهولة.

5 – MINIFY

عند كتابة الكثير من الاكواد وبالتالي يزداد حجم الملفات وبذلك تؤثر على الاداء وبطئ تحميل الصفحة , Minify تقوم بتقليل وضغظ الملفات وبالتالي تساعد عل ى سرعة تحميل الصفحات , الاضافة تسمح لنوع الملفات html , css ,js . تستطيع تجميع جميع الملفات التي بداخل المجلد في ملف واحد مثلا عندنا اكثر من ملف جافاسكربت js  , نستطيع دمجها جميعا مع ضغطها داخل ملف واحد example.min.js .

استخدامها عن طريق فتح الملف  وضغط F1 وبعدها كتابة minify للعمل على الملف المفتوح

او minify directory للعمل على كافة ملفات المجلد وعمل ملف واحد يجمعها

6 – beautify

beautify plugin example using

ولها من اسمها نصيب , من بعد اضافتها للمحرر تستطيع ترتيب اكوادك بشكل رهيب ولكامل الملف الذي تعمل عليه .

عن طريق ALT + SHIFT + F او كلك يمين ع الماوس واختيارها من الخيارات او الضغط على F1 وكتابة اسم الاضافة Beautify .

7 – Snippets

دائما بعض الاضافات لا غني عنها خاصة اذا كانت تساعدنا على استذكار الاوامر البرمجية . هنا قائمة ببعضها وغيرها الكثير في المتجر

HTML Snippets

jQuery Code Snippets

Bootstrap 3 Snippets

Java Snippets

8 – Intellisense

في كل لغة برمجة يحتاج المطور بعض الاضافات المساعدة الخاصة بلغته سواء الاكمال التلقائي او اعادة التسميات للمتغيرات وغيرها الكثير . هنا قائمة ببعض الاضافات للغات المختلفة .

PHP IntelliSense

C++ Intellisense

9-  View In Browser

مع عمل التغييرات على الكود بالتأكيد تحتاج اختبارها على المتصفح ,

فبدلا من فتح المتصفح وتتبع مسار الملف هذه الاضافة تمكنك من مشاهدة صفحتك عن طريق تشغيلها من المتصفح مباشرة من خلال الضغط على  CTRL + F1 .

وفي الختام يوجد الكثير من الادوات البرمجية والاضافات وجميعها تستطيع الاستفادة منها واستخدامها للوصول الى هدفك وتحقيق مبتغاك .