Comment configurer Visual Studio Code sur Mac pour le développement web professionnel

Mettre en place un environnement de développement web sur Mac avec Visual Studio Code n’est pas compliqué, mais entre « je l’ai installé » et « je l’ai configuré pour travailler sérieusement », il y a plusieurs heures et quelques réglages dont presque personne ne parle. Ce guide vise exactement cela : rendre VS Code prêt à écrire du vrai code sur un MacBook avec Apple Silicon, avec des extensions utiles (pas les 40 à la mode), une intégration avec le terminal Zsh et Homebrew, et une configuration qui tient la route pour des projets réels en React, Vue ou Node.js.

Durée estimée : entre 30 et 45 minutes si vous partez de zéro. Valable pour macOS Sequoia 15.x et Ventura 13.x sur tout Mac équipé d’une puce M1, M2, M3 ou M4.

Prérequis

Avant de toucher à VS Code, mieux vaut que le Mac soit un minimum préparé.

macOS 13 Ventura ou supérieur. VS Code fonctionne sur des versions antérieures, mais beaucoup d’extensions récentes demandent la 13 ou plus.
Command Line Tools de Xcode. Elles s’installent d’elles-mêmes la première fois que vous exécutez git dans le terminal, ou manuellement avec xcode-select --install.
Homebrew installé. C’est la voie la plus propre pour gérer Node, Git et les utilitaires. Instructions sur brew.sh.
Compte GitHub si vous comptez utiliser Copilot ou synchroniser vos réglages.

Fiche rapide de l’environnement recommandé :

Composant	Version recommandée (2026)
macOS	Sequoia 15.4 ou supérieur
Visual Studio Code	1.95+ (Universal / Apple Silicon)
Node.js	22 LTS
Git	2.47+
Shell	Zsh (par défaut sur macOS)
Homebrew	4.4+

Télécharger la bonne version pour Apple Silicon

C’est ici que les erreurs commencent. Rendez-vous sur code.visualstudio.com et téléchargez le binaire Apple Silicon, et non l’Intel ni l’Universal. L’Universal fonctionne, mais il pèse le double et n’apporte rien si votre Mac est un M1, M2, M3 ou M4.

Pour vérifier votre puce : menu Pomme → À propos de ce Mac. Si vous voyez « Apple M… », vous êtes sur Silicon.

Alternative via Homebrew, plus pratique si vous l’utilisez déjà :

brew install --cask visual-studio-code

Homebrew détecte l’architecture et télécharge le bon paquet. De plus, la mise à jour ensuite se fait avec brew upgrade --cask visual-studio-code, sans devoir retélécharger le DMG à la main.

Première installation et réglages de base

Glissez VS Code dans Applications (si vous avez utilisé le DMG) et ouvrez-le. Au premier lancement :

Acceptez d’ouvrir l’application téléchargée depuis Internet.
Choisissez un thème. Default Dark Modern convient bien ; si vous travaillez beaucoup de jour, GitHub Light Default fatigue moins la vue.
Passez l’étape de synchronisation pour l’instant, nous la verrons plus tard.

La première chose utile à faire : activer la commande code dans le terminal. Ouvrez la palette de commandes avec ⌘ + Maj + P, tapez « shell command » et choisissez Shell Command: Install ‘code’ command in PATH. Ensuite, code . depuis n’importe quel dossier ouvre le projet dans VS Code.

Configurer l’intégration avec Zsh et le terminal

macOS utilise Zsh par défaut depuis Catalina. VS Code le détecte, mais il vaut la peine d’affiner le terminal intégré.

Ouvrez les Réglages avec ⌘ + , et cherchez :

terminal.integrated.defaultProfile.osx → mettez zsh.
terminal.integrated.fontSize → 13 ou 14 si votre écran est un Retina de 14″.
terminal.integrated.fontFamily → MesloLGS NF si vous comptez utiliser Powerlevel10k, sinon laissez la police du système.

Pour une expérience correcte avec Zsh, installez Oh My Zsh :

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

Ajoutez ensuite deux plugins très utilisés : zsh-autosuggestions et zsh-syntax-highlighting. Ils s’installent avec Homebrew (brew install zsh-autosuggestions zsh-syntax-highlighting) et s’activent en ajoutant deux lignes à la fin de votre ~/.zshrc. La documentation officielle de chacun précise le chemin exact selon votre système.

Redémarrez le terminal intégré de VS Code (⌃ + ` pour l’ouvrir) et vous disposerez d’une complétion intelligente.

Installer Node.js avec Homebrew (et pourquoi pas avec l’installeur officiel)

Vous pouvez bien sûr télécharger le .pkg sur nodejs.org. Mais si un jour vous voulez passer de Node 22 à Node 24, ou garder deux versions pour deux projets, vous le regretterez.

L’option raisonnable est nvm (Node Version Manager) :

brew install nvm
mkdir ~/.nvm

Ajoutez à votre ~/.zshrc :

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

Rechargez avec source ~/.zshrc et vous pouvez alors faire nvm install 22, nvm use 22, nvm install 20, changer de version par projet, etc. VS Code le détecte automatiquement dans le terminal intégré.

Extensions essentielles pour le développement web

Le piège consiste à installer vingt extensions « au cas où ». VS Code ralentit et beaucoup se marchent dessus. Voici celles qui apportent une vraie valeur :

Base pour tout projet web :

ESLint (Microsoft) — linting de JS/TS. Indispensable.
Prettier – Code formatter — formatage automatique. Configurez-le comme formateur par défaut.
EditorConfig for VS Code — respecte les .editorconfig des projets tiers.
GitLens — historique Git dans l’éditeur. La version gratuite suffit largement.

Pour React / Next.js :

ES7+ React/Redux/React-Native snippets — snippets rapides (rafce et compagnie).
Simple React Snippets si vous préférez quelque chose de plus léger.

Pour Vue :

Vue – Official (anciennement Volar). Installez-la et désactivez Vetur si vous l’avez.
TypeScript Vue Plugin (Volar) si vous travaillez avec TS.

Pour Node.js :

REST Client — tester des endpoints sans quitter VS Code, alternative à Postman.
DotENV — coloration syntaxique des fichiers .env.

Confort de travail :

Path Intellisense — complète les chemins de fichiers.
Error Lens — affiche les erreurs sur la ligne et pas seulement en soulignement.
Auto Rename Tag — renomme les balises HTML/JSX par paire.

Évitez les packs « tout-en-un » type « React Extension Pack ». Ils installent des choses que vous n’utiliserez pas et ralentissent le démarrage.

Les réglages settings.json qui font la différence

Ouvrez la palette avec ⌘ + Maj + P et cherchez « Preferences: Open User Settings (JSON) ». Ajoutez ou ajustez :

{
  "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" }
}

Points clés : formatOnSave avec Prettier évite les débats de style, linkedEditing renomme les balises HTML par paire, et désactiver la minicarte libère un vrai espace sur un MacBook Air de 13″.

Installez JetBrains Mono avec brew install --cask font-jetbrains-mono si vous ne l’avez pas. Fira Code ou Cascadia Code fonctionnent aussi très bien avec les ligatures.

Git et GitHub : une authentification propre

Configurez votre identité globale :

git config --global user.name "Votre Nom"
git config --global user.email "vous@email.com"
git config --global init.defaultBranch main

Pour vous authentifier auprès de GitHub, la voie moderne est l’extension GitHub Pull Requests and Issues de Microsoft. Au premier push, elle lance le flux OAuth dans le navigateur et enregistre les identifiants dans le Trousseau macOS. Pas de jetons manuels, pas de ~/.netrc.

Si vous préférez SSH, générez la clé avec ssh-keygen -t ed25519 -C "vous@email.com" et ajoutez la clé publique dans GitHub → Settings → SSH keys.

GitHub Copilot et alternatives

Copilot coûte 10 $ par mois (environ 9,50 € en 2026, facturation en dollars) pour un usage individuel, gratuit pour les étudiants vérifiés et les mainteneurs de projets open source populaires. Il s’installe comme extension et s’authentifie avec le même compte GitHub.

Alternatives sérieuses :

Codeium — gratuit pour un usage individuel, extension officielle sur le Marketplace.
Continue — open source, permet de connecter votre propre modèle (Claude, GPT-4, modèles locaux via Ollama).
Cursor — ce n’est pas une extension mais un fork complet de VS Code. Si Copilot vous paraît insuffisant, il mérite un essai.

Pour le développement frontend web, Copilot reste le plus abouti en complétion en ligne. Codeium n’est pas loin et ne coûte rien.

Synchroniser les réglages entre plusieurs Mac

Si vous avez un MacBook Pro et un Mac mini, activez Settings Sync : palette de commandes → « Settings Sync: Turn On ». Vous pouvez choisir de synchroniser les réglages, les extensions, les raccourcis, les snippets et l’état de l’interface. Les données sont enregistrées sur votre compte Microsoft ou GitHub.

Alternative manuelle si vous ne voulez pas de compte : enregistrez votre settings.json et la liste de vos extensions dans un dépôt privé GitHub. Les extensions installées se listent avec :

code --list-extensions > extensions.txt

Et on les réinstalle sur l’autre Mac avec une boucle simple.

Problèmes courants

VS Code est lent à l’ouverture de gros projets. Excluez node_modules et .next de l’indexation dans settings.json :

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

La commande code ne fonctionne pas dans le terminal. Relancez « Shell Command: Install ‘code’ command in PATH ». Si le problème persiste, vérifiez que /usr/local/bin figure dans votre $PATH.

Prettier ne formate pas à la sauvegarde. Vérifiez qu’il est défini comme formateur par défaut et que le projet n’a pas de .prettierignore qui exclut le fichier.

Le terminal ne trouve pas nvm ni node. C’est généralement parce que ~/.zshrc n’est pas chargé. Vérifiez que le terminal intégré utilise Zsh et non Bash : Réglages → cherchez terminal.integrated.defaultProfile.osx.

Copilot ne propose rien. Vérifiez que vous êtes authentifié (icône dans la barre inférieure) et que le langage du fichier ne figure pas dans la liste d’exclusion de l’extension.

Alternatives à VS Code sur Mac

VS Code n’est pas le seul éditeur correct sur Mac, même s’il est le plus utilisé. Si les performances comptent beaucoup pour vous, jetez un œil à Zed (natif, écrit en Rust, démarre en moins d’une seconde). Pour du JavaScript/TypeScript lourd, WebStorm de JetBrains reste plus puissant en refactorisation, mais il coûte 169 € par an pour un usage individuel après la première année.

Si vous travaillez beaucoup avec des conteneurs, pensez à compléter VS Code avec Docker Desktop bien configuré sur Apple Silicon pour qu’il ne vide pas votre batterie. Et si vous codez plusieurs heures par jour, la différence entre le clavier du MacBook et un clavier mécanique externe se fait sentir aux poignets au bout d’un mois.

FAQ

VS Code fonctionne-t-il bien sur un MacBook Air M3 de 8 Go ? Oui, pour des projets petits et moyens (React, Vue, sites statiques). Avec de gros monorepos ou plusieurs conteneurs Docker actifs, 16 Go seront vraiment appréciables.

Vaut-il la peine de payer Copilot si j’utilise déjà ChatGPT ? Cela dépend. Copilot propose des suggestions en ligne pendant que vous écrivez, ce que ChatGPT dans le navigateur ne fait pas. Si vous copiez-collez du code en permanence entre des onglets, Copilot vous fera gagner du temps. Si vous ne posez que des questions ponctuelles, non.

Puis-je utiliser VS Code pour du développement iOS ou Mac natif ? Techniquement oui avec des extensions Swift, mais Xcode reste indispensable pour compiler et signer. Pour du Swift pur hors applications Apple, VS Code avec l’extension Swift officielle convient bien.

Comment désinstaller complètement VS Code ? Glissez l’application à la corbeille, puis supprimez ~/Library/Application Support/Code et ~/.vscode. Si vous l’avez installé avec Homebrew, lancez brew uninstall --cask visual-studio-code puis supprimez ces dossiers.

VS Code Insiders en vaut-il la peine ? C’est la version de test, mise à jour chaque jour. Utile si vous voulez des fonctions nouvelles en avance ou si vous développez des extensions. Pour le travail quotidien, restez sur la version stable.