VS Code للويب
درس 7 من 11
7💻 VS Code للويب: بيئة عمل كاملة في المتصفّح
بعد الشل والمحررات النصية تأتي بيئة التطوير الكاملة: محرر ومستكشف ملفات وطرفية في نافذة واحدة داخل المتصفح، وتعمل فوق صندوق Ubuntu مؤقت في السحابة مثل GitHub Codespaces. ستفهم أجزاءها واختصاراتها وحدودها.
ماذا تشاهد في الرسم: شريط النشاط، ثم المستكشف، ثم المحرّر، ثم الطرفية التي تشغّل الملف وتطبع ناتجه.
خارطة هذا الجزء
المفاهيم بالترتيب، اضغط أيًّا منها للقفز إليه:
طريقان إلى نفس الفكرة
بعد أن تعلّمت الكتابة في الطرفية وحدها، يأتي مكتب كامل: على اليسار خزانة ملفاتك، وفي الوسط الورقة التي تكتب فيها، وفي الأسفل الطرفية نفسها. وكل هذا يعمل في المتصفح على حاسوب مستأجر في السحابة، فلا تحتاج أن تثبّت شيئًا على جهازك.
VS Code للويب واجهة VS Code تعمل في المتصفح فوق حاوية Linux مؤقتة مثل GitHub Codespaces. فيها مستكشف الملفات والمحرّر والطرفية المدمجة ولوحة الأوامر Ctrl+Shift+P، والإضافات extensions تزيد الدعم للغات والأدوات. الحاوية تُحذف بعد مدة، فاحفظ عملك في Git.
قبل أن تبدأ
🐚أوامر الشل
الطرفية المدمجة هي نفس الشل الذي تعلمته.
✍️فكرة المحرر
تعرف الآن المخزن والحفظ، و VS Code يعمل بنفس المنطق لكن بالفأرة والاختصارات الحديثة.
🌐متصفح حديث واتصال مستقر
كل شيء يعمل عبر المتصفح، فانقطاع الاتصال يقطع الجلسة.
الفكرة الجوهرية
1أجزاء الواجهة
شريط النشاط (يسار) للتنقل بين المستكشف والبحث والإضافات. الشريط الجانبي يعرض الملفات. منطقة المحرر في الوسط. اللوحة السفلية تضم الطرفية والمشاكل والمخرجات.
2صندوق سحابي مؤقت
في خدمة مثل GitHub Codespaces تعمل بيئتك على Ubuntu في السحابة، لا على جهازك. هي مؤقتة وتُنظَّف بعد فترة محددة، لذا ما لم تحفظه خارجها (مثل Git) قد يختفي. اعتبرها ورشة عمل لا خزانة.
3الطرفية المدمجة
تفتحها بـCtrl+` وتفتح مباشرة على مجلد مشروعك. كل ما تعلمته من أوامر الشل يعمل فيها كما هو، دون التبديل بين نافذتين.
4الإضافات (Extensions)
تضيف دعم لغات وأدوات وتنسيقًا وتدقيقًا. ثبّت قليلًا وبحذر: كل إضافة تعمل بصلاحيات ضمن بيئتك، فاختر الموثوقة من ناشر معروف.
شكل 1، تخطيط VS Code: أربعة أجزاء رئيسية تعمل معًا في نافذة واحدة.
كيف يعمل: الاختصارات ودورة العمل في الصندوق
| الإجراء | الاختصار | ملاحظة |
|---|---|---|
| فتح ملف بالاسم | Ctrl+P | أسرع من تصفح المجلدات |
| لوحة الأوامر | Ctrl+Shift+P | كل أمر في المحرر بالاسم، مثل M-x في Emacs |
| إظهار/إخفاء الطرفية | Ctrl+` | |
| إظهار/إخفاء الشريط الجانبي | Ctrl+B | |
| بحث في الملف / في كل الملفات | Ctrl+F / Ctrl+Shift+F | |
| تعليق السطر | Ctrl+/ | |
| نقل السطر | Alt+↑ / Alt+↓ | |
| حفظ | Ctrl+S | احفظ بعد كل تعديل مهم |
pwd في الطرفية.Ctrl+S.مثال محلول: مواقف شائعة
| الموقف | ما تفعله | لماذا |
|---|---|---|
| ملف لا تتذكر مكانه | Ctrl+P واكتب جزءًا من الاسم | بحث غامض فوري |
| أمر في المحرر لا تعرف اختصاره | Ctrl+Shift+P | كل شيء يظهر بالاسم |
| ظهر خط أحمر تحت الشيفرة | مرر الفأرة أو افتح لوحة المشاكل | تشرح المشكلة وموقعها |
| اختصار لا يعمل في المتصفح | جرّب لوحة الأوامر | المتصفح قد يحجز بعض المفاتيح مثل Ctrl+W |
خرافة مقابل حقيقة
| الخرافة | الحقيقة |
|---|---|
| VS Code للويب هو نفسه الذي على جهازي. | الواجهة متشابهة، لكن الملفات والتشغيل يتمان على خادم بعيد، وبعض الاختصارات والإضافات تختلف أو تتأثر بالمتصفح. |
| المحرر الرسومي يلغي الحاجة إلى الشل. | الطرفية جزء أساسي منه؛ التشغيل والاختبار و Git كلها عبر الأوامر. |
| كل إضافة تجعلني أسرع. | الكثير منها يبطئ المحرر أو يتعارض مع غيره. ثبّت ما تحتاجه فعلًا. |
أين تُستخدم هذه الفكرة فعليًا؟
🏫بيئة موحدة للجميع
الجميع يعمل على نفس نسخة Ubuntu فتقل مشاكل "يعمل عندي".
📱العمل من أي جهاز
يكفي متصفح؛ لا تثبيت ولا إعدادات.
🔍اكتشاف الأخطاء مبكرًا
تلوين الصياغة ولوحة المشاكل تُظهر الخطأ قبل التشغيل.
🌿العمل مع Git
واجهة مدمجة لعرض التغييرات، وطرفية لأوامر Git.
جرّب بنفسك
بيئة VS Code للويب تعمل على صندوق سحابي مؤقت. ماذا يعني ذلك لملفاتك؟
الصندوق ورشة عمل لا خزانة: يُنظَّف بعد فترة، فادفع عملك إلى مستودع بانتظام.
لا تتذكر اختصار أمر في المحرر. ما الحل الأسرع؟
لوحة الأوامر تعرض كل أمر بالاسم، وهي نظير M-x في Emacs.
أي اختصار يفتح ملفًا بالاسم دون تصفح المجلدات؟
Ctrl+P بحث غامض فوري عن اسم الملف. Ctrl+B يخفي الشريط الجانبي، وCtrl+S يحفظ، وCtrl+/ يعلّق السطر.
بطاقات مراجعة سريعة
Ctrl+Shift+PCtrl+`Ctrl+P ثم جزء من الاسم.تحقق من فهمك
لماذا يجب أن تدفع عملك إلى Git قبل إنهاء الجلسة؟
لأن الصندوق مؤقت وقد يُنظَّف؛ المستودع هو النسخة الدائمة.
كيف تتصرف إذا نسيت اختصارًا؟
افتح لوحة الأوامر وابحث باسم الأمر.
ما الفرق العملي بين الطرفية المدمجة وفتح طرفية منفصلة؟
المدمجة تبدأ في مجلد مشروعك وتظل بجانب الملفات، فتوفر التنقل بين النوافذ.
مصادر هذا الدرس
مرتّبة بالنوع. ابدأ بالتوثيق الرسمي إذا تبي المرجع الدقيق، وبالمقال أو الفيديو إذا تبي الشرح أولًا.
توثيق رسمي2
خلّصت الدرس؟
سجّل الدخول ليُحفظ تقدّمك.