2.1 تثبيت VS Code وإضافاته الأساسية

الشرح

Visual Studio Code (يُختصر VS Code) هو محرر أكواد مجاني طوّرته مايكروسوفت، وأصبح المحرر الأكثر استخداماً بين مطوّري الويب في العالم بفضل خفّته وسرعته ودعمه الممتاز لكل لغات البرمجة تقريباً عبر إضافات (Extensions) يمكن تثبيتها بضغطة واحدة. بعد تحميله وتثبيته من موقعه الرسمي، أول ما ستحتاجه هو إضافتان أساسيتان: Live Server التي ستتعلم استخدامها في الدرس القادم لمعاينة عملك فوراً، وPrettier التي تُعيد تنسيق كودك تلقائياً (المسافات، المحاذاة) ليبدو مرتباً واحترافياً دون أن تفكر في ذلك يدوياً.

عند فتح البرنامج لأول مرة، ستلاحظ شريطاً جانبياً على أحد الجانبين يحتوي على أيقونات: مستكشف الملفات (Explorer) لتصفّح مجلدات مشروعك، البحث (Search) للعثور على كلمة داخل كل ملفاتك دفعة واحدة، Git للتحكم بالإصدارات لاحقاً، والإضافات (Extensions) حيث ستُثبّت Live Server وPrettier. لا تحاول حفظ كل اختصار أو زر من أول يوم — ستتعرف تدريجياً على الأدوات التي تحتاجها فعلاً أثناء البرمجة الفعلية، وهذا أسرع بكثير من محاولة حفظ كل شيء نظرياً مسبقاً.

💡 نقطة مهمة: عند تثبيت إضافة جديدة، ابحث عن الاسم الدقيق (مثلاً "Live Server" بالضبط) وتأكد من عدد التحميلات الكبير والتقييم الجيد قبل التثبيت، لأن هناك أحياناً إضافات بأسماء مشابهة أقل جودة.

🎯 تمرين عملي

ثبّت VS Code والإضافتين المذكورتين، وأنشئ مجلداً جديداً باسم my-first-website على سطح المكتب.

📚 لمزيد من التوسّع

فهرس دروس MDN الأساسية

🧰 روابط تحميل الأدوات التي ستحتاجها

• تحميل Visual Studio Code (محرر الأكواد الأساسي للكورس)
• تثبيت إضافة Live Server من داخل VS Code
• تحميل Git (ستحتاجه لاحقاً لرفع مشروعك على GitHub)
• تحميل Node.js (اختياري في هذا الكورس، لكنه أساس أي تطوير ويب متقدم لاحقاً)
• خادم Apache HTTP Server (اختياري — Live Server يكفي تماماً لهذا الكورس، لكن هذا هو نفس نوع الخادم الذي يستضيف مواقع حقيقية على الإنترنت)

✅ نموذج حل مقترح

تحقق من نفسك: افتح VS Code وانتقل لتبويب Extensions (أيقونة المربعات في الشريط الجانبي) — يجب أن ترى Live Server وPrettier ضمن "Installed". افتح مجلد my-first-website عبر File ← Open Folder وتأكد أنه يظهر فارغاً في مستكشف الملفات (Explorer) على اليسار.