أجمل إضافات محرر VS Code

Osama_Elzero

أجمل إضافات محرر VS Code ِاركنا الإضافات التي تستعملها

Bracket Pair Colorizer 2

كثيرا ما تكتب الكثير من الاقواس داخل بعضها وهذه الإضافة تفيدك في تلوين الأقواس بألوان مختلفة لتسهيل قراءة الكود عليك ومعرفة بداية ونهاية كل قوس

Icon Fonts

تستطيع عن طريق هذه الإضافة كتابة اختصارات يمكن تحويلها ل Icons الخاصة بمكتبات ال Font Icons المشهورة مثل Font Awesome

Indent-Rainbow

دائما يكون لديك مشروع كبير ومتفرع ولديك عناصر داخل عناصر وهكذا وبواسطة هذه الإضافة سوف تجد الوان تحدد لك بداية ونهاية كل عنصر بلون مختلف لتسهل عليك قراءة الكود

Live Server

واحد من أهم الإضافات التي لا غنى عنها فهي تنشيء لك Local Server وتعطيك ميزة ال Hot Reload والتي تفيدك في عمل Refresh للصفحة تلقائيا عند عمل حفظ للملف الذي تعمل عليه

Prettier - Code formatter

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

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

بعض الإضافات التي أعجبتني أضيفها:

Code Spell Checker -

itemName=streetsidesoftware.code-spell-checker

للتصحيح اللغوي للكلمات الإنجليزية في التعليقات والمتغيرات. مفيدة وتظهر أعمالك باحترافية

  • Path Intellisense

itemName=christian-kohler.path-intellisense

للإكمال التلقائية للمسارات (للملفات والمجلدات)

  • PHP DocBlocker

itemName=neilbrayfield.php-docblocker

مفيدة لكتابة توثيق php والإكمال التلقائي لها

لن يقتصر الأمر على تلك الإضافات فهناك إضافات رائعه أخرى يحتاجها كل مبرمج لراحة عينيه وخصوصاً في المشاريع الكبيره التى تحتاج لجلسات طويله ولتجعل الكود more readable

على سبيل المثال

Bracket Pair Colorizer

هذه الإضافه تقوم بتلوين الأقواس وهذه حقاً أداة رائعه حيث انك في كثير من الأحوال تقوم بكتابة دوال functions متداخله وتكرارات بإستخدام for loop مما يجعل الكود الغير ملون وصعب قرائته

CodeSnap

تقوم هذه الأداه الرائعه بإلتقاط صوره من كودك لنشره بشكل جميل

كل ما عليك فعله هو

الضغط على ctrl + shift + p

ثم سيظهر لك شريط البحث أكتب فيه code snap

ثم سيظهر على الجانب الايمن الأداة قم بعمل تظليل على الكود وستجد الكود يظهر الناحية الاخرى على هيئة صورة

colorize

هذه الاداة جميله جداً للالوان وخصوصاً لو أردت أن تجعل أي قيمه تحمل لوناً في كود CSS ملوناً بالكامل

تستطيع تجربة فكرتها فهي رائعه

CSS Peek

إن اردت أن تقوم بروئية كود CSS دون الدخول على ملف الاستايل الخاص بالموقع فتسطيع من خلال تلك الأداة عرض كود CSS الخاص بتاج HTML دون الدخول بالضغط مرتين على التاج بجانب أنك تستطيع التعديل على الكود

Draw.io

تستطيع من خلال تلك الأداه أن تقوم بعمل مخططات بيانيه واحصائيه تساعدك بطريقه سهله ومنظمه

كما يمكنك عمل مخططات pseudo code فالبرنامج بسيط جدا وتستطيع تعلمه في خلال جلسة واحده

كل ما عليك فعله هو فتح ملف جديد وأن تجعله بالإمتداد test.drawio وسوف تقرئه الأداه مباشرة

indent-rainbow

بدلاً من مسافات عاديه هذه الأداه تجعل المسافات indentation ملونه ممكن يجعل السطور أكثر سهوله في قرائتها