تريند 🔥

🌙 رمضان 2024

للمطوّرين حصرًا.. إضافات Visual Studio Code عليك استخدامها منذ اليوم!

نوراليقين فرتوت
نوراليقين فرتوت

5 د

محرّر visual studio code والمعروف اختصارًا باسم VS Code هو محرّر أكواد أو محرّر نصوص برمجية مفتوح المصدر من تطوير شركة Microsoft ويعتبر واحدًا من أفضل برامج كتابة الأكواد وهو متوفّر للأنظمة الثلاثة ويمكن تشغيله على كل من Linux و Windows و Mac.

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

اقرأ أيضًأ: الكتب مقابل الإنترنت: من الرابح في النهاية كمصدر أساسي للمعلومات؟


vscode-icons

vscode-icons

واحدة من الأدوات التي تضيف لمسة رائعة إلى برنامج visual studio code، نعلم أن إضافة الأيقونات لا تحدث فرقًا كبيرًا، لكن (بالنسبة لي، على الأقل) فإنّ إضافة مجموعة من الألوان والأيقونات الصغيرة اللطيفة إلى واجهة المحرّر الذي أستخدمه تضفي بعض الراحة على بيئة العمل وتساعدني على التنقّل بين الملفات والمجلدات بشكل أسرع.


Icon Fonts

Icon Fonts

إذا كنت تستخدم الرموز والأيقونات في عملك البرمجي، فإنّ أداة Icon Fonts تقدّم مجموعة متنوّعة من الأيقونات، بما في ذلك حزمة أيقونات Font Awesome v5 الشهيرة، أي لن تحتاج إلى البحث في موقع Font Awesome لاستخراج الرمز الخاص بأيقونة معينة، وأيضًا بالنسبة لأولئك الذين لا يستخدمون VS Code، تتوفّر هذه الإضافة في كل من Atom و Sublime Text.


Bookmarks

Bookmarks

على الرغم من أنّ برنامج visual studio code يحتوي على أرقام السطور، فإن إضافة إشارات مرجعية أو Bookmark إلى التعليمات البرمجية يساعدك على التنقّل بسرعة وبسهولة من مكان إلى آخر أثناء كتابة الكود البرمجي إضافة إلى ذلك فإن الإضافة تسمح لك بتحديد مناطق أو سطور من الكود ترغب بالعودة إليها لاحقًا.


Remote – SSH

Remote - SSH

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

اقرأ أيضًا: مراجعة الإصدار التجريبي لأندرويد 12.. أندرويد كما لم تره من قبل!


Prettier

Prettier

Prettier هي أداة لتنسيق الكود البرمجي وتملك هذه الأداة أكثر من 38.5 ألف نجمة على GitHub، يمكن اعتبار Prettier أحد أكثر أدوات التنسيق شهرة، وهي فعلًا أداة رائعة تجعل الكود البرمجي مُنَسّقًا ومرتّبًا ممّا يساعد المطور على توفير الكثير من الوقت خصوصًا عند التعاون مع مطوّرين آخرين.


Settings Sync

Settings Sync

يمكن أن توفر لك أداة Settings Sync الكثير من الوقت اللازم لتثبيت الملحقات الأخرى، قبل أن تبدأ في تحميل الأدوات في المرة القادمة على جهازك الجديد، من الجيد التعرّف على أداة Settings Sync. تسمح لك هذه الأداة بمزامنة كل شيء تقوم بتخصيصه على VSCode بهذه الطريقة ستتمكّن من الوصول إلى المحرّر والمفضّل لديك على أي جهاز تريده، بدلًا من إعداد كل شيء يدويًا مرة أخرى.


CSS Peek

CSS Peek

مباشرةً من ملف HTML وأثناء تحريره يمكنك رؤية كود CSS الذي يؤثّر على ذاك الوسم وتعتبر هذه الأداة مفيدة جدًا بالنسبة لمطوّري الويب، ومن الجدير بالذكر أنّ الفكرة مستوحاة من ميّزة مماثلة في برنامج Brackets، وتتيح لك CSS Peek توسيع ملف HTML لإظهار كود CSS / SCSS / LESS داخل صفحة الكود نفسه، كما تتيح لك الانتقال بسرعة إلى جزء معيّن من CSS لتعديله بشكل سريع.

اقرأ أيضًا: إدمان كاندي كراش: العلم وراء جعلك تدمنها عبر استغلال نقاط ضعف معروفة في الدماغ البشري


JavaScript Code Snippets

JavaScript Code Snippets

بينما يشتمل VSCode على JS IntelliSense باعتبارها أداة مدمجة مع التطبيق، فإن JS Code Snippets تعزّز هذه التجربة عن طريق إضافة عدد كبير من الميّزات الرائعة والمفيدة، وقد قام بتثبيت هذه الإضافة أكثر من 5 ملايين مستخدم وتملك تصنيف 5 من 5 على متجر ملحقات VSCode، تدعم هذه الإضافة كلًا من JS و TypeScript و JS React و TS React و HTML و Vue.


ESLint

ESLint

كانت JSLint أول أداة Linter خاصّة بلغة جافا سكريبت ولكن أصبحت تلك الأداة قديمة ولم تدعم تطورات JavaScript بعد ES5 كما أنها تحتوي على العديد من العيوب والاخطاء، الآن ظهرت أداة ESLint وهي نسخة مطوّرة مع المزيد من الميّزات الرائعة، هذه الأداة ببساطة تقوم بتحليل الكود البرمجي باستعمال مجموعة من القواعد لتقديم اقتراحات تهدف إلى تحسين الكود.


Peacock

Peacock

هي أداة رائعة ولطيفة تتيح لك تغيير لون بيئة العمل على برنامج Visual Studio Code، بحيث يمكنك بسرعة تحديد واجهة العمل أو المشروع الذي قمت بالانتقال منه للتو، تعتبر الأداة مثالية عندما يكون لديك مشاريع متعددة على VS Code أو تستخدم VS Live Share وتريد الوصول إلى المحرّر الذي تعمل عليه بسرعة.


Auto Close Tag

Auto Close Tag

لا يدعم محرّر visual studio code افتراضيًا إغلاق الوسوم Tags بشكل تلقائي لذا في حال كنت تنسى إغلاق الوسوم الخاصّة بك يمكنك تحميل هذه الأداة وهي إضافة مفيدة جدًا تسمح لك بتكملة الكود البرمجي وغلق الوسوم مباشرة باللغة التي تستخدمها بشكل تلقائي.


SQL Server

SQL Server (mssql)

من الأدوات والإضافات المفيدة بالنسبة لجميع المبرمجين الذين يتعاملون مع قواعد البيانات SQL، تقوم الأداة بمساعدتك في تجربة الاستفسارات Queries والتحقّق من صحتها قبل إدراجها في البرنامج الذي تعمل عليه، ويمكن اعتبار هذه الأداة من أفضل الأدوات التي يحتاجها جميع المبرمجين الذين يعملون في تطوير المواقع التي تعتمد على قواعد البيانات حيث تسمح بإدارة قواعد البيانات وتحويل محرّر VS Code إلى سيرفر قواعد بيانات متكامل.


Open in Browser

Open in Browser
ذو صلة

وظيفة هذه الأداة واضحة من اسمها Open in Browser وتعني “فتح في المتصفح” تساعدك في فتح أي من ملفات الويب في المتصفح بنقرة واحدة، ليست أداة كبيرة أو معقدة لكنها مفيدة جدًا وتساعدك على معاينة عملك على الويب بسرعة.

كانت هذه إضافات هامّة في محرر الأكواد visual studio code والتي يمكن أن تكون مفيدة جدًا لكل مبرمج أو مطوّر ويب، هناك العديد من الأدوات الأخرى المفيدة والتي لا يمكن حصرها في مقال واحد، يمكنك الاطلاع على متجر الإضافات | Marketplace الخاص بمحرّر visual studio code والذي يضم المئات من الأدوات الرائعة، في حالة كنت تستخدم بعض ملحقات visual studio code التي لم ترها في هذه المقالة والتي يمكن أن تكون مفيدة لا تتردّد في مشاركتها معنا بالتعليقات!

أحلى ماعندنا ، واصل لعندك! سجل بنشرة أراجيك البريدية

بالنقر على زر “التسجيل”، فإنك توافق شروط الخدمة وسياسية الخصوصية وتلقي رسائل بريدية من أراجيك

عبَّر عن رأيك

إحرص أن يكون تعليقك موضوعيّاً ومفيداً، حافظ على سُمعتكَ الرقميَّةواحترم الكاتب والأعضاء والقُرّاء.

ذو صلة