قررت أن تبدأ رحلتك في البرمجة، فشاهدت أول درس، وإذا بالمدرّب يفتح برنامجًا داكن اللون بأيقونة زرقاء ويكتب الكود بسرعة، والألوان تظهر وحدها والأخطاء تُكتشف قبل التشغيل. هذا البرنامج في الغالب هو Visual Studio Code أو اختصارًا VS Code، أشهر محرر أكواد يستخدمه المبرمجون اليوم من المبتدئ حتى المحترف.
المشكلة أن كثيرًا من المبتدئين يثبّتونه ثم يقفون أمامه حائرين: من أين أبدأ؟ ما الإضافات التي أحتاجها فعلًا؟ ولماذا لا يعمل الكود عندي كما يعمل في الفيديو؟ في هذا الدليل نشرح VS Code للمبتدئين خطوة بخطوة: التثبيت، وفهم الواجهة، وأهم الإعدادات، والإضافات الضرورية، واختصارات توفر عليك ساعات، مع نصائح أمان مهمة.
ما هو VS Code ولماذا يفضّله المبرمجون؟
VS Code محرر أكواد مجاني من شركة مايكروسوفت، يعمل على ويندوز وماك ولينكس. الفكرة الأساسية فيه أنه خفيف في أصله، ثم تضيف إليه ما تحتاجه عبر الإضافات (Extensions)، فيتحول إلى بيئة مناسبة لتطوير مواقع الويب أو بايثون أو جافاسكربت أو PHP أو غيرها.
ولا بد من التفريق هنا بين أمرين يخلط بينهما كثيرون:
- Visual Studio Code: محرر أكواد خفيف ومجاني ومتعدد اللغات، وهو موضوع هذا المقال.
- Visual Studio: بيئة تطوير متكاملة أكبر حجمًا، تُستخدم غالبًا لتطوير تطبيقات .NET وC++ على ويندوز، ولها نسخ مجانية وأخرى مدفوعة.
أما لماذا ينتشر VS Code بهذا الشكل، فلأسباب عملية: مجاني بالكامل، وسريع الإقلاع، ويدعم معظم لغات البرمجة، وفيه طرفية (Terminal) مدمجة، ويتكامل مع Git مباشرة، ومتجر إضافاته ضخم. وإن كنت ما زلت تحتار في اختيار لغتك الأولى، فاقرأ أولًا دليلنا عن كيف تبدأ تعلم البرمجة من الصفر.
طريقة تثبيت VS Code بشكل صحيح
التثبيت سهل، لكن هناك تفاصيل صغيرة تختصر عليك مشاكل لاحقًا:
- حمّله من الموقع الرسمي فقط: الموقع الرسمي للمحرر هو code.visualstudio.com. تجنّب المواقع التي تعرض «نسخًا معدّلة» أو «مفعّلة»، فالبرنامج مجاني أصلًا ولا يحتاج أي تفعيل، وأي نسخة من مصدر مجهول قد تحمل برمجيات خبيثة.
- على ويندوز: أثناء التثبيت فعّل خيار Add to PATH، وخيار إضافة «Open with Code» إلى قائمة الزر الأيمن، حتى تفتح أي مجلد مشروع بضغطة واحدة.
- على ماك: انقل التطبيق إلى مجلد Applications، ثم افتح لوحة الأوامر واكتب Shell Command واختر تثبيت الأمر
codeلتتمكن من فتح المجلدات من الطرفية. - على لينكس: تتوفر حزم رسمية لتوزيعات مثل أوبونتو وفيدورا، ويمكن تثبيته أيضًا من متجر التوزيعة إن كان متاحًا فيها.
بعد التثبيت افتح البرنامج، ومن قائمة File اختر Open Folder وافتح مجلدًا مخصصًا لمشروعك. اعتد من البداية على العمل داخل مجلد كامل بدل فتح ملفات منفردة، لأن كثيرًا من مزايا المحرر تعتمد على معرفة مجلد المشروع.
جولة سريعة في واجهة VS Code
الواجهة تبدو مزدحمة في البداية، لكنها مقسمة بشكل منطقي:
- شريط النشاط (Activity Bar): العمود الصغير على الجانب، وفيه أيقونات المستكشف والبحث والتحكم بالمصدر (Git) والتشغيل والإضافات.
- الشريط الجانبي (Side Bar): يعرض محتوى الأيقونة المختارة، مثل شجرة ملفات مشروعك.
- منطقة المحرر: حيث تكتب الكود، ويمكنك تقسيمها لعرض ملفين جنبًا إلى جنب.
- اللوحة السفلية (Panel): وفيها الطرفية والمشاكل (Problems) والمخرجات.
- شريط الحالة: في الأسفل، ويعرض لغة الملف الحالي وترميزه والفرع الحالي في Git.
أهم ما يجب أن تتعرف عليه هو لوحة الأوامر (Command Palette) التي تفتحها بالاختصار Ctrl+Shift+P (أو Cmd+Shift+P على ماك). منها تصل إلى أي أمر في البرنامج بكتابة جزء من اسمه، فلا تحتاج إلى حفظ أماكن القوائم.
إعدادات أساسية ينصح بضبطها من اليوم الأول
افتح الإعدادات من Ctrl+, وابحث عن الإعدادات التالية:
- Auto Save: اضبطه على
afterDelayليحفظ الملفات تلقائيًا، فكثير من المبتدئين يظنون أن الكود لا يعمل بينما المشكلة أن الملف لم يُحفظ. - Format On Save: فعّله ليُرتّب الكود تلقائيًا عند الحفظ، بشرط وجود أداة تنسيق مناسبة للغة.
- Font Size: كبّر الخط إلى حجم مريح لعينيك، فساعات البرمجة طويلة.
- Word Wrap: فعّله إن كانت الأسطر الطويلة تخرج عن الشاشة.
- Color Theme: اختر سمة مريحة من
Ctrl+KثمCtrl+T.
وإن كنت تعمل على أكثر من جهاز، فميزة Settings Sync تتيح مزامنة إعداداتك وإضافاتك عبر حساب مايكروسوفت أو GitHub، فتجد بيئتك نفسها أينما سجلت الدخول.
أهم إضافات VS Code للمبتدئين
ادخل إلى قسم الإضافات بالاختصار Ctrl+Shift+X. القاعدة الذهبية: لا تثبّت عشرات الإضافات دفعة واحدة، بل ابدأ بما تحتاجه للغة التي تتعلمها. هذه قائمة مقترحة:
- Python (من Microsoft): ضرورية إن كنت تتعلم بايثون، وتضيف الإكمال التلقائي وتشغيل الملفات وتصحيح الأخطاء.
- Live Server: لمتعلمي HTML وCSS، تفتح صفحتك في المتصفح وتحدّثها تلقائيًا عند كل حفظ.
- Prettier: أداة تنسيق شهيرة تجعل كود الويب مرتبًا ومتناسقًا.
- ESLint: تكشف أخطاء جافاسكربت والممارسات السيئة أثناء الكتابة.
- Error Lens: تعرض رسالة الخطأ بجانب السطر مباشرة بدل أن تبحث عنها في لوحة المشاكل.
- Code Spell Checker: تنبّهك إلى الأخطاء الإملائية في أسماء المتغيرات والتعليقات الإنجليزية.
ومن الجميل أن بعض المزايا مدمجة أصلًا دون إضافات، مثل Emmet لكتابة HTML بسرعة: اكتب علامة التعجب ! في ملف HTML فارغ ثم اضغط Tab، وسيظهر لك هيكل الصفحة الأساسي كاملًا.
نصيحة أمان قبل تثبيت أي إضافة
متجر الإضافات مفتوح للمطورين، وقد رُصدت في السابق إضافات ضارة تنتحل أسماء إضافات مشهورة. قبل التثبيت تحقق من اسم الناشر وعلامة التوثيق بجانبه، وعدد مرات التثبيت والتقييمات، وتاريخ آخر تحديث. وإذا فتحت مجلدًا من مصدر لا تعرفه، فسيسألك المحرر عن الثقة في مساحة العمل (Workspace Trust)؛ اختر الوضع المقيّد إن لم تكن متأكدًا من مصدر الملفات.
الطرفية المدمجة وتشغيل الكود
من أكثر المزايا فائدة أن الطرفية موجودة داخل المحرر، وتفتحها بالاختصار Ctrl+` (المفتاح الموجود أعلى Tab عادة). من خلالها تشغّل ملفات بايثون مثل python main.py، أو تثبّت الحزم، أو تنفّذ أوامر Git، دون التنقل بين نوافذ مختلفة.
وإن كنت تستخدم إضافة اللغة المناسبة، فستجد زر تشغيل أعلى يمين المحرر ينفّذ الملف الحالي مباشرة. أما للبحث عن سبب خطأ معقد، فجرّب أداة التصحيح (Debugger) عبر F5: ضع نقطة توقف (Breakpoint) بالنقر بجانب رقم السطر، ثم شغّل البرنامج وراقب قيم المتغيرات خطوة بخطوة.
استخدام Git داخل VS Code
يتكامل المحرر مع Git بشكل مدمج من قسم Source Control (Ctrl+Shift+G)، فترى الملفات المعدلة وتقارن التغييرات وتنشئ الإيداعات (Commits) وترفعها إلى GitHub بضغطات قليلة. لكن يُفضّل أن تفهم المفاهيم الأساسية أولًا، وقد شرحناها بالتفصيل في دليل Git وGitHub للمبتدئين.
اختصارات ستوفّر عليك ساعات
الاختصارات التالية لويندوز ولينكس، وعلى ماك استبدل Ctrl بـ Cmd في أغلبها:
Ctrl+P: فتح أي ملف في المشروع بكتابة جزء من اسمه.Ctrl+Shift+P: لوحة الأوامر.Ctrl+/: تحويل السطر إلى تعليق أو إلغاء التعليق.Alt+↑أوAlt+↓: نقل السطر الحالي للأعلى أو الأسفل.Shift+Alt+↓: نسخ السطر إلى الأسفل.Ctrl+D: تحديد التكرار التالي للكلمة نفسها لتعديلها كلها معًا.Alt+نقرة: إضافة أكثر من مؤشر للكتابة في عدة أماكن في الوقت نفسه.Shift+Alt+F: تنسيق المستند بالكامل.F2: إعادة تسمية متغير في كل مواضعه.
أخطاء شائعة يقع فيها المبتدئون
- تثبيت الإضافة دون تثبيت اللغة نفسها: إضافة Python لا تثبّت بايثون على جهازك؛ عليك تثبيته أولًا من موقعه الرسمي ثم اختيار المفسّر داخل المحرر.
- فتح ملف منفرد بدل المجلد: فلا تعمل بعض المزايا مثل التشغيل والبحث داخل المشروع كما يجب.
- تكديس الإضافات: كثرتها تبطئ المحرر وقد تتعارض فيما بينها.
- الاعتماد الكامل على الإكمال التلقائي أو أدوات الذكاء الاصطناعي: وهي مفيدة، لكن المبتدئ يحتاج أن يكتب ويفهم بنفسه أولًا.
وبالحديث عن الذكاء الاصطناعي، يدعم VS Code أدوات مساعدة مثل GitHub Copilot التي تقترح أسطرًا من الكود، ولدينا مقال عن أدوات الذكاء الاصطناعي التي تسهّل عمل المبرمجين. استخدمها كمساعد يشرح لك ويقترح، لا كبديل عن فهمك، وراجع دائمًا ما تقترحه قبل اعتماده.
VS Code أم PyCharm؟
سؤال يتكرر كثيرًا عند متعلمي بايثون. باختصار: VS Code أخف ومتعدد اللغات ومناسب إن كنت تتنقل بين الويب وبايثون وغيرها، بينما PyCharm بيئة متخصصة في بايثون وتقدّم أدوات جاهزة أكثر دون إضافات. لا يوجد خيار خاطئ هنا، وإن أردت تجربة البديل فلدينا شرح تثبيت وإعداد PyCharm خطوة بخطوة.
خلاصة
VS Code ليس معقدًا كما يبدو أول مرة؛ يكفي أن تثبّته من مصدره الرسمي، وتعمل داخل مجلد مشروع، وتضبط الحفظ والتنسيق التلقائي، وتضيف إضافات قليلة تخص لغتك، ثم تتعلم الاختصارات تدريجيًا. ابدأ اليوم بمشروع صغير، مثل صفحة HTML بسيطة أو برنامج بايثون يطبع اسمك، وستلاحظ خلال أيام كيف يصبح المحرر امتدادًا طبيعيًا ليدك.
