مرحباً بك في هذا الدليل الشامل. في عالم تطوير الويب، لا يكفي أن تكتب الكود فقط، بل تحتاج إلى بيئة عمل قوية تسهل عليك كتابة وتجربة الأكواد. هنا يأتي دور Visual Studio Code (VS Code)، محرر الأكواد المجاني ومفتوح المصدر الذي طورته شركة مايكروسوفت، والذي يعتبر الخيار الأول لملايين المبرمجين حول العالم.
في هذا الشرح المفصل، سنأخذك في رحلة من الصفر حتى الاحتراف، ونشرح لك كل صغيرة وكبيرة في هذا البرنامج الرائع، بدءاً من التحميل والتثبيت، مروراً بالإعدادات الأساسية، وصولاً إلى الإضافات التي تحوله إلى بيئة تطوير متكاملة.
تخيل أنك تريد بناء تطبيق ويب. أنت بحاجة إلى مكان تكتب فيه الكود، وتصحح الأخطاء، وتختبر النتيجة. (VS Code) هو هذا المكان. هو ليس مجرد "مفكرة" نصية، بل هو بيئة تطوير متكاملة (IDE) خفيفة الوزن، تدعم جميع لغات البرمجة تقريباً (JavaScript, Python, C++, HTML/CSS) من خلال نظام الإضافات (Extensions).
ببساطة، (VS Code) هو "السكين السويسري" للمطورين. يمكنك من خلاله كتابة الكود، وإدارة الملفات، وتشغيل الأوامر في الطرفية (Terminal)، وحتى إدارة إصدارات الكود باستخدام (Git)، كل ذلك من داخل نافذة واحدة.
لبدء العمل، اذهب إلى الموقع الرسمي (code.visualstudio.com) وقم بتحميل النسخة المناسبة لنظامك (Windows, macOS, Linux).
⬇️ تحميل VS Code (رسمي)بعد تثبيت البرنامج، يمكنك تثبيت هذه الإضافات من أيقونة الإضافات (Extensions) في القائمة الجانبية:
لفهم (VS Code)، عليك أن تتخيله كصفحة ويب، ولكن بصلاحيات أكبر. الواجهة مقسمة إلى عدة أجزاء:
VS Code مليء بالاختصارات التي توفر الوقت. يمكنك استعراضها وتعديلها من القائمة File > Preferences > Keyboard Shortcuts. ننصحك بحفظ الاختصارات الخاصة بتشغيل الأكواد والتعليقات.
بعد أن قمت بتثبيت إضافة (Python)، قم بإنشاء مجلد جديد على جهازك، وافتحه في VS Code من القائمة File > Open Folder. ثم قم بإنشاء ملف جديد وسمّه test.py.
اكتب الكود التالي داخل الملف:
لحفظ الملف اضغط Ctrl + S، ثم لتشغيله اضغط على زر التشغيل ▶️ في أعلى اليمين أو استخدم اختصار Ctrl + F5. ستلاحظ ظهور النتيجة في نافذة الطرفية بالأسفل. مبروك، لقد كتبت أول كود لك!
لكي تكون محترفاً في (VS Code)، يجب أن تفهم كل زر وكل إضافة فيه. إليك شرح مفصل لكل إضافة:
هي الإضافة الأساسية لدعم لغة بايثون. توفر لك الإكمال التلقائي، وتصحيح الأخطاء، وتشغيل الأكواد بضغطة زر.
إذا كنت تعمل على صفحات HTML/CSS، هذه الإضافة تشغل لك سيرفر محلي وتفتح الصفحة في المتصفح مباشرة، وتقوم بتحديثها تلقائياً عند أي تعديل.
هي أداة لتنسيق الكود تلقائياً. بمجرد الحفظ، ستقوم بترتيب الكود وإضافة المسافات اللازمة، مما يجعله مقروءاً وسهل التعديل.
إذا كنت تستخدم Git، هذه الإضافة تظهر لك من قام بتعديل كل سطر في الكود، ومتى تم التعديل، مما يسهل تتبع الأخطاء.
لنفترض أنك تريد بناء موقع ويب بسيط. اتبع الخطوات التالية:
index.html واكتب فيه هيكل الصفحة.style.css واكتب فيه التنسيقات.هذا هو جوهر العمل في VS Code. يمكنك تجربة تغيير الكود ورؤية النتيجة مباشرة.
نعم، (VS Code) مفتوح المصدر ومجاني تماماً.
(VS Code) هو محرر أكواد خفيف، بينما (Visual Studio) هو بيئة تطوير متكاملة (IDE) ثقيلة تستخدم للمشاريع الضخمة (مثل تطبيقات Windows).
لا، يمكنك استخدامه محلياً بدون إنترنت. تحتاج الإنترنت فقط لتحميل الإضافات.
هل بدأت باستخدام (VS Code) في مشاريعك؟ شاركنا تجربتك في التعليقات!