مرحباً بكم متابعي موقع عزيز للتقنية في مقال جديد حول برنامج Visual Studio Code والذي نستعرض فيه لكم أهم 21 إضافة لمطوّري الويب ، في الحقيقة إذا كنت تستخدم هذا البرنامج فلا يمكنك الاستغناء عن هذه الإضافات لأنها ستوّفر عليك الكثير من المجهود إضافة إلى الوقت.
إضافة Debugger for chrome :
صدق أو لا تصدق ، تصحيح أخطاء JavaScript يعني أكثر من مجرد كتابة جمل console.log (على الرغم من أن هناك كثير منها). يحتوي Chrome على ميزات مضمنة تجعل تصحيح الأخطاء تجربة أفضل بكثير. يمنحك هذا الامتداد جميع (أو بالقرب من الكل) ميزات تصحيح الأخطاء الموجودة داخل VS Code مباشرةً!
إضافة JavaScript Snippts ES6 :
أنا أحب إضافات المقتطف. أنا من أشد المؤيدين بأنه ليست هناك حاجة لإعادة كتابة نفس الجزء من الكود مرارًا وتكرارًا. توفر لك هذه الامتدادات مقتطفات للجمل الشائعة من كود JavaScript الحديث (ES6).
إضافة ESLint :
هل تريد كتابة كود أفضل؟ هل تريد تنسيقًا متسقًا للكود ؟ قم بتثبيت ESLint. يمكن تكوين هذا الامتداد لتنسيق شفرتك تلقائيًا وكذلك "yell" مع فحص الأخطاء / التحذيرات. تم تكوين VS Code على وجه التحديد بشكل مثالي لتظهر لك هذه الأخطاء / التحذيرات.
إضافة Live Server :
قم بإجراء تغييرات في محرر التعليمات البرمجية ، والتبديل إلى المتصفح ، والتحديث لرؤية التغييرات. هذه هي الدورة اللانهائية للمطور ، ولكن ماذا لو كان متصفحك سيتم تحديثه تلقائيًا في أي وقت تقوم فيه بإجراء تغييرات؟ هذا هو المكان الذي يأتي فيه Live Server!
يقوم أيضًا بتشغيل تطبيقك على خادم مضيف محلي. هناك بعض الأشياء التي لا يمكنك اختبارها إلا عند تشغيل تطبيقك من خادم ، لذا فهذا جيد.
إضافة Bracket Pair Colorizor:
الأقواس هي متعبة للمطوّر. مع وجود الكثير من التعليمات البرمجية المتداخلة ، يكاد يكون من المستحيل تحديد الأقواس التي تتوافق مع بعضها البعض. تتطابق ألوان Bracket Pair Colorizer (كما قد تتوقع) بين الأقواس لجعل شفرتك أكثر قابلية للقراءة. صدقني ، تريد هذا!
إضافة Auto Rename Tag :
هل تحتاج إلى إعادة تسمية عنصر في HTML؟ حسنًا ، باستخدام علامة إعادة التسمية التلقائية ، تحتاج فقط إلى إعادة تسمية علامة الفتح أو الإغلاق ، وستتم إعادة تسمية العلامة الأخرى تلقائيًا. بسيط ولكن فعال!
إضافة Quokka :
هل تحتاج إلى مكان سريع لاختبار بعض أكواد جافا سكريبت؟ اعتدت على فتح وحدة التحكم في Chrome وكتب بعض التعليمات البرمجية هناك ، ولكن كان هناك العديد من الجوانب السلبية. يمنحك Quokka لوحة رسم JavaScript (و TypeScript) في VS Code. هذا يعني أنه يمكنك اختبار جزء من التعليمات البرمجية هناك في المحرر المفضل لديك!
إضافة Path Intellisense :
في المشاريع الكبيرة ، قد يصبح تذكر أسماء ملفات معينة والأدلة التي تحتوي عليها ملفاتك أمرًا صعبًا. سيوفر لك هذا الامتداد تحسسًا لذلك. عندما تبدأ في كتابة المسار بين الاقتباسات ، ستحصل على معلومات دقيقة عن الدلائل وأسماء الملفات. سيوفر لك هذا قضاء الكثير من الوقت في مستكشف الملفات :)
إضافة Project Manager:
شيء واحد أكرهه هو التبديل بين المشاريع في VS Code. في كل مرة يتعين علي فتح مستكشف الملفات والعثور على المشروع على جهاز الكمبيوتر الخاص بي. لكن هذا يتغير مع مدير المشروع. باستخدام هذا الامتداد ، تحصل على قائمة إضافية في القائمة الجانبية لمشاريعك. يمكنك التبديل بسرعة بين المشاريع أو حفظ المفضلة أو الكشف التلقائي عن المشاريع Git projects من نظام الملفات الخاص بك.
إضافة Sublime Text Keymap :
أنا أحب ملحق Live Server (المذكور أعلاه) ، لكن امتداده يذهب خطوة أخرى إلى الأمام من حيث الراحة. يمنحك معاينة مباشرة لإعادة التحميل داخل VS Code مباشرة. لن تضطر بعد الآن إلى الانتقال إلى متصفحك لرؤية تغيير بسيط!
إضافة Git Lens :
هناك مجموعة من امتدادات git ، لكن أحدها هو الأقوى مع الكثير من الميزات. يمكنك الحصول على معلومات blume ، ومحفوظات الخط والملفات ، وإجراء البحث ، وغير ذلك الكثير. إذا كنت بحاجة إلى مساعدة في سير عمل Git ، فابدأ بهذا الامتداد!
إضافة Polacode :
هل تعرف لقطات الشاشة الرائعة التي تراها في المقالات والتغريدات؟ حسنًا ، على الأرجح جاءوا من Polacode. إنه سهل الاستخدام للغاية. انسخ جزءًا من التعليمات البرمجية إلى الحافظة الخاصة بك ، وافتح الامتداد ، والصق الرمز ، وانقر لحفظ صورتك!
إضافة Prettier :
لا تضيع الوقت في تنسيق التعليمات البرمجية الخاصة بك ... فقط لا. ليست هناك حاجة لذلك. لقد ذكرت ESLint الذي يوفر التنسيق والفحص. إذا لم تكن بحاجة إلى جزء الفحص ، فاذهب مع Prettier. إنه سهل الإعداد للغاية ويمكن تهيئته لتهيئة شفرتك تلقائيًا عند الحفظ.
إضافة Better Comments :
يرمز لون الامتداد هذا إلى أنواع مختلفة من التعليقات لمنحها أهمية مختلفة وتبرز عن بقية التعليمات البرمجية الخاصة بك. أنا أستخدم هذا طوال الوقت لأقوم بالتعليقات. من الصعب تجاهل تعليق برتقالي كبير يخبرني أن لدي بعض الأعمال التي لم تنته بعد.
إضافة Git Link :
إذا كنت ترغب في عرض ملف تعمل عليه في Github ، فإن هذا الامتداد يناسبك. بعد التثبيت ، ما عليك سوى النقر بزر الماوس الأيمن في ملفك وسترى خيار فتحه في Github. يعد هذا أمرًا رائعًا للتحقق من السجل وإصدارات الفروع وما إلى ذلك إذا كنت لا تستخدم امتداد Git Lens.
إضافة VS Code Icons :
هل تعلم أنه يمكنك تخصيص الرموز في VS Code؟ إذا بحثت في الإعدادات ، فسترى خيارًا لـ "سمة رمز الملف". من هناك يمكنك الاختيار من بين الرموز المثبتة مسبقًا أو تثبيت حزمة الرموز. يمنحك هذا الامتداد حزمة رمز جميلة جدًا يستخدمها أكثر من 11 مليون شخص!
إضافة Material Icon Theme :
هل أنت معجب بتصميم Google المادي؟ بعد ذلك ، تحقق من حزمة الأيقونات ذات السمات المادية. هناك المئات من الرموز المختلفة وهي رائعة المظهر!
إضافة Settings Sync :
يقضي المطورون ، بمن فيهم أنا ، الكثير من الوقت في تخصيص بيئة التطوير الخاصة بهم ، وخاصة محرر النصوص. باستخدام ملحق Settings Sync ، يمكنك حفظ الإعداد الخاص بك في Github. بعد ذلك ، يمكنك تحميلهم على أي إصدار جديد من VS Code بأمر واحد. لا تنشغل بدون الإعداد المذهل مرة أخرى!
إضافة Better Align :
إذا كنت من الأشخاص الذين يحبون التوافق التام في التعليمات البرمجية الخاصة بك ، فأنت بحاجة إلى الحصول على محاذاة أفضل. يمكنك محاذاة عدة إعلانات متغيرة ، وتعليقات لاحقة ، وأقسام من التعليمات البرمجية ، وما إلى ذلك. لا توجد طريقة أفضل للتعرف على مدى روعة هذا الامتداد من تثبيته وتجربته!
إضافة VIM :
هل أنت مستخدم محترف في VIM؟ بارك الله فيك إذا كنت كذلك ، ولكن يمكنك أخذ كل معرفة مستخدم VIM القوية واستخدامها مباشرة داخل VS Code. ليس المسار الذي أريد أن أسلكه شخصيًا ، لكنني أعرف كيف يمكن أن تكون الإنتاجية مجنونة عند استخدام VIM لإمكانياته ، وبالتالي المزيد من القوة لك.