دليلك لتخصيص فيجوال ستوديو كود: من المظهر العادي إلى الاحترافي

إذا كنت ترغب في تحويل محرر فيجوال ستوديو كود الخاص بك من شكله العادي والممل إلى مظهر جميل واحترافي، فهذا المقال لك. سنرى معًا كيف نغير السمات، ونعدل الإعدادات، ونضيف إضافات (plugins) مميزة ستجعل الواجهة أكثر جمالًا. معًا، سنجعل فيجوال ستوديو كود الخاص بك مميزًا ويحفزك على تعلم البرمجة. بما أن فيجوال ستوديو كود هو أداتي المفضلة، سأشارك معك كل التعديلات التي أستخدمها لتجعل الأداة مقبولة أكثر وتستمتع بالكتابة عليها. لنبدأ.

الإضافات (Extensions)

نتجه إلى قسم الإضافات في فيجوال ستوديو كود للبدء.

1. Poyu-themes-main

هذه الإضافة تغير سمات الألوان في المحرر الخاص بك. عند تثبيتها، ستلاحظ تغييرًا فوريًا في المظهر.

• للتثبيت: ابحث عن Poyu-themes-main في قسم الإضافات وقم بتثبيتها.
• للتخصيص: يمكنك الاختيار من بين عدة سمات ألوان تأتي مع الإضافة لتحديد اللون الذي تفضله.

2. Symbols

هذه الإضافة تقوم بتغيير أيقونات الملفات والمجلدات في مستكشف الملفات، مما يعطيها شكلاً أكثر وضوحًا وجمالًا.

• قبل التثبيت: تكون أيقونات الملفات بالشكل الافتراضي.
• بعد التثبيت: تتغير الأيقونات إلى أشكال مميزة تعبر عن نوع الملف (مثل أيقونة JavaScript، أيقونة CSS، إلخ)، مما يجعل التنقل بين الملفات أسهل بصريًا.

3. Project Manager

إذا كنت تعمل على مشاريع متعددة أو تتعاون مع فريق، هذه الإضافة مفيدة جدًا. تسمح لك بإنشاء “ملف مشروع” لكل مشروع تعمل عليه، مما يسهل التنقل بينها.

• للتثبيت: ابحث عن Project Manager وقم بتثبيتها.
• الاستخدام: بعد التثبيت، ستتمكن من حفظ مشاريعك والوصول إليها بسرعة من خلال قائمة خاصة.

4. Code Spell Checker

تقوم هذه الإضافة بالتدقيق الإملائي للكود والتعليقات والنصوص داخل المحرر.

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

  // مثال على خطأ إملائي
  const myConstantt = "some value"; // ستشير الإضافة إلى أن 'myConstantt' بها خطأ
  

5. Prettier - Code formatter

هذه الإضافة تقوم بتنسيق الكود تلقائيًا للحفاظ على نمط ثابت. يمكنها إضافة تعليقات توضيحية لنهاية الكتل البرمجية.

• مثال: إذا كان لديك كتلة div معقدة، يمكن أن تضيف تعليقًا يوضح إلى أي عنصر بداية تعود هذه النهاية. ```html

``` إذا غيرت اسم skills-container، ستقوم الإضافة بتحديث التعليق للإشارة إلى ذلك.

6. Error Lens

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

• الفائدة: تجعل اكتشاف الأخطاء وتصحيحها أسرع وأكثر وضوحًا أثناء الكتابة.

7. Image Preview

عند العمل مع ملفات الصور، تعرض هذه الإضافة معاينة مصغرة للصورة بجانب السطر الذي يحتوي على مسارها، بالإضافة إلى أبعادها.

• الاستخدام: بمجرد كتابة مسار صورة في ملف HTML أو CSS، ستظهر أيقونة ومعاينة للصورة بجانب رقم السطر.

8. CodeSnap

تتيح لك هذه الإضافة أخذ لقطات شاشة احترافية للكود الخاص بك لمشاركتها بسهولة.

• للاستخدام:
  1. حدد جزء الكود الذي تريد مشاركته.
  2. انقر بزر الفأرة الأيمن واختر CodeSnap.
  3. ستظهر نافذة جديدة تحتوي على الكود المحدد بتنسيق جميل.
  4. يمكنك حفظ هذه النافذة كصورة ومشاركتها.

تعديلات الإعدادات (Settings)

للوصول إلى الإعدادات، اذهب إلى File > Preferences > Settings أو استخدم الاختصار Ctrl+,.

1. الخريطة المصغرة (Minimap)

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

• لتفعيلها: ابحث عن minimap في الإعدادات وتأكد من أن خيار Editor: Minimap: Enabled محدد.

2. التفاف الأسطر (Word Wrap)

لتجنب التمرير الأفقي في الأسطر الطويلة جدًا، يمكنك تفعيل التفاف الأسطر.

• لتفعيلها:
  • اختصار ويندوز: Alt + Z
  • اختصار ماك: Option + Z
• النتيجة: أي سطر يتجاوز عرض المحرر سينتقل تلقائيًا إلى السطر التالي.

3. حركة المؤشر السلسة (Smooth Cursor Animation)

لجعل حركة مؤشر الكتابة أكثر سلاسة وانسيابية.

• للتفعيل: ابحث عن cursorSmoothCaretAnimation واضبطها على on.

4. نمط وميض المؤشر (Cursor Blinking)

يمكنك تغيير طريقة وميض المؤشر.

• للتغيير: ابحث عن cursorBlinking واختر النمط الذي تفضله من الخيارات المتاحة (blink, smooth, phase, expand, solid).

5. موقع شريط النشاط (Activity Bar Location)

شريط النشاط هو الشريط الذي يحتوي على أيقونات (المستكشف، البحث، Git، الإضافات). يمكنك نقله إلى الأعلى بدلاً من الجانب.

• للتغيير: ابحث عن activityBar.location وغير القيمة من default إلى top.

6. حجم الخط (Font Size)

إذا كان حجم الخط الافتراضي (عادة 12 أو 14) غير مناسب لك، يمكنك تغييره بسهولة.

• للتغيير: ابحث عن fontSize واضبط القيمة على الحجم الذي يريحك (مثل 15 أو 16).

أتمنى أن تساعدك هذه الإضافات والإعدادات في تحسين تجربتك مع فيجوال ستوديو كود ورفع كفاءتك. إذا كان لديك أي أسئلة أو إضافات أخرى مفيدة، يمكنك مشاركتها.