كيفية إعداد Visual Studio Code على Mac لتطوير الويب الاحترافي

إعداد بيئة تطوير ويب على Mac باستخدام Visual Studio Code ليس أمرًا معقدًا، لكن الفرق بين “لقد قمت بتثبيته” و”لقد قمت بإعداده للعمل بجدية” يستغرق ساعات عدة وبعض التعديلات التي نادرًا ما يخبرك بها أحد. هذا الدليل يتناول بالضبط ذلك: تجهيز VS Code لكتابة الشيفرة البرمجية الحقيقية على MacBook بمعالج Apple Silicon، مع إضافات مفيدة (وليس الأربعين الشائعة)، وتكامل مع الطرفية Zsh وHomebrew، وإعدادات تصمد أمام مشاريع React أو Vue أو Node.js الحقيقية.

الوقت المقدر: من 30 إلى 45 دقيقة إذا بدأت من الصفر. صالح لـ macOS Sequoia 15.x وVentura 13.x على أي Mac بشريحة M1 أو M2 أو M3 أو M4.

المتطلبات المسبقة

قبل لمس VS Code، من الأفضل أن يكون Mac مهيأً بالحد الأدنى.

macOS 13 Ventura أو أحدث. يعمل VS Code على إصدارات أقدم، لكن كثيرًا من الإضافات الحديثة تتطلب الإصدار 13 فما فوق.
أدوات سطر الأوامر لـ Xcode. تُثبَّت تلقائيًا في أول مرة تنفذ فيها git في الطرفية، أو يدويًا باستخدام xcode-select --install.
تثبيت Homebrew. وهي أنظف طريقة لإدارة Node وGit والأدوات المساعدة. التعليمات على brew.sh.
حساب GitHub إذا كنت ستستخدم Copilot أو مزامنة الإعدادات.

بطاقة سريعة للبيئة الموصى بها:

المكوّن	الإصدار الموصى به (2026)
macOS	Sequoia 15.4 أو أحدث
Visual Studio Code	1.95+ (Universal / Apple Silicon)
Node.js	22 LTS
Git	2.47+
Shell	Zsh (الافتراضي في macOS)
Homebrew	4.4+

تنزيل الإصدار الصحيح لـ Apple Silicon

هنا يقع الكثير من الأخطاء. اذهب إلى code.visualstudio.com وحمّل الملف الثنائي Apple Silicon، وليس نسخة Intel أو Universal. نسخة Universal تعمل، لكنها أكبر بالضعف ولا تضيف شيئًا إذا كان Mac لديك من طراز M1 أو M2 أو M3 أو M4.

للتحقق من الشريحة: قائمة Apple ← حول هذا الماك. إذا رأيت “Apple M…”، فاختر نسخة Silicon.

بديل عبر Homebrew، وهو أكثر راحة إذا كنت تستخدمه بالفعل:

brew install --cask visual-studio-code

يكتشف Homebrew المعمارية ويحمّل الحزمة الصحيحة. وتحديثه لاحقًا يتم بـ brew upgrade --cask visual-studio-code دون الحاجة إلى تنزيل ملف DMG يدويًا.

التثبيت الأول والإعدادات الأساسية

اسحب VS Code إلى مجلد التطبيقات (إذا استخدمت ملف DMG) وافتحه. عند أول تشغيل:

اقبل فتح التطبيق الذي تم تنزيله من الإنترنت.
اختر السمة. Default Dark Modern مناسبة؛ وإذا كنت تعمل كثيرًا في النهار، فإن GitHub Light Default أقل إجهادًا للعين.
تخطَّ خطوة المزامنة الآن، وسنتناولها لاحقًا.

أول ما ينبغي فعله: تفعيل الأمر code في الطرفية. افتح لوحة الأوامر بـ ⌘ + Shift + P، واكتب “shell command”، واختر Shell Command: Install ‘code’ command in PATH. بعد ذلك، يفتح لك code . من أي مجلد المشروع في VS Code.

إعداد التكامل مع Zsh والطرفية

يستخدم macOS الصدفة Zsh افتراضيًا منذ Catalina. يكتشفها VS Code، لكن من المستحسن ضبط الطرفية المدمجة.

افتح الإعدادات بـ ⌘ + , وابحث عن:

terminal.integrated.defaultProfile.osx ← اجعلها zsh.
terminal.integrated.fontSize ← 13 أو 14 إذا كانت شاشتك Retina مقاس 14 بوصة.
terminal.integrated.fontFamily ← MesloLGS NF إذا كنت ستستخدم Powerlevel10k، أو اترك خط النظام.

للحصول على تجربة جيدة مع Zsh، ثبّت Oh My Zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

وأضف إضافتين تُستخدمان كثيرًا: zsh-autosuggestions وzsh-syntax-highlighting. تُثبَّتان عبر Homebrew (brew install zsh-autosuggestions zsh-syntax-highlighting) وتُفعَّلان بإضافة سطرين في نهاية ملف ~/.zshrc. توضح الوثائق الرسمية لكل منهما المسار الدقيق حسب نظامك.

أعد تشغيل الطرفية المدمجة في VS Code (⌃ + ` لفتحها) وستحصل على الإكمال الذكي.

تثبيت Node.js عبر Homebrew (ولماذا ليس عبر المثبّت الرسمي)

يمكنك تنزيل ملف .pkg من nodejs.org، نعم. لكن إذا أردت يومًا الانتقال من Node 22 إلى Node 24، أو الاحتفاظ بنسختين لمشروعين مختلفين، فستندم على ذلك.

الخيار المنطقي هو nvm (Node Version Manager):

brew install nvm
mkdir ~/.nvm

أضف إلى ~/.zshrc:

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"

أعد التحميل بـ source ~/.zshrc، وعندها يمكنك تنفيذ nvm install 22، وnvm use 22، وnvm install 20، والتبديل بين الإصدارات حسب المشروع. يكتشفه VS Code تلقائيًا في الطرفية المدمجة.

الإضافات الأساسية لتطوير الويب

الفخ هنا هو تثبيت عشرين إضافة “احتياطًا”. يتباطأ VS Code وتتعارض كثير منها فيما بينها. هذه هي الإضافات التي تضيف قيمة حقيقية:

أساس أي مشروع ويب:

ESLint (Microsoft) — فحص أخطاء JS/TS. ضرورية.
Prettier – Code formatter — تنسيق تلقائي. اضبطها كمنسّق افتراضي.
EditorConfig for VS Code — تحترم ملفات .editorconfig في المشاريع الأخرى.
GitLens — سجل Git داخل المحرر. النسخة المجانية تكفي.

لـ React / Next.js:

ES7+ React/Redux/React-Native snippets — مقتطفات سريعة (rafce وما شابه).
Simple React Snippets إذا كنت تفضل شيئًا أخف.

لـ Vue:

Vue – Official (كانت تُسمى Volar سابقًا). ثبّتها وعطّل Vetur إن كانت مثبّتة.
TypeScript Vue Plugin (Volar) إذا كنت تعمل مع TS.

لـ Node.js:

REST Client — اختبار نقاط النهاية دون مغادرة VS Code، كبديل لـ Postman.
DotENV — تلوين صياغة ملفات .env.

جودة الحياة:

Path Intellisense — يكمل مسارات الملفات تلقائيًا.
Error Lens — يعرض الأخطاء في السطر نفسه وليس فقط كخط تحت النص.
Auto Rename Tag — يعيد تسمية وسوم HTML/JSX المزدوجة.

تجنب حزم “الكل في واحد” مثل “React Extension Pack”. فهي تضيف أشياء لا تستخدمها وتبطئ البدء.

إعدادات settings.json التي تُحدث فرقًا

افتح لوحة الأوامر بـ ⌘ + Shift + P وابحث عن “Preferences: Open User Settings (JSON)”. أضف أو عدّل:

{
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Menlo, monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "editor.linkedEditing": true,
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "workbench.startupEditor": "none",
  "terminal.integrated.fontSize": 13,
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

النقاط الأساسية: formatOnSave مع Prettier يمنع نقاشات الأسلوب، وlinkedEditing يعيد تسمية وسوم HTML كأزواج، وتعطيل الخريطة المصغّرة يوفر مساحة حقيقية على MacBook Air مقاس 13 بوصة.

ثبّت JetBrains Mono عبر brew install --cask font-jetbrains-mono إذا لم تكن لديك. وتعمل Fira Code أو Cascadia Code بشكل جيد مع الروابط (ligatures).

Git وGitHub: مصادقة نظيفة

اضبط هويتك العامة:

git config --global user.name "اسمك"
git config --global user.email "you@email.com"
git config --global init.defaultBranch main

للمصادقة مع GitHub، الطريقة الحديثة هي إضافة GitHub Pull Requests and Issues من Microsoft. عند أول push تفتح تدفق OAuth في المتصفح وتحفظ بيانات الاعتماد في سلسلة مفاتيح macOS. بلا رموز يدوية، وبلا ~/.netrc.

إذا كنت تفضل SSH، فأنشئ المفتاح بـ ssh-keygen -t ed25519 -C "you@email.com" وأضف المفتاح العام في GitHub ← Settings ← SSH keys.

GitHub Copilot والبدائل

يكلّف Copilot 10 دولارات شهريًا (نحو 9.50 يورو في 2026، والفوترة بالدولار) للاستخدام الفردي، ومجانًا للطلاب المعتمدين ولمشرفي المشاريع مفتوحة المصدر الشهيرة. يُثبَّت كإضافة ويُصادَق عليه بحساب GitHub نفسه.

بدائل جدية:

Codeium — مجانية للاستخدام الفردي، وإضافة رسمية في Marketplace.
Continue — مفتوحة المصدر، وتتيح ربط نموذجك الخاص (Claude وGPT-4 أو نماذج محلية عبر Ollama).
Cursor — ليست إضافة، بل نسخة متفرعة كاملة من VS Code. إذا لم يكفِك Copilot، فتستحق التجربة.

لتطوير الواجهات الأمامية للويب، ما زال Copilot الأكثر صقلًا في الإكمال المضمّن. وCodeium قريب جدًا منه ولا تكلّف شيئًا.

مزامنة الإعدادات بين عدة أجهزة Mac

إذا كان لديك MacBook Pro وMac mini، ففعّل Settings Sync: لوحة الأوامر ← “Settings Sync: Turn On”. يمكنك اختيار مزامنة الإعدادات والإضافات والاختصارات والمقتطفات وحالة الواجهة. وتُحفظ في حساب Microsoft أو GitHub.

بديل يدوي إن لم ترغب في حسابات: احفظ ملف settings.json وقائمة الإضافات في مستودع GitHub خاص. تُسرد الإضافات المثبتة بالأمر:

code --list-extensions > extensions.txt

ثم تُعاد تثبيتها على الجهاز الآخر بحلقة بسيطة.

المشكلات الشائعة

VS Code يتباطأ عند فتح المشاريع الكبيرة. استبعد node_modules و.next من الفهرسة في settings.json:

"files.watcherExclude": {
  "**/node_modules/**": true,
  "**/.next/**": true,
  "**/dist/**": true
}

الأمر code لا يعمل في الطرفية. أعد تنفيذ “Shell Command: Install ‘code’ command in PATH”. إذا استمرت المشكلة، فتحقق من أن /usr/local/bin موجود في $PATH.

Prettier لا ينسّق عند الحفظ. تأكد من أنه المنسّق الافتراضي، وأن المشروع لا يحتوي على .prettierignore يستبعد الملف.

الطرفية لا تجد nvm أو node. غالبًا لأن ~/.zshrc لا يُحمَّل. تحقق من أن الطرفية المدمجة تستخدم Zsh وليس Bash: الإعدادات ← ابحث عن terminal.integrated.defaultProfile.osx.

Copilot لا يقترح شيئًا. تحقق من أنك مسجّل الدخول (الأيقونة في الشريط السفلي) وأن لغة الملف ليست ضمن قائمة الاستبعاد في الإضافة.

بدائل VS Code على Mac

VS Code ليس المحرر الوحيد الجيد لـ Mac، وإن كان الأكثر استخدامًا. إذا كان الأداء يهمك كثيرًا، فألقِ نظرة على Zed (أصلي، مكتوب بلغة Rust، ويبدأ في أقل من ثانية). أما لـ JavaScript/TypeScript الثقيل، فما زال WebStorm من JetBrains أقوى في إعادة الهيكلة، وإن كان يكلّف 169 يورو سنويًا للاستخدام الفردي بعد السنة الأولى.

إن كنت تعمل كثيرًا مع الحاويات، فمن المفيد تكملة VS Code بـ Docker Desktop مضبوط جيدًا على Apple Silicon حتى لا يستنزف البطارية. وإذا كنت ستكتب الشيفرة ساعات طويلة يوميًا، فالفرق بين لوحة MacBook ولوحة مفاتيح ميكانيكية خارجية يظهر في المعصمين بعد شهر من الاستخدام.

الأسئلة الشائعة

هل يعمل VS Code جيدًا على MacBook Air M3 بذاكرة 8 غيغابايت؟ نعم، للمشاريع الصغيرة والمتوسطة (React وVue والمواقع الثابتة). أما مع مشاريع monorepo كبيرة أو عدة حاويات Docker نشطة، فستكون 16 غيغابايت موضع ترحيب كبير.

هل يستحق دفع ثمن Copilot إذا كنت أستخدم ChatGPT بالفعل؟ يعتمد ذلك. يدمج Copilot الاقتراحات في السطر أثناء الكتابة، وهذا ما لا يفعله ChatGPT في المتصفح. إذا كنت تنسخ الشيفرة وتلصقها باستمرار بين علامات التبويب، فسيوفر Copilot وقتك. أما إذا كنت تطرح أسئلة متفرقة فقط، فلا.

هل يمكنني استخدام VS Code لتطوير iOS أو تطبيقات Mac الأصلية؟ تقنيًا نعم عبر إضافات Swift، لكن Xcode يبقى ضروريًا للترجمة والتوقيع. أما لـ Swift الخالص دون تطبيقات Apple، فيعمل VS Code مع الإضافة الرسمية لـ Swift بشكل جيد.

كيف أزيل VS Code تمامًا؟ اسحب التطبيق إلى سلة المهملات، واحذف ~/Library/Application Support/Code و~/.vscode. وإذا كنت ثبّته عبر Homebrew، فنفّذ brew uninstall --cask visual-studio-code ثم احذف هذه المجلدات.

هل يستحق VS Code Insiders العناء؟ هذه نسخة الاختبار، وتُحدَّث يوميًا. مفيدة إذا أردت ميزات جديدة قبل أوانها أو كنت مطور إضافات. للعمل اليومي، ابقَ على النسخة المستقرة.