أفضل إضافات VS Code لكتابة كود أنضف وأسهل
ازيكم يا أصحابي عاملين إيه؟ معاكم م/ صموئيل غالي، وفي موضوع النهاردة هنتكلم عن أهم 10 إضافات لازم تثبتها على برنامج Visual Studio Code علشان تشتغل بكفاءة واحتراف، وتكتب كود نظيف وسريع من كورس "تعلم HTML من الصفر".
مقدمة
برنامج VS Code من أقوى محررات الأكواد، لكن اللي بيخليه مميز بجد هو إنك تقدر تزوده بإضافات (Extensions) تخلّي تجربتك أسرع وأنضف وأسهل بكتير.
1 - Live Server
بتسمحلك إنك تشغّل أي ملف HTML على المتصفح مباشرة، وأول ما تعدّل وتحفظ الكود، الصفحة تتحدّث تلقائي.
2 - Prettier
الإضافة دي مسؤولة عن تنسيق الكود وتنضيفه تلقائي. بترتب المسافات، الأقواس، وهيكل الكود.
Format On Save من الإعدادات علشان تشتغل تلقائي كل
مرة.
3 - Auto Rename Tag
بتريحك في تعديل وسوم HTML، أول ما تغير بداية الوسم، التاني بيتغير تلقائي.
4 - Auto Close Tag
أول ما تفتح أي وسم، الإضافة بتكمله تلقائي. مثلًا: تكتب
<div>، هي تكمل الوسم مباشرة.
5 - Bookmarks
لو عندك أكواد طويلة، تقدر تضيف Bookmark على أي سطر وترجعله بسهولة.
6 - Code Spell Checker
بتصححلك الأخطاء الإملائية في الكود، خصوصًا في الكومنتات أو النصوص داخل HTML وCSS.
7 - Error Lens
أي خطأ في الكود بيظهر مباشرة بلون واضح عند السطر نفسه، مش بس في الشريط اللي تحت.
8 - Image Preview
لو بتستخدم صور في الكود، أول ما تمرر على الرابط بيعرضلك معاينة للصورة داخل المحرر.
9 - Symbols
بتعرضلك قائمة منظمة فيها كل عناصر الكود زي الوسوم أو الفانكشنز، وتتنقل بينها بسهولة.
10 - Poimandres Theme
Theme أنيق ومريح للعين، بيخلي شكل VS Code جذاب وألوانه مريحة جدًا أثناء الكتابة.
إزاي تثبت الإضافات؟
- افتح برنامج VS Code
- اضغط على أيقونة الإضافات من الشريط الجانبي
- في خانة البحث، اكتب اسم الإضافة
- دوس Install
الخاتمة
دي كانت أفضل 10 إضافات لـ VS Code هتغير طريقة شغلك تمامًا. إضافات بسيطة لكنها هتخلي كتابة الكود أسرع وأنضف وأسهل.
لو عجبك الموضوع، متنساش تسيب تعليق، وتتابع باقي دروس الكورس. ولو عندك اقتراح لإضافة تانية، اكتبه في الكومنتات. سلام يا أبطال 👋