ما هي أفضل إضافات Vs Code؟

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

توجد العديد منها مثلا نذكر:

• HTML CSS Support: لتحسين تجربة كتابة HTML وCSS عبر اقتراحات وAutocomplete.
• CSS Peek: لرؤية تعريفات CSS مباشرة من HTML.
• Live Server: لتشغيل خادم محلي وعرض تغييرات HTML/CSS/JS مباشرة.
• JavaScript (ES6) code snippets: لتحسين إنتاجية كتابة كود JavaScript.
• ESLint: لضمان التزام كود JavaScript بمعايير الكتابة من خلال الفحص التلقائي.
• PHP Intelephense: لتوفير تكامل كامل مع PHP بما في ذلك التلميحات، والأخطاء، والتحذيرات.
• PHP Server: لتشغيل خادم PHP محلي لمعاينة صفحات PHP.
• PHP Debug: لتصحيح أخطاء PHP باستخدام Xdebug.
• Prettier - Code formatter: لتنسيق الكود بشكل تلقائي.
• Bracket Pair Colorizer: لتمييز الأقواس المتطابقة بألوان مختلفة.
• Path Intellisense: لاقتراح المسارات أثناء كتابة الكود.

كما يمكنك تثبيتها من خلال الذهاب إلى أيقونة Extensions على الجانب الأيسر من VS Code (أو بالضغط على Ctrl + Shift + X) ثم البحث عن الإضافة التي تحتاجها في شريط البحث وبعدها الضغط على Install لتثبيتها.

يمكنك استخدام امتداد Live Server لتشغيل الخادم المحلي ومعاينة HTML وCSS وJavaScript. لكن إذا كان لديك PHP، فاستخدم PHP Server أو XAMPP لتشغيل خادم PHP من خلال وضع مشروعك في مجلد htdocs لتتمكن من تشغيله عبر localhost.

يوجد العديد منها و إستخدامها يبقى تفضيل شخصي و لكن أشهرها و التي أستخدمها شخصيا هي الآتي:

• HTML CSS Support: لتحسين تجربة كتابة HTML وCSS.
• PHP Intelephense: لتحسين تجربة تطوير PHP من خلال توفير التكملة التلقائية والتحقق من الأخطاء.
• Prettier - Code formatter: لتنسيق الكود تلقائيا.
• Live Server: لتشغيل خادم محلي وعرض التغييرات في المتصفح فور حفظ الملف.
• Bracket Pair Colorizer: لتلوين الأقواس المتطابقة في الكود، مما يسهل قراءة الكود.
• JavaScript (ES6) code snippets: لتوفير مقتطفات سريعة من كود JavaScript.

إذا كنت تريد إضافات أخرى يمكنك تصفح ال Marketplace الخاص ب Vs Code أو من خلال علامة Extensions على اليسار و كتابة إسم أي إضافة لتستطيع تثبيتها.

في VS Code هناك العديد من الإضافات (الامتدادات) التي يمكن أن تساعدك في تطوير مشروع متكامل باستخدام HTML، CSS، JavaScript، وPHP. 

• HTML & CSS
  • HTML Snippets: لتسريع كتابة أكواد HTML.
  • HTML CSS Support: لتحسين تجربة كتابة HTML وCSS عبر اقتراحات وAutocomplete.
  • Prettier - Code formatter: لتنسيق الأكواد بشكل متناسق.
• JavaScript
  • JavaScript (ES6) code snippets: للحصول على اختصارات مفيدة للكتابة السريعة للأكواد.
  • ESLint: لمراقبة وتحليل جودة الكود واكتشاف الأخطاء.
• PHP
  • PHP Intelephense: للحصول على تكملة تلقائية للأكواد وتحليل PHP.

ويمكنك البحث في مركز الإضافات في vs code و يمكنك تحميل الإضافات التي تريدها ويمكنك النظر إلي عدد مستخدمين الإضافة إذا كنت تشك فيها أو تظن أنها لن تفيدك.

أنت لست بحاجة إلى أية إضافات بخصوص HTML , CSS,  JS إلا الإضافات التي تزيد الإنتاجية مثل قراءة الكلاسات وعمل autocomplete لها أثناء الكتابة،  أو تنسيق الكود عند حفظه وخلافه، فمحرر VSCODE يدعم تلك اللغات بشكل إفتراضي

الإضافات التي ستحتاجها هي التالي:

• Auto Rename Tag تقوم بإعادة تسمية عنصر النهاية والبداية عند تعديلك لاسم أحدهما.
• Autoprefixer تقوم بإضافة الـ prefixes لكود CSS تلقائيًا فور تشغيلها أي عليك تشغيلها عند نشر المشروع على استضافة.
• Color Highlight تقوم بعرض ألوان الأكواد في المحرر بدلاً من الوقوف على اللون
• CSS-in-JS تكملة تلقائية لأكواد css في ملفات جافاسكريبت
• HTML to CSS autocompletion عرض اقتراحات لأسماء كلاسات HTML عند كتابتها في ملف css
• Prettier لتنسيق الكود
• Live server أو Live Preview

بالنسبة لـ PHP، ستحتاج:

• PHP Intelephense
• PHP Namespace Resolver

إضافات عامة:

• Error Lens لعرض الأخطاء والتنبيهات بجانب أسطر الكود والتي قد لا تنتبه إليها
• Code Spell Checker للإشارة للأخطاء الإملائية في الكود