11 من أفضل إضافات Visual Studio Code يجب أن تجربها للفرونت اند

auto save in vsc

أول حاجة موجودة على الشمال قايمة Explorer ودي بيكون موجود فيها files و folders النت أنشأتها أو فتحتها ببرنامج VSC وتاني قايمة مهمة وهنتكلم عنها كتير في الدرس بتاعنا Extensions .

في كل الدروس الفاتت كنا كل شوية ندوس ctrl+s عشان نعمل save ففي في البرنامج option عشلن نخلي الحفظ automatically تلقائياً ودا تعمله ازاي؟ هتروح على file ومنها هتلاقي auto save اعمل عليها check الهي علامة الصح وبكدا هيكون البرنامج بيعمل save علطول وحده.

تعديل حجم خط برنامج visual studio code

من file نختار preferences ونختار settings الإعدادات هتلاقي مكتوب editor محرر font size حجم الخط فانت تقدر تغير حجم الخط النتَ عايزه وهيكون بالبيكسل ، أنا بفضل يكون حجم الخط 22 بيكسل. 

كما لو عاوز تغير نوع الخط هتلاقي موجود في نفس الإعدادات font family وتقدر تختار نوع الخط المفضل ليك.

تغير لون المظهر أو شكل البرنامج

من file نختار preferences ونختار color theme ومن خلال الصوره أدناة تقدر تبحث عن المظهر المفضل ليك وتفعله عادي ومن أهم المظاهر color theme هما 

1. One Dark Pro
2. Merko
3. Monokai Pro
4. Material
5. Synthwave ' 84
6. Shades Of Purple
7. Dracula
8. Palenight

ولو اخترت مظهر مش موجود اعمل سيرش عليه من خلال النافذه المنبعثه كما في الصورة أدناة وبكدا هتضيفه للبرنامج.

ا- Live server Extension

ودا يعتبر أهم extension في برنامج VSC وأهميته انك مش هتضطر تروح المتصفح وتعمل reload أو إعادة تحميل الصفحة أو refresh هو هيعمل كدا.

عشان تفتح صفحتك أو مشروعك باللايف سيرفر دوس كلك يمين بالماوس في أي مكان في البرنامج واختار open with live server.

عشان نعدل shorthand الإختصار يعني النستعمله في البرنامج عشان نفتح صفحتنا باللايف سيرفر من خلاله لو روحت على file نختار preferences ونختار Keyboard shortcuts ونكتب live server هنلاقي ان shorthand كبير وعبارة عن alt + l alt + o مع بعض فاحنا هنقصر shorthand دا إلى اي جاجة احنا عاوزينها يعني مثلاً أنا اختصرته إلى ctrl + l ودوس انتر هتلاقي ان shorthand اتسيف خلاص وتعرف تستخدمه.

2 - Material Icon Theme Extension 

عشان نغير شكل icons من files و folders ولما تعمله install أو تثبيت دوس على set file icon theme بعدها بقا هتلاحظ إن icon شكلها اتغير.

3 - Auto Rename Tag Extension

تغير tag أو element أو العنصر من خلال لو مثلاً عملنا div وعاوزين نغيره p فانت لما تغير opening tag هتلاقي إن closing tag اتغيرت بردوا تلقائياً وعشان نفعله لكل اللغات سواء لغات HTML و CSS أو لغات برمجة زي JAVASCRIPT بعد ما تثبته دوس على النجمه ctrl + 8 

4 - HTML to CSS autocompletion Extension

لو احنا عايزين لما نروح في ملف css وأنا في HTML عملت div بيحتوي على class قيمته مثلاً vs فلما أروح على ملف css بما إن عامل class واكتب بس . يظهرلي class ده وهيفدني extension ده لو أنا عندي classes أو ids كتير .

5 - CSS Peek Extension

لو احنا وقفنا على كلاس معين أو id عملناهم في HTML لأي tag وعايزين نشوف خصائص css للعنصر ده وانت هتقف على class في HTML وكلك يمين بالماوس واختار peek ومنها اختار peek definition، أو لو ضغطنا على كلاس معين أو id في HTML بردوا نروح على خصائصه في ملف css من خلال إن احنا هنقف على class أو id وندوس ctrl مع الضغط كلك يمين بالماوس .

6 - Error Lens Extension

وده مش هيفيدك في HTML هيفيدك في CSS ولغات البرمجة كلها زي JS ، مثلاً في css لو انت عملت {} من غير ما تعمل قبلهم selector ما أو class أو id ما فهيظهرلك error ولو انت عملت أول جزء تمام هيقلك في error عشان مفيش property استخدمتها داخل اقواس {} فانت ضيفت الخاصية المعينه هيظهر ايرور تالت يقلك فين قيمة الخاصية دي ، وبالنسبه لل js شوفي المثال في الفيديو.

7 - Better Comments Extension

ودا فايدته إنه لما تعمل commwnt على أكتر من سطر /**/ بين النجوم دي كدا أو داخلها لو عملت * فانتَ هتعمل comment بلون أخضر ولو عملت ! هتعمل comment باللون الأحمر ولو عملت ؟ هتعمل comment بلون أزرق ولو كتبت كلمة todo هتعمل comment بلون برتقالي ولو عايز تعمل comment مشطوب اعمل اتنين سلاش // .

8 - Prettier - Code Formatter Extension

ودا بنستخدمه لو احنا عملنا مسافات في سطر الكود الواحد أو عملنا مسافات في طول أسطر الكود بردوا فعشان ننسق ترتيب الكود هنستخدمه كل العليك تعمله دوس كلك يمين واختار format document with واختار prettier formatter.

9 - Auto close rag Extension 

احنا لما بنعمل تاج HTML بنعمل opening tag عادي و extension ده هنقدر من خلاله نعمل closing tag بسهولة.

10 - Colorize Extension

في css لما بنعمل خاصية color واللون أو RGB أو RGBA أو HEX كل دول وقيمة اللون اللي احنا عاوزين نستخدمه فعاوزين بقا نعمل hightlight للون ده وبيكون باستخدام colorize 

11 - Polacode Extension

لو انت عملت تحديد لمجموعة خصائص css أو لمجموعة أكواد js أو مجموعة عناصر HTML وعاوز تشوفهم كدا في جنب داخل border وكمان تحفظهم كصوره ودي حاجة كويسة جداً لواحد بيقدم محتوى تعليمي أو واحد عاوز يشير كود معين يعملهم بالشكل ده عن طريقه.

عشان نشغله ندوس fn + f1 ونختاره من السيرش فوق في برنامج Visual Studio Code وبعد ما شغلناه هنعمل تحديد للكود اللي عايزينه ونعمله كوبي ctrl + c ونروح على polacode ونعمل paste أو لصق ctrl + v

لمشاهدة الفيديو من خلال اليوتيوب دوس على تشغيل الفيديو 

شاهد ايضاً :

الجزء الأول من Http_Cycle لكورسPHP_2022

الجزء الثاني من Http_Cycle لكورسPHP_2022

تعديل المقال