إعداد VS Code للمبتدئين: أهم الإعدادات والإضافات

Visual Studio Code (VS Code) محرر أكواد مجاني من Microsoft يعمل على Windows وmacOS وLinux. لتجهيزه بشكل جيد: ثبّته من موقعه الرسمي، وفعّل بعض الإعدادات المهمة مثل التنسيق التلقائي عند الحفظ والحفظ التلقائي، وأضف مجموعة صغيرة من الإضافات للغات التي تستخدمها. هذا كله يأخذ ربع ساعة تقريباً، ويجعل البرمجة أسهل بشكل واضح.

باختصار: حمّل VS Code من code.visualstudio.com، وعدّل ستة إعدادات، وثبّت الإضافات التي تحتاجها فقط، وتعلّم خمسة اختصارات.

الخطوة 1: ثبّت VS Code من الموقع الرسمي

1. ادخل إلى code.visualstudio.com وحمّل النسخة المناسبة لنظامك.
2. على Windows، شغّل المثبّت. في شاشة الخيارات، يفضّل تفعيل الخيارات التي تضيف "Open with Code" إلى قائمة الزر الأيمن وتضيف VS Code إلى الـ PATH، لتفتح أي مجلد من الطرفية مباشرة.
3. على macOS، اسحب التطبيق إلى مجلد Applications. ولاستخدام الأمر code في Terminal، افتح لوحة الأوامر ونفّذ الأمر الخاص بتثبيت code في الـ PATH.

الآن افتح مجلد المشروع كاملاً بدلاً من فتح ملفات منفردة. من الطرفية داخل مشروعك اكتب:

code .

يعمل VS Code بأفضل شكل عندما يرى المجلد كاملاً، فالبحث وGit ومستعرض الملفات كلها تعتمد عليه.

الخطوة 2: تعرّف على الواجهة في دقيقتين

• شريط الأنشطة (Activity Bar): الأيقونات في أقصى الجانب: المستكشف، والبحث، والتحكم بالمصدر (Git)، والتشغيل وتصحيح الأخطاء، والإضافات.
• الشريط الجانبي (Side Bar): يعرض محتوى الأيقونة التي اخترتها، مثل شجرة الملفات.
• المحرر (Editor): مكان كتابة الكود، ويمكنك تقسيمه لرؤية ملفين جنباً إلى جنب.
• اللوحة السفلية (Panel): الطرفية المدمجة وقائمة المشكلات والمخرجات.
• شريط الحالة (Status Bar): في الأسفل تماماً، ويعرض فرع Git الحالي والأخطاء ورقم السطر ولغة الملف.

أهم ميزة على الإطلاق هي لوحة الأوامر (Command Palette) بالاختصار Ctrl+Shift+P. كل أوامر VS Code موجودة فيها، يكفي أن تكتب كلمتين للبحث، فلا تحتاج إلى حفظ القوائم.

الخطوة 3: عدّل الإعدادات المهمة

افتح الإعدادات بالاختصار Ctrl+, وابحث عن أي خيار باسمه. وإذا كنت تفضّل التعديل النصي، افتح لوحة الأوامر ونفّذ Preferences: Open User Settings (JSON)، ثم أضف أسطراً مثل هذه:

{
  "editor.fontSize": 16,
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "editor.tabSize": 2,
  "files.autoSave": "afterDelay",
  "editor.minimap.enabled": false
}

وظيفة كل إعداد:

الإعداد	وظيفته
editor.fontSize	يجعل الكود أسهل في القراءة. جرّب من 15 إلى 18.
editor.formatOnSave	ينسّق الكود تلقائياً في كل مرة تحفظ فيها.
editor.wordWrap	يلفّ الأسطر الطويلة حتى لا تمرّر أفقياً.
editor.tabSize	يحدد عرض المسافة البادئة: 2 شائع في مشاريع الويب، و4 في Python.
files.autoSave	يحفظ الملفات تلقائياً بعد تأخير قصير.
editor.minimap.enabled	يخفي الخريطة المصغّرة للكود ليوفّر مساحة.

إعدادات المستخدم أم إعدادات المشروع؟ ما عدّلته هنا هو إعدادات المستخدم (User)، وتنطبق على كل المشاريع. أما إعدادات مساحة العمل (Workspace) فتُحفظ داخل المشروع في الملف .vscode/settings.json وتنطبق عليه وحده، وهي مفيدة عندما يريد فريق كامل استخدام نفس القواعد، مثل حجم المسافة البادئة.

واختر أيضاً سمة ألوان مريحة لعينيك: افتح لوحة الأوامر وابحث عن "Color Theme". السمات المدمجة جيدة، ولا تحتاج إلى إضافة لذلك.

الخطوة 4: ثبّت الإضافات التي تحتاجها فعلاً

افتح قسم الإضافات بالاختصار Ctrl+Shift+X، وابحث بالاسم، ثم اضغط Install. ابدأ بعدد قليل، فيمكنك إضافة المزيد لاحقاً.

مفيدة للجميع تقريباً:

• Prettier - Code formatter: ينسّق ملفات JavaScript وTypeScript وHTML وCSS وJSON وMarkdown بأسلوب موحّد. بعد تثبيته اجعله المنسّق الافتراضي بإضافة "editor.defaultFormatter": "esbenp.prettier-vscode".
• Error Lens: يعرض الأخطاء والتحذيرات مباشرة على السطر الذي حدثت فيه.
• Code Spell Checker: يكتشف الأخطاء الإملائية في أسماء المتغيرات والتعليقات.
• GitLens: يعرض من عدّل كل سطر ومتى، فوق دعم Git المدمج في VS Code.

حسب اللغة:

• Python (من Microsoft): تشغيل كود Python وتصحيحه والإكمال التلقائي الذكي.
• ESLint: يكتشف المشكلات في كود JavaScript وTypeScript.
• Live Server: يفتح صفحة HTML في المتصفح ويحدّثها تلقائياً مع كل حفظ.

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

الخطوة 5: اختصارات توفّر عليك ساعات

هذه اختصارات Windows وLinux. على macOS استخدم Cmd بدلاً من Ctrl في أغلبها (ويبقى اختصار الطرفية Ctrl مع علامة backtick).

الاختصار	الوظيفة
Ctrl+P	فتح أي ملف بسرعة بكتابة اسمه
Ctrl+Shift+P	لوحة الأوامر
Ctrl+`	فتح الطرفية المدمجة أو إغلاقها
Ctrl+B	إظهار الشريط الجانبي أو إخفاؤه
Ctrl+/	تحويل الأسطر المحددة إلى تعليق أو إلغاؤه
Ctrl+D	تحديد التكرار التالي للكلمة الحالية
Alt+Up / Alt+Down	نقل السطر الحالي للأعلى أو للأسفل
F2	إعادة تسمية متغير أو دالة في كل مكان

ويمكنك أيضاً الضغط على Alt والنقر في عدة أماكن لتكتب بعدة مؤشرات في الوقت نفسه.

الخطوة 6: استخدم الطرفية المدمجة وGit

اضغط Ctrl+` لفتح طرفية تبدأ داخل مجلد مشروعك، فتنفّذ أوامر npm أو python أو git دون مغادرة المحرر.

وأيقونة Source Control في شريط الأنشطة تتيح لك تنفيذ stage وcommit وpush وpull بالأزرار، وتعرض كل تعديل بمقارنة جنباً إلى جنب. إذا كان Git جديداً عليك، فدليلنا شرح Git وGitHub خطوة بخطوة يوضح الأوامر التي تعمل خلف هذه الأزرار.

احتفظ بإعداداتك في كل مكان مع Settings Sync

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

وإذا كنت تعمل على مشاريع مختلفة جداً، فميزة الملفات الشخصية (Profiles) تسمح لك بفصل مجموعات الإضافات والإعدادات، مثلاً ملف لـ Python وآخر لتطوير الويب، فيبقى كل منهما خفيفاً.

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