شرح VS Code: دليل التثبيت والواجهة للمبتدئين

ستقضي أمام محرّر الأكواد ساعاتٍ أطول ممّا تقضيه أمام أيّ أداةٍ أخرى في عملك. هو طاولتك ومطرقتك ومفكّك معًا، والمكان الذي تكتب فيه كل سطرٍ وتقرأ فيه كل خطأ. ولهذا فإن إتقانه قبل أن تكتب أوّل سطر HTML ليس ترفًا، بل هو ما يفرّق بين من يصارع أداته كل يومٍ ومن تطيعه.

في المقال السابق جهّزتَ بيئة العمل بعتادها وبرمجيّاتها، وكان VS Code نواتها. وهنا أضبطه وأُتقنه معك: أرشدك خطوةً خطوةً في تثبيته، ثمّ أصحبك في جولةٍ في واجهته، ثمّ أعرض الإضافات التي تحوّله من محرّرٍ قويٍّ إلى بيئة عملٍ متكاملة، وأختم بتخصيصه ليصير مساحتك أنت. والهدف بسيط: أن تخرج من المقال وأنت تشعر بأن الأداة في يدك لا فوق رأسك.

ولماذا VS Code تحديدًا؟ لأنه صار المعيار الفعليّ في المجال: مجّانيٌّ، خفيف، شيفرته المصدرية مفتوحةٌ برخصة MIT، وقابلٌ للتوسعة بآلاف الإضافات.^[1] هذه التركيبة جعلته الخيار الأوّل لملايين المطوّرين، وجعلت كل ما تتعلّمه فيه قابلًا للنقل إلى أيّ مشروعٍ أو فريقٍ تنضمّ إليه.

تثبيت VS Code

التثبيت مباشر، وله أكثر من طريقةٍ بحسب نظامك. اختر ما يناسبك؛ النتيجة واحدة.

الطريقة الأولى: من الموقع الرسميّ (لكل الأنظمة)

افتح متصفّحك وتوجّه إلى الموقع الرسميّ: code.visualstudio.com.^[2]
يكتشف الموقع نظامك تلقائيًّا ويقترح النسخة المناسبة (ملفّ .exe لويندوز، و.dmg لماك، و.deb أو .rpm للينكس).
شغّل ملفّ التثبيت واتّبع التعليمات.

ولمستخدم ويندوز نصيحةٌ تفيدك لاحقًا: أثناء التثبيت فعّل الخيارات التي تضيف VS Code إلى قائمة «Open with Code» وإلى مسار النظام (Add to PATH)، فتفتح بعدها أيّ مجلّدٍ في المحرّر مباشرةً ومن الطرفية بأمرٍ واحد.

الطريقة الثانية: من متجر التطبيقات

يمكنك أيضًا تثبيته من المتجر المدمج في نظامك كأيّ تطبيقٍ آخر: ابحث عن «Visual Studio Code» في «متجر مايكروسوفت» على ويندوز، أو في مركز البرمجيّات (Snap أو Flathub) في معظم توزيعات لينكس.

الطريقة الثالثة: من الطرفية في لينكس

بما أنّي أستعمل لينكس فهذه طريقتي المفضّلة، لأنها أسرع. تختلف الأوامر قليلًا بحسب توزيعتك. على التوزيعات المبنية على Debian أو Ubuntu:

sudo apt update
sudo apt install code

وعلى التوزيعات المبنية على Fedora أو RHEL تستورد مفتاح مايكروسوفت وتضيف مستودعه ثمّ تثبّت:

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]nname=Visual Studio Codenbaseurl=https://packages.microsoft.com/yumrepos/vscodenenabled=1ngpgcheck=1ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
sudo dnf check-update
sudo dnf install code

بعد التثبيت بأيّ طريقةٍ، افتح البرنامج، وأنت جاهزٌ للجولة.

جولة في الواجهة

قد تبدو الواجهة مزدحمةً أوّل مرّة، لكنها مقسّمةٌ بمنطقٍ واضح. يقسّمها التوثيق الرسميّ إلى خمس مناطق، تتكامل لتمنحك تحكّمًا كاملًا في مشروعك.^[3] فلنتعرّف إليها واحدةً واحدة.

ومبدأٌ تبني عليه كل ما بعده: في VS Code «المشروع» هو «مجلّد». فبدل أن تفتح ملفًّا واحدًا، تفتح المجلّد الذي يضمّ مشروعك كلّه من File > Open Folder، فيظهر محتواه في المستكشف، وتعمل كل أدوات المحرّر (البحث، والطرفية، وGit) في سياق هذا المجلّد. اعتد على فتح المجلّد لا الملفّ منذ يومك الأوّل.

مناطق الواجهة الخمس: شريط النشاط، والشريط الجانبيّ، والمحرّر، واللوحة السفليّة، وشريط الحالة.

1. شريط النشاط (Activity Bar)

الشريط العموديّ الضيّق في أقصى الجانب. هو مركز التحكّم الذي تبدّل به بين «أوضاع العمل» في الشريط الجانبيّ. كل أيقونةٍ تفتح لوحةً مختلفة، وأهمّها:

المستكشف (Explorer): أكثر ما تضغطه؛ يعرض كل ملفّات مشروعك ومجلّداته.
البحث (Search): يبحث عن أيّ كلمةٍ ويستبدلها عبر كل ملفّات المشروع دفعةً واحدة.
التحكّم بالمصادر (Source Control): مركز تكامل Git؛ منه ترى تغييراتك وتكتب رسائل الإيداع وتدير الفروع.
التشغيل والتصحيح (Run and Debug): لتشغيل شيفرتك وتتبّع أخطائها خطوةً خطوة.
الإضافات (Extensions): بوّابتك إلى سوق الإضافات الضخم، تبحث فيه وتثبّت وتدير.

2. الشريط الجانبيّ (Primary Side Bar)

المساحة المجاورة لشريط النشاط، ويتغيّر محتواها بحسب الأيقونة التي تضغطها. فإن ضغطت «المستكشف» صار مدير ملفّاتٍ كاملًا تنشئ فيه الملفّات والمجلّدات وتعيد تسميتها وتحذفها؛ وإن ضغطت «البحث» صار واجهة بحثٍ متقدّمة. هذا التصميم يتيح عرض كمٍّ هائلٍ من الأدوات دون أن تزدحم الشاشة.

3. المحرّر (Editor)

المساحة الكبرى في المنتصف، وفيها تقضي أكثر وقتك. هنا تُفتَح الملفّات في «علامات تبويب» تتنقّل بينها، ويمكنك تقسيم المحرّر (Split Editor) عموديًّا أو أفقيًّا لتعرض ملفّين جنبًا إلى جنب: شيفرة HTML في قسمٍ وCSS المطابق لها في القسم المجاور، فترى أثر التغيير دون أن تبدّل التبويبات.

4. اللوحة السفليّة (Panel)

مساحة الأدوات المساعدة أسفل المحرّر (تظهرها وتخفيها بـCtrl+J)، وأهمّ تبويباتها اثنان:

الطرفية (Terminal): تمنحك واجهة الأوامر داخل المحرّر نفسه، فلا تحتاج نافذةً منفصلةً لتشغيل أوامر Git أو تثبيت الحزم أو تشغيل الخادم المحلّيّ. هذا الدمج وحده يختصر عشرات التنقّلات يوميًّا.
المشاكل (Problems): تفحص شيفرتك وأنت تكتب وتعرض الأخطاء والتحذيرات، فتكتشف الخلل مبكّرًا قبل أن يتراكم.

5. شريط الحالة (Status Bar)

الشريط الأفقيّ الرفيع في الأسفل، يعرض معلوماتٍ حيّةً عن مشروعك: فرع Git الحاليّ، وعدد الأخطاء والتحذيرات، ونوع ترميز الملفّ، ورقم السطر والعمود اللذين يقف عليهما مؤشّرك. وبعض هذه المعلومات قابلٌ للنقر للتفاعل معه (كتبديل فرع Git).

فهم هذه المناطق الخمس وكيف تتكامل هو خطوتك الأولى نحو تحويل VS Code من محرّر نصوصٍ إلى بيئة تطويرٍ في يدك.

ميزتان مدمجتان توفّران عليك الكثير

قبل الحديث عن الإضافات، خذ هاتين الميزتين المدمجتين أصلًا في المحرّر (لا تحتاج تثبيت شيء)، فهما من أهمّ ما يجعله يبدو «ذكيًّا»، وكثيرٌ من المبتدئين يجهلهما.

الإكمال الذكيّ (IntelliSense): وأنت تكتب، يقترح عليك المحرّر أسماء الوسوم والخصائص والدوال والمتغيّرات الموجودة في مشروعك، مع وصفٍ موجزٍ لكلٍّ منها. فبدل أن تحفظ كل اسمٍ أو تخطئ في كتابته، تبدأ الحرف الأوّل وتختار من القائمة. هذا وحده يقلّل أخطاءك الإملائية ويسرّع كتابتك كثيرًا، ويزداد ذكاءً كلّما عرف المحرّر لغةً جديدةً تعمل بها.

اختصارات Emmet: ميزةٌ مدمجةٌ تكتب لك بنية HTML وتنسيقات CSS من اختصاراتٍ قصيرة. اكتب علامة التعجّب ! ثمّ Tab، فتتولّد لك صفحة HTML كاملةٌ بهيكلها الأساسيّ في لحظة. واكتب ul>li*3 ثمّ Tab، فتتولّد قائمةٌ بثلاثة عناصر. تعلّم بضعة أنماطٍ من Emmet يختصر عليك دقائق من الكتابة المتكرّرة في كل صفحة.

الإضافات التي تبدأ بها

الإضافات هي ما يحوّل VS Code من محرّرٍ جيّدٍ إلى مساعدٍ يرفع سرعتك وجودة شيفرتك. السوق هائل، فلا تُغرِق محرّرك من اليوم الأوّل؛ ابدأ بهذه القائمة المدروسة وأضِف ما عداها حين يفرضه عملك. وتثبّت أيّ إضافةٍ من قسم «الإضافات» في شريط النشاط، أو بأمرٍ في لوحة الأوامر مثل ext install متبوعًا بمعرّف الإضافة.

للأساس وسير العمل

Live Server (ritwickdey.LiveServer): ضروريّةٌ للمبتدئ؛ تشغّل خادمًا محلّيًّا وتعرض صفحتك في المتصفّح، وتعيد تحميلها تلقائيًّا فور حفظ أيّ تغيير، فتوفّر عليك التحديث اليدويّ المستمرّ. ولمايكروسوفت بديلٌ رسميٌّ مشابه اسمه Live Preview.
Auto Rename Tag (formulahendry.auto-rename-tag): حين تغيّر اسم وسم HTML (من <h1> إلى <h2>)، تغيّر تلقائيًّا الوسم الختاميّ المطابق له، فتمنع خطأً شائعًا.

لجودة الشيفرة وتنسيقها

Prettier (esbenp.prettier-vscode): ينسّق شيفرتك تلقائيًّا عند الحفظ، فتبقى مقروءةً ومنظّمةً دائمًا، وهذا أساسٌ للعمل ضمن فريق.
Error Lens (usernamehw.errorlens): يعرض رسالة الخطأ نصًّا واضحًا بجانب السطر مباشرةً، بدل أن تمرّر الفأرة فوق الخطّ المتعرّج لتراها.
Code Spell Checker (streetsidesoftware.code-spell-checker): مدقّقٌ إملائيٌّ مصمّمٌ للشيفرة، يجنّبك أخطاء أسماء المتغيّرات والتعليقات.

لراحة العين

indent-rainbow (oderwat.indent-rainbow): يلوّن المسافات البادئة بألوانٍ متدرّجة، فيسهّل تتبّع الكتل المتداخلة.
Color Highlight (naumovs.color-highlight): يُظهر مربّعًا ملوّنًا بجانب أيّ قيمة لونٍ (مثل #FFFFFF)، فترى اللون دون فتح المتصفّح.

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

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

تخصيص VS Code: اجعله مساحتك

التخصيص ليس رفاهية، بل خطوةٌ لإنشاء بيئةٍ مريحةٍ ستقضي فيها مئات الساعات. الهدف تقليل التشتّت وتسريع وصولك للأدوات. ويمنحك VS Code تحكّمًا شبه كاملٍ في كل زاويةٍ منه.

المظهر: الثيمات والأيقونات

الثيم اللونيّ مجموعةٌ متكاملةٌ من ألوان الخلفية والنصوص والواجهة. تبدّل بين الثيمات المثبّتة من File > Preferences > Theme > Color Theme (أو بالاختصار Ctrl+K Ctrl+T). والثيم الافتراضيّ الداكن (Dark Modern) يفي بالغرض، لكن إن أردت غيره فالسوق يضمّ آلاف الثيمات: اذهب إلى قسم الإضافات وابحث عن «Theme».

أنا شخصيًّا أستعمل ثيمي الخاصّ، Crimson Deep، وإن أردت تجربته فثبّته بـext install Kshikhani.crimson-deep-theme.

ومن أشهر الثيمات الأخرى التي تجدها في السوق: One Dark Pro (مستوحًى من محرّر Atom الكلاسيكيّ، معروفٌ بتوازنه)، وDracula Official (داكنٌ عالي التباين)، وGitHub Theme (الثيمان الرسميّان الداكن والفاتح لـGitHub).

وإلى جانب الألوان، تستطيع تغيير أيقونات الملفّات (File Icon Theme). هذه ليست لمسةً جماليّةً فحسب، بل أداة إنتاجية: تميّز نوع الملفّ بصريًّا بسرعة (ملفّ JavaScript يختلف شكله عن CSS أو صورة)، فتتنقّل في المشاريع الكبيرة أسرع. غيّرها من File > Preferences > Theme > File Icon Theme.

الإعدادات: تحكّمٌ في كل تفصيل

افتح الإعدادات بـCtrl+, وابحث عن أيّ إعدادٍ تريده. الواجهة الرسوميّة مثاليّةٌ للبدء، أمّا تعديل ملفّ settings.json مباشرةً فيمنحك سرعةً أكبر وقدرةً على إضافة التعليقات ونسخ إعداداتك كاملةً إلى أيّ جهاز.^[4] وهذه الإعدادات الأربعة أضبطها في كل تثبيتٍ جديد:

"editor.fontSize": 16: حجم خطٍّ يريح عينك بحسب دقّة شاشتك.
"files.autoSave": "onFocusChange": يحفظ الملفّ تلقائيًّا بمجرّد أن تنقر خارج المحرّر، فلا تفقد عملًا ولا تنشغل بالضغط على Ctrl+S.
"editor.wordWrap": "on": يلفّ الأسطر الطويلة ضمن حدود المحرّر بدل امتدادها أفقيًّا.
"editor.formatOnSave": true: إعدادٌ حاسم؛ ينسّق شيفرتك بإضافة مثل Prettier في كل حفظ، فتبقى نظيفةً دون مجهود.

وحين تتراكم لك تخصيصاتٌ تخصّك، فعّل ميزة «مزامنة الإعدادات» (Settings Sync) المدمجة: تحفظ إعداداتك وإضافاتك واختصاراتك في حسابك، فتستعيد بيئتك كاملةً على أيّ جهازٍ جديدٍ في دقائق.^[4]

اختصارات لوحة المفاتيح

أكبر قفزةٍ في سرعتك تأتي من تقليل حركة يدك بين اللوحة والفأرة. معظم الاختصارات تستعمل Ctrl على ويندوز ولينكس وCmd ⌘ على ماك. وهذه التي أستعملها عشرات المرّات يوميًّا.^[5]

للتنقّل والبحث:

لوحة الأوامر (Ctrl+Shift+P): مفتاحك إلى كل شيءٍ في المحرّر؛ تبحث فيه عن أيّ أمرٍ أو إعدادٍ وتنفّذه دون فأرة.
الفتح السريع (Ctrl+P): أسرع طريقةٍ للتنقّل بين ملفّات مشروعٍ كبير؛ ابدأ بكتابة اسم الملفّ فيظهر فورًا.
الانتقال إلى سطر (Ctrl+G): يقفز مباشرةً إلى رقم السطر الذي تريده.

لتحرير الشيفرة:

تحديد الكلمة المطابقة التالية (Ctrl+D): اضغطه مرارًا لتحديد كل النسخ المتشابهة ثمّ عدّلها دفعةً واحدة.
مؤشّرٌ متعدّد (Ctrl+Alt+↑/↓): يكتب في عدّة أسطرٍ معًا.
نقل السطر (Alt+↑/↓): يعيد ترتيب الأسطر دون قصٍّ ولصق.
نسخ السطر (Shift+Alt+↑/↓): يكرّر السطر الحاليّ فوقه أو تحته.

لإدارة الواجهة:

فتح الطرفية وإغلاقها (Ctrl+`): وصولٌ سريعٌ إلى واجهة الأوامر المدمجة.
إظهار الشريط الجانبيّ وإخفاؤه (Ctrl+B): لمساحة كتابةٍ أوسع.
تقسيم المحرّر (Ctrl+): لعرض ملفّين جنبًا إلى جنب.

وللوصول إلى القائمة الكاملة وتعديلها اضغط Ctrl+K ثمّ Ctrl+S. ابدأ بالاختصارات الافتراضية، وبعد فترةٍ ستعرف ما تستعمله بكثرة، فتعيّن له اختصاراتٍ تناسب سير عملك.

النسخ المعدّلة ومحرّرات الذكاء الاصطناعي

قد تصادف في بحثك برامج شبيهةً جدًّا بـVS Code بأسماء مختلفة مثل VSCodium وCursor. من المفيد أن تعرف ما هي ولمن، حتى لا تتشتّت في البداية.

VSCodium والخصوصية

هنا تفصيلٌ يخطئ فيه كثيرٌ من الشروحات. شيفرة VS Code المصدريّة مفتوحةٌ برخصة MIT، لكنّ النسخة التي تنزّلها من مايكروسوفت ليست هي ذاتها: تبنيها مايكروسوفت من تلك الشيفرة وتضيف إليها شعارها وأكواد تتبّعٍ (Telemetry تعمل افتراضيًّا) وسوق إضافاتها الخاصّ. أمّا VSCodium فهو بناءٌ مجتمعيٌّ للشيفرة نفسها دون هذه الإضافات الاحتكاريّة ودون تتبّع.^[6]

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

محرّرات الذكاء الاصطناعي: مثال Cursor

ثمّة موجةٌ من المحرّرات تأخذ شيفرة VS Code وتدمج فيها الذكاء الاصطناعيّ بعمق، وأشهرها اليوم Cursor: نسخةٌ معدّلةٌ مصمّمةٌ لتكون «AI-first»، تتيح أن تحادث الذكاء الاصطناعيّ داخل المحرّر ليكتب لك شيفرةً أو يصحّح خطأً أو يجيب عن سؤالك.

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

الزبدة: ابدأ بـVS Code الرسميّ؛ هو الأداة القياسية والمثاليّة للتعلّم. واترك استكشاف VSCodium وCursor لمرحلةٍ لاحقةٍ بعد أن تتقن الأساس.

الأداة في يدك، فإلى الطرفية

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

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

المصادر

GitHub: رخصة VS Code (MIT). الشيفرة المصدرية مفتوحةٌ برخصة MIT.
Visual Studio Code: صفحة التحميل الرسمية. حُزم التثبيت لكل الأنظمة.
VS Code Docs: واجهة المستخدم. تسمية مناطق الواجهة الخمس ووظائفها.
VS Code Docs: الإعدادات ومزامنتها. ملفّ settings.json وميزة Settings Sync.
VS Code Docs: اختصارات لوحة المفاتيح. مرجع الاختصارات الافتراضية وتخصيصها.
VSCodium: الموقع الرسميّ. البناء المفتوح بلا تتبّع، واعتماده على سجلّ Open VSX.

إعداد VS Code وإتقانه: دليل المطوّر العمليّ