كيفية تثبيت برنامج Visual Studio Code على نظام Mac – techsyncer

إذا كنت مطورًا أو مبرمجًا ، فمن المحتمل أنك تبحث دائمًا عن أدوات جديدة لتسهيل سير عملك. لك الحظ ، إذ أن أحد أفضل محررات الشيفرة التي يمكنك العثور عليها هو “فيوال ستوديو كود” على نظام Mac.

“فيوال ستوديو كود” (VS Code) يقدم العديد من الميزات لمساعدتك في كتابة الشيفرة بشكل أكثر فعالية. وفي هذا المقال ، ستتعلم كيفية تثبيت “فيوال ستوديو كود” على جهازك Mac وتجربة بعض أفضل الامتدادات والسمات للبدء.

تابع القراءة واستعد لرفع مستوى سير عملك!

المتطلبات الأساسية

سيكون هذا البرنامج التعليمي عرضًا تفاعليًا. إذا كنت ترغب في متابعة التعليمات ، تأكد من أن لديك جهاز Mac. يستخدم هذا البرنامج التعليمي نسخة Apple Silicon (M1) ، لذا قد تكون الخطوات مختلفة قليلاً إذا كان لديك Mac يعتمد على معالج Intel.

تحميل “فيوال ستوديو كود” لنظام Mac

“فيوال ستوديو كود” (VS Code) هو محرر شيفرة مفتوح المصدر ومجاني من Microsoft متاح لنظامي التشغيل Windows و Linux و macOS. ولكن مثل غيرها من الأدوات ، ستحتاج إلى تنزيل وتثبيت “فيوال ستوديو كود” على نظامك.

1. افتح متصفح الويب المفضل لديك ، وانتقل إلى صفحة تنزيل فيوال ستوديو كود.

2. بعد ذلك ، انقر فوق “Apple Silicon” تحت رمز Mac لتنزيل مثبت حزمة “فيوال ستوديو كود” لنظام Mac في ملف ZIP. هذا الإصدار Apple Silicon (M1) هو آخر شريحة قامت بتطويرها Apple.

إذا كان لديك Mac أقدم بمعالج Intel ، فانقر فوق Intel Chip بدلاً من ذلك.

3. في النهاية، افتح الـ terminal الخاص بك وقم بتشغيل الأمر ls التالي للتحقق من مثبت حزمة VS Code الذي قمت بتنزيله.

ls -la ~/Downloads/VSCode-darwin-arm64.zip

يظهر الإخراج أدناه موقع ملف الضغط.

تثبيت برنامج Visual Studio Code على Mac

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

ميزة رائعة أخرى في VS Code هي أنه يدعم العديد من لغات البرمجة من خلال استخدام التمديدات التي يمكنك العثور عليها في السوق.

لتثبيت VS Code على Mac:

1. حدد ملف VS Code zip المُنزّل → انقر فوق أيقونة النقاط الثلاث (أعلى اليمين) → فتح لفك ضغط ملف ZIP.

بمجرد فك الضغط، يجب أن يكون لديك تطبيق جديد لمايكروسوفت فيجوال ستوديو كود في مجلد التنزيلات الخاص بك.

٢. بعد ذلك، قم بتشغيل أمر ls أدناه للتحقق من ملف التطبيق. يقوم هذا الأمر بسرد محتويات ملف تطبيق Visual Studio Code.

يعتبر الرمز \ رمز الهروب الذي يخبر الطرفية بمعاملة المسافة كحرف عادي. يجب عليك استخدام رمز الهروب عند وجود مسافة في اسم الملف.

ls -la ~/Downloads/Visual\ Studio\ Code.app

Listing the contents of the Visual Studio Code application file

٣. قم بتشغيل الأمر open أدناه لتشغيل المثبت في نسخة جديدة (-n).

open -n ~/Downloads/Visual\ Studio\ Code.app

٤. الآن، انقر على فتح للاستمرار في التثبيت عندما تظهر لك الرسالة أدناه.

تظهر هذه التحذيرات لأنك قمت بتنزيل التطبيق من الإنترنت، والتي يمكنك تجاهلها بأمان.

بمجرد التثبيت، يتم فتح تطبيق VS Code، وسترحب بك بصفحة “ابدأ” أدناه.

تصفح واجهة المستخدم الرسومية لـ VS Code

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

يأتي رمز VS Code مع العديد من الميزات التي تتيح لك:

– اختيار السمات وتغيير مظهر محرر النصوص الخاص بك.

– فتح مجلد مشروعك، حتى تتمكن من الانتقال بسرعة إلى ملفاتك والتأكد من صحة هيكل الملف الخاص بك.

– إضافة نظام التحكم في الإصدار، مثل Git.

أضف الامتدادات بسرعة من السوق، وهكذا.

هذه مجرد جزء صغير مما يمكن أن يقدمه VS Code. اكتشف بنفسك كيف يساعدك كل ميزة في سير عملك. قد يكون تغيير السمة هو بداية جيدة.

1. حدد سمة لمحررك كما ترغب من صفحة البدء، واحتفظ بالإعدادات الأخرى على القيم الافتراضية وانقر على تأشير كمكتمل (أسفل اليسار).

إذا لم تكن السمات الفاتحة والداكنة تناسب ذوقك جيدًا، انقر على انظر المزيد من السمات وابحث عن واحدة تثير اهتمامك.

2. بعد ذلك، استكشف الجانب الأقصى الأيسر من VS Code، وهو شريط الأنشطة Activity Bar الذي يحتوي على سبعة أقسام رئيسية. ولكن ابدأ بأحد الأقسام الأهم، وهو EXPLORER (Ctrl+Shift+E / Cmd+Shift+E).

يعرض المستكشف الملفات والمجلدات في مشروعك، حيث يمكنك استنساخ مستودع. بالإضافة إلى ذلك، يتيح لك المستكشف أداء إجراءات مختلفة على النحو التالي:

إنشاء وحذف وإعادة تسمية الملفات والمجلدات في مشروعك.

نقل الملفات والمجلدات عن طريق سحبها وإفلاتها داخل مجلد المشروع الخاص بك.

يرجى ملاحظة أن “السحب والإفلات” يعمل عند نقل الملفات إلى المستكشف من خارج VS Code. ولكن إذا كان المستكشف فارغًا، يفتح VS Code الملف في المحرر بدلاً من ذلك.

3. انقر على أيقونة البحث (Ctrl+Shift+F / Cmd+Shift+F)، مما يفتح قسم البحث، حيث يمكنك البحث في مشروعك عن ملفات ورموز ونصوص.

4. الآن، انقر على أيقونة التحكم في المصدر (Ctrl+Shift+G / Cmd+Shift+G) لفتح قسم التحكم في المصدر، حيث يمكنك إدارة مشروعك باستخدام Git أو نظام تحكم في المصدر آخر.

يأتي VS Code مع إدارة تحكم في المصدر (SCM) مدمجة مع دعم Git مضمنًا افتراضيًا.

5. بعد SCM، انقر على أيقونة التشغيل والتصحيح (Ctrl+Shift+D / Cmd+Shift+D)، مما يفتح قسم التشغيل والتصحيح: قسم التشغيل، حيث يمكنك تشغيل مشروعك وتصحيحه.

6. أخيرًا، انقر على أيقونة التمديدات (Ctrl+Shift+X / Cmd+Shift+X) للوصول إلى قسم التمديدات، حيث يمكنك تثبيت التمديدات من السوق.

تشغيل VS Code عبر بيئة سطر الأوامر

ربما تقضي معظم وقتك في بيئة سطر الأوامر ولكن تحتاج إلى كتابة بعض الشفرات بسرعة. إذا كان الأمر كذلك، فتكوين VS Code للتشغيل عبر بيئة سطر الأوامر سيكون مفيدًا لك.

1. اضغط (Cmd+Shift+P أو Ctrl+Shift+P) على VS Code لفتح لوحة الأوامر، حيث يمكنك الوصول إلى جميع وظائف VS Code.

2. اكتب Shell Command: Install ‘code’ command in PATH في لوحة الأوامر، ثم اضغط Enter. يضيف هذا الأمر ملف تنفيذي لـ VS Code إلى متغير PATH في نظامك.

Adding the VS Code executable to your system’s PATH variable

3. بمجرد إضافتها، أعد تشغيل الطرفية الخاصة بك لتطبيق التغييرات. الأمر code متوفر الآن في الطرفية الخاصة بك.

4. الآن، قم بإنشاء ملف نصي، أضف بعض النص، ثم احفظ وأغلق الملف.

5. في النهاية، قم بتشغيل الأوامر التالية لتشغيل VS Code (code)، مرر مسار الملف النصي (text.txt)، في هذه الحالة، من دليل العمل.

# التحول إلى الدليل الذي قمت بحفظ الملف النصي فيه
cd Downloads
# تشغيل VS Code وفتح الملف النصي
code . text.txt

سوف ترى VS Code (على اليمين) مفتوح مع محتويات ملفك text.txt معروضة في نافذة المحرر. يمكنك الآن تحرير هذا الملف باستخدام ميزات VS Code الرائعة.

Launching VSCode via the command-line environment

تثبيت الامتدادات لإضافة وظائف إضافية

واحد من أفضل الأشياء حول VS Code هو أنه قابل للتخصيص بشكل كبير. كيف؟ يمكنك تثبيت الامتدادات لإضافة وظائف جديدة، وهناك العديد من الامتدادات المختلفة المتاحة.

ربما ترغب في تثبيت امتداد مُختار الألوان لنظام macOS. يتيح لك هذا الامتداد اختيار مختارات الألوان الأصلية في macOS عند العمل مع ملفات CSS و HTML و JavaScript.

1. انتقل إلى قائمة الامتدادات في شريط النشاط، الذي يحتوي على ثلاثة أقسام:

المثبتة – تظهر هذه القسم الامتدادات المثبتة بالفعل.

المُقترَح – تظهر هذه القسم تمديدات مُقتَرَحة استنادًا إلى نوع الملف الذي فُتِح. على سبيل المثال، سترى تمديدات JavaScript المُقتَرَحة إذا كنت تعمل على ملف JavaScript.

شائعة – يظهر هذا القسم أكثر تمديدات VS Code شيوعًا.

2. اكتب “منتقى الألوان macOS” في مربع البحث واضغط على Enter. سيتم عرض قائمة بالتمديدات المطابقة بترتيب تنازلي (أولى التمديدات الأكثر تطابقًا أولاً).

بمجرد رؤية التمديد المستهدف، انقر فوق زر التثبيت بجوار التمديد. يتغير زر التثبيت إلى زر تمكين أخضر، لذا انقر عليه لتمكين التمديد.

Installing the macOS Color Picker extension.

بعد تثبيت التمديد، يظهر صفحة نظرة عامة عن التمديد على اليمين، كما هو موضح أدناه.

Verifying the macOS Color Picker is installed

3. الآن افتح ملف CSS أو HTML أو JavaScript لاختبار تمديد منتقى الألوان macOS الجديد.

4. في الختام، افتح لوحة الأوامر (Cmd+Shift+P / Ctrl+Shift+P)، اكتب “فتح منتقى الألوان”، واضغط على Enter. تفتح نافذة منتقى الألوان macOS، كما هو موضح أدناه.

استخدم منتقى الألوان لتحديد لون، وسيتم إدراجه في شيفرتك. يُعد هذا التمديد وسيلة رائعة للحصول بسرعة على قيم الألوان التي تحتاجها دون الحاجة إلى حفظ رموز الهيكس.

Testing the new macOS Color Picker extension

الختام

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

ولكن لا تتوقف هنا! مع هذه المعرفة الجديدة، لماذا لا تستخدم نظام التحكم في النسخ باستخدام Git و GitHub لتتبع عملك؟