أفضل ملحقات Visual Studio Code

0 الأسهم
0
0
0
0

مقدمة

بشكل عام، تُعدّ الإضافات أدوات مفيدة للمطورين الراغبين في توسيع إمكانيات لغة البرمجة أو التطبيق بما يتجاوز الميزات الجاهزة. فهي تساعدك على إضافة ميزات جديدة، وتخصيص أداء اللغة أو التطبيق، وتبسيط سير عمل التطوير.

مزامنة الإعدادات

https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2019/02/Settings-Sync.gif

قبل البدء بتثبيت الإضافات، من المهم معرفة ميزة "مزامنة الإعدادات". تتيح لك هذه الميزة مزامنة كل ما تُخصصه تقريبًا في VSCode، بدءًا من الإعدادات واختصارات لوحة المفاتيح وصولًا إلى ملحقات VSCode الأخرى، مع GitHub. بهذه الطريقة، بدلًا من الاضطرار إلى البرمجة من بيئة VSCode الأساسية على أجهزة جديدة أو إعادة ضبط كل شيء يدويًا، ستتمكن من الوصول إلى بيئة التطوير المتكاملة (IDE) التي تختارها من أي جهاز تريده.

الخادم المباشر

https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2020/03/Live-Server-VSCode-Extension.gif

يُعدّ هذا المكون الإضافي VSCode مفضلاً لدى العديد من مطوري البرامج. يُنشئ Live Server خادم تطوير محليًا مع إعادة تحميل مباشرة للصفحات الثابتة والديناميكية. في كل مرة تحفظ فيها الكود، ستظهر التغييرات في المتصفح فورًا. ستكتشف الأخطاء بشكل أسرع، وسيصبح إجراء تجارب سريعة على الكود أسهل بكثير.

عن بعد – SSH

https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2020/03/Remote---SSH-VSCode-Extension.gif

يتيح لك ملحق SSH البعيد استخدام أي جهاز بعيد مزود بخادم SSH كبيئة تطوير. هذا يُسهّل عملية التطوير و/أو استكشاف الأخطاء وإصلاحها في مختلف السيناريوهات. كما أنك لا تحتاج إلى أي شيفرة مصدرية على جهازك المحلي، حيث يُشغّل الملحق الأوامر والملحقات الأخرى مباشرةً على الجهاز البعيد.

أجمل


Prettier مُنسِّق أكواد برمجية، وهو فعالٌ جدًا إذا كان هناك عدة أشخاص يعملون على مشروع واحد، إذ يُطبِّق الملحق نمطًا مُتَّسقًا. يُمكنك ضبطه لتنسيق أكوادك البرمجية في كل مرة تحفظها، مما يُقلِّل وقت تنسيقها بشكل كبير.

مساعد جيثب

https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2023/02/Github-Copilot.gifيصف البعض GitHub Copilot بأنه ثورة في عالم برمجة الحاسوب، بينما يصفه آخرون بأنه أداة مفيدة. مهما كان رأيك فيه، فإن دمج الذكاء الاصطناعي للإكمال التلقائي في سير عملك أمرٌ يستحق العناء. بفضل تدريبه على GPT-3، يوفر GitHub Copilot اقتراحات برمجية، ويكملها تلقائيًا، ويمكنه حتى مساعدتك في كتابة الكود عند إضافة تعليقات بلغة طبيعية.

علامة إعادة التسمية التلقائية

https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2020/03/Auto-Rename-Tag-VSCode-Extension.gifبينما يُبرز VSCode تلقائيًا العلامات المتطابقة ويضيف علامات الإغلاق فورًا عند كتابة علامة افتتاحية، يُعيد Auto Tag Rename تسمية العلامات تلقائيًا عند تغييرها. تعمل هذه الإضافة مع HTML وXML وPHP وJavaScript، مما يُغني عن إعادة تسمية العلامات مرتين.

جيتلينس

https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2020/03/GitLens-VSCode-Extension.gifيُوسّع GitLens إمكانيات Git في Visual Studio Code. إنه إضافة فعّالة تُتيح لك معرفة من، ولماذا، وكيف تغيّرت أسطر التعليمات البرمجية مع مرور الوقت (من بين العديد من الميزات الأخرى). GitLens إضافة قابلة للتخصيص بدرجة عالية. إذا لم يُعجبك إعداد مُعيّن، يُمكنك تعطيله بسهولة من الإعدادات.

تاريخ جيت

https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2020/03/Git-History-VSCode-Extension.gifعلى غرار GitLens، يُعدّ Git History امتدادًا لـ VSCode يُوفّر تمثيلًا مرئيًا لسجلّ Git. لن تحتاج بعد الآن إلى البحث في سجلّ Git في الطرفية. الامتداد شاملٌ للغاية، إذ يسمح لك بمقارنة الفروع والتحويلات والملفات عبر التحويلات. كما يُمكنك البحث عن صور GitHub الرمزية، وهو أمرٌ رائع.

نظرة سريعة على CSS

https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2019/02/CSS-Peek.gifهذه الإضافة قيّمة لمطوري الواجهة الأمامية. مستوحاة من ميزة مشابهة في IDE Brackets، تتيح لك CSS Peek توسيع ملفات HTML وjs لعرض شيفرة CSS/SCSS/LESS في الشيفرة المصدرية. كما تتيح لك الوصول بسرعة إلى شيفرة CSS المناسبة إذا كنت تعرف اسم الفئة أو مُعرّفها.

مقتطفات من كود JavaScript

بينما يتضمن VScode تقنية JS IntelliSense مدمجة، تُحسّن JS Code Snippets تجربة الاستخدام بإضافة مُشغّل استيراد/تصدير، ومساعدات فئات، ومُشغّلات دوال. يدعم الامتداد JS وTypeScript وJS React وTS React وHTML وVUE. تتوفر مُشغّلات برمجية لأنواع أخرى، مثل Angular، بسهولة في سوق VScode.

[المجموع: 5   متوسط: 5/5]
اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

قد يعجبك أيضاً

ما هو Three.js؟

مقدمة يقوم Three.js بالعديد من الأشياء وقد يكون من الصعب بعض الشيء كيفية العمل معه...