Auto Import
إضافة VS Code لإضافة الاستيرادات تلقائياً (Auto Import Extension)
Auto Import هي إضافة لـ VS Code تبحث تلقائياً عن الرموز (functions, components, types) الموجودة في المشروع وتضيف import statements تلقائياً. توفر اختصارات سريعة لإضافة الاستيراد.
Bracket Pair Colorizer
إضافة VS Code لتلوين الأقواس
Bracket Pair Colorizer يلون الأقواس المتطابقة بألوان مختلفة في VS Code. يسهل رؤية matching brackets في الكود المعقد. مدمج الآن في VS Code الأصلي.
Color Picker
إضافة VS Code لاختيار الألوان
Color Picker في VS Code يقدم منتقي ألوان عند الكتابة في CSS. يسمح باختيار الألوان بصرياً وتحويلها بين الصيغ المختلفة (hex, rgb, hsl).
CSS Modules
إضافة VS Code لدعم CSS Modules
CSS Modules في VS Code تضيف autocomplete و navigation لـ CSS Modules class names. تساعد على العمل مع CSS modules بسهولة أكبر.
Error Lens
إضافة VS Code لعرض الأخطاء في السطر (Inline Diagnostics)
Error Lens هي إضافة لـ VS Code تعرض رسائل الخطأ والتحذير مباشرة بجانب الكود في نفس السطر. بدلاً من الاعتماد على squiggly lines فقط، تظهر الرسالة كاملة بجانب السطر المصاب.
ESLint
إضافة VS Code للتحقق من جودة الكود
ESLint في VS Code يدمج أداة linting في المحرر. يكتشف الأخطاء والمشاكل في الكود تلقائياً ويعرضها كتحذيرات وأخطاء في الوقت الفعلي مع إمكانية الإصلاح التلقائي.
ESLint Extension
إضافة VS Code للتحقق من جودة الكود (Code Linting)
إضافة ESLint لـ VS Code هي الأداة الرسمية لدمج ESLint داخل المحرر. تعرض التحذيرات والأخطاء في الوقت الحقيقي أثناء الكتابة، وتوفر إصلاحات تلقائية.
GitLens
إضافة VS Code لاستكشاف Git (Git Visualization)
GitLens هي إضافة قوية لـ VS Code تضيف قدرات متقدمة لـ Git، تشمل عرض من كتب كل سطر في الكود، سجل الملف، المقارنة بين الفروع، وأكثر.
Import Cost
إضافة VS Code لمراقبة حجم الحزم (Package Size Monitor)
Import Cost هي إضافة لـ VS Code تعرض حجم كل حزمة مستوردة في الكود. تساعد المطورين على اتخاذ قرارات مستنيرة حول dependencies وتحديد الحزم الكبيرة.
Live Server
إضافة VS Code لخادم تطوير محلي (Local Development Server)
Live Server هي إضافة شهيرة لـ VS Code توفر خادم تطوير محلي مع_reload تلقائي عند تعديل ملفات HTML, CSS, JS. مثالية لتطوير المواقع الثابتة والـ static pages.
Path Intellisense
إضافة VS Code لاقتراح المسارات
Path Intellisense يضيف autocomplete للمسارات في VS Code. يقترح الملفات والمجلدات عند كتابة import statements أو src attributes.
Prettier
إضافة VS Code لتنسيق الكود تلقائياً
Prettier في VS Code ينسق الكود تلقائياً وفق معايير ثابتة. يدعم JavaScript, TypeScript, CSS, HTML, JSON, وأكثر. يحافظ على اتساق الكود في الفريق.
Prettier Extension
إضافة VS Code لتنسيق الكود تلقائياً (Code Formatter)
إضافة Prettier الرسمية لـ VS Code تدمج منسق الكود Prettier داخل المحرر. تنسق الكود تلقائياً عند الحفظ أو يدوياً بضغطة زر، تدعم JavaScript, TypeScript, CSS, HTML, JSON, وغيرها.
Pretty TypeScript Errors
إضافة VS Code لعرض أخطاء TypeScript بشكل أجمل
Pretty TypeScript Errors يحسن عرض أخطاء TypeScript في VS Code. يقدم الرسائل المعقدة بشكل أكثر وضوحاً وقابلية للقراءة مع ألوان وتنسيق أفضل.
Tailwind CSS Intellisense
إضافة VS Code لـ Tailwind CSS (CSS Framework Extension)
إضافة Tailwind CSS IntelliSense هي الأداة الرسمية من Tailwind Labs لـ VS Code. توفر autocomplete للـ CSS classes، معاينة الألوان، linting، ودعم جميع أطر العمل.
Thunder Client VS Code
إضافة VS Code لاختبار APIs
Thunder Client هو بديل خفيف لـ Postman في VS Code. يتيح إرسال طلبات HTTP، فحص responses، وحفظ الـ collections. مثالي للمطورين الذين يريدون أداة API بدون مغادرة VS Code.
TypeScript Error Translator
إضافة VS Code لترجمة أخطاء TypeScript للإنجليزية البسيطة
TypeScript Error Translator يترجم رسائل أخطاء TypeScript المعقدة إلى لغة بسيطة مفهومة. يساعد المبتدئين على فهم ما يحدث بسرعة.