So richten Sie Visual Studio Code auf dem Mac für professionelle Webentwicklung ein

Eine Webentwicklungsumgebung auf dem Mac mit Visual Studio Code einzurichten ist nicht schwierig, doch zwischen „Ich habe es installiert“ und „Ich habe es ernsthaft für die Arbeit eingerichtet“ liegen einige Stunden und ein paar Einstellungen, von denen kaum jemand erzählt. Genau darum geht es in dieser Anleitung: VS Code so vorzubereiten, dass Sie auf einem MacBook mit Apple Silicon richtig programmieren können, mit nützlichen Erweiterungen (nicht den 40 gerade modischen), der Integration des Terminals mit Zsh und Homebrew sowie einer Konfiguration, die echte Projekte mit React, Vue oder Node.js verkraftet.

Geschätzte Dauer: 30 bis 45 Minuten, wenn Sie bei null anfangen. Gültig für macOS Sequoia 15.x und Ventura 13.x auf jedem Mac mit M1-, M2-, M3- oder M4-Chip.

Voraussetzungen

Bevor Sie VS Code anfassen, sollte der Mac zumindest grundlegend vorbereitet sein.

macOS 13 Ventura oder neuer. VS Code läuft auch auf älteren Versionen, aber viele moderne Erweiterungen setzen 13 oder höher voraus.
Command Line Tools von Xcode. Sie werden beim ersten Ausführen von git im Terminal automatisch installiert oder manuell mit xcode-select --install.
Installiertes Homebrew. Das ist der sauberste Weg, Node, Git und Hilfsprogramme zu verwalten. Anleitung unter brew.sh.
GitHub-Konto, falls Sie Copilot nutzen oder Einstellungen synchronisieren möchten.

Kurzübersicht der empfohlenen Umgebung:

Komponente	Empfohlene Version (2026)
macOS	Sequoia 15.4 oder höher
Visual Studio Code	1.95+ (Universal / Apple Silicon)
Node.js	22 LTS
Git	2.47+
Shell	Zsh (Standard unter macOS)
Homebrew	4.4+

Die richtige Version für Apple Silicon herunterladen

Hier passieren schon die ersten Fehler. Gehen Sie auf code.visualstudio.com und laden Sie das Binärpaket für Apple Silicon herunter, nicht die Intel- oder Universal-Version. Die Universal-Version funktioniert zwar, ist aber doppelt so groß und bringt auf einem M1-, M2-, M3- oder M4-Mac keinen Vorteil.

Um Ihren Chip zu prüfen: Apple-Menü → Über diesen Mac. Steht dort „Apple M…“, nehmen Sie die Silicon-Version.

Alternative über Homebrew, bequemer, wenn Sie es ohnehin nutzen:

brew install --cask visual-studio-code

Homebrew erkennt die Architektur und lädt das passende Paket. Zudem lässt es sich später mit brew upgrade --cask visual-studio-code aktualisieren, ohne das DMG manuell herunterzuladen.

Erstinstallation und Grundeinstellungen

Ziehen Sie VS Code in den Ordner Programme (falls Sie das DMG genutzt haben) und öffnen Sie es. Beim ersten Start:

Bestätigen Sie, dass die aus dem Internet geladene App geöffnet werden darf.
Wählen Sie ein Design. Default Dark Modern eignet sich gut; wenn Sie tagsüber viel arbeiten, schont GitHub Light Default die Augen mehr.
Überspringen Sie die Synchronisierung vorerst, wir kommen später darauf zurück.

Als Erstes sollten Sie den Befehl code im Terminal verfügbar machen. Öffnen Sie die Befehlspalette mit ⌘ + Umschalt + P, geben Sie „shell command“ ein und wählen Sie Shell Command: Install ‘code’ command in PATH. Danach öffnet code . aus jedem Ordner heraus Ihr Projekt in VS Code.

Die Integration von Zsh und Terminal einrichten

macOS verwendet seit Catalina standardmäßig Zsh. VS Code erkennt es automatisch, doch es lohnt sich, das integrierte Terminal feinabzustimmen.

Öffnen Sie die Einstellungen mit ⌘ + , und suchen Sie nach:

terminal.integrated.defaultProfile.osx → auf zsh setzen.
terminal.integrated.fontSize → 13 oder 14, wenn Ihr Retina-Display 14 Zoll hat.
terminal.integrated.fontFamily → MesloLGS NF, wenn Sie Powerlevel10k verwenden, oder die Systemschrift belassen.

Für ein angenehmes Zsh-Erlebnis installieren Sie Oh My Zsh:

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

Und ergänzen Sie zwei häufig genutzte Plugins: zsh-autosuggestions und zsh-syntax-highlighting. Sie werden mit Homebrew installiert (brew install zsh-autosuggestions zsh-syntax-highlighting) und aktiviert, indem Sie zwei Zeilen am Ende Ihrer ~/.zshrc ergänzen. Die offizielle Dokumentation jedes Plugins erklärt den genauen Pfad für Ihr System.

Starten Sie das integrierte Terminal von VS Code neu (⌃ + ` öffnet es) und Sie haben intelligente Autovervollständigung.

Node.js mit Homebrew installieren (und warum nicht über den offiziellen Installer)

Sie können das .pkg von nodejs.org herunterladen, ja. Wenn Sie aber irgendwann von Node 22 auf Node 24 wechseln oder für zwei Projekte zwei Versionen parallel betreiben möchten, werden Sie es bereuen.

Die vernünftige Lösung ist nvm (Node Version Manager):

brew install nvm
mkdir ~/.nvm

Ergänzen Sie in Ihrer ~/.zshrc:

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

Laden Sie mit source ~/.zshrc neu, dann können Sie nvm install 22, nvm use 22, nvm install 20 ausführen und pro Projekt zwischen Versionen wechseln. VS Code erkennt das im integrierten Terminal automatisch.

Unverzichtbare Erweiterungen für die Webentwicklung

Die Falle besteht darin, zwanzig Erweiterungen „für alle Fälle“ zu installieren. VS Code wird dadurch langsamer, und viele Erweiterungen kollidieren miteinander. Diese bringen wirklichen Nutzen:

Basis für jedes Webprojekt:

ESLint (Microsoft) — Linting für JS/TS. Unverzichtbar.
Prettier – Code formatter — automatische Formatierung. Legen Sie sie als Standardformatierer fest.
EditorConfig for VS Code — berücksichtigt die .editorconfig-Dateien fremder Projekte.
GitLens — Git-Verlauf direkt im Editor. Die kostenlose Version genügt völlig.

Für React / Next.js:

ES7+ React/Redux/React-Native snippets — schnelle Snippets (rafce und Co.).
Simple React Snippets, wenn Sie etwas Schlankeres bevorzugen.

Für Vue:

Vue – Official (früher Volar). Installieren Sie sie und deaktivieren Sie Vetur, falls vorhanden.
TypeScript Vue Plugin (Volar), wenn Sie mit TS arbeiten.

Für Node.js:

REST Client — Endpunkte testen, ohne VS Code zu verlassen, als Alternative zu Postman.
DotENV — Syntaxhervorhebung für .env-Dateien.

Mehr Komfort:

Path Intellisense — vervollständigt Dateipfade automatisch.
Error Lens — zeigt Fehler direkt in der Zeile an, nicht nur als Unterstreichung.
Auto Rename Tag — benennt HTML-/JSX-Tags paarweise um.

Vermeiden Sie „Alles-in-einem“-Pakete wie das „React Extension Pack“. Sie bringen Dinge mit, die Sie nicht brauchen, und bremsen den Start.

Einstellungen in settings.json, die einen Unterschied machen

Öffnen Sie die Befehlspalette mit ⌘ + Umschalt + P und suchen Sie nach „Preferences: Open User Settings (JSON)“. Fügen Sie hinzu oder passen Sie an:

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

Wichtige Punkte: formatOnSave mit Prettier verhindert Stildiskussionen, linkedEditing benennt HTML-Tags paarweise um, und das Deaktivieren der Minimap schafft auf einem 13-Zoll-MacBook Air mehr nutzbaren Platz.

Installieren Sie JetBrains Mono mit brew install --cask font-jetbrains-mono, falls Sie sie noch nicht haben. Fira Code oder Cascadia Code funktionieren mit Ligaturen ebenfalls gut.

Git und GitHub: saubere Authentifizierung

Richten Sie Ihre globale Identität ein:

git config --global user.name "Ihr Name"
git config --global user.email "ihre@email.de"
git config --global init.defaultBranch main

Zur Authentifizierung bei GitHub ist der moderne Weg die Erweiterung GitHub Pull Requests and Issues von Microsoft. Beim ersten Push startet sie den OAuth-Ablauf im Browser und speichert die Zugangsdaten im Schlüsselbund von macOS. Keine manuellen Tokens, keine ~/.netrc.

Wenn Sie SSH bevorzugen, erzeugen Sie den Schlüssel mit ssh-keygen -t ed25519 -C "ihre@email.de" und hinterlegen den öffentlichen Schlüssel bei GitHub unter Settings → SSH keys.

GitHub Copilot und Alternativen

Copilot kostet 10 $ im Monat (2026 etwa 9,50 €, Abrechnung in US-Dollar) für Einzelnutzer, kostenlos für verifizierte Studierende und Maintainer populärer Open-Source-Projekte. Es wird als Erweiterung installiert und mit demselben GitHub-Konto angemeldet.

Ernstzunehmende Alternativen:

Codeium — kostenlos für Einzelnutzer, offizielle Erweiterung im Marketplace.
Continue — Open Source, lässt sich mit einem eigenen Modell verbinden (Claude, GPT-4, lokale Modelle über Ollama).
Cursor — keine Erweiterung, sondern ein vollständiger Fork von VS Code. Wenn Copilot Ihnen zu wenig ist, lohnt sich ein Test.

Für die Frontend-Webentwicklung ist Copilot bei der Inline-Vervollständigung weiterhin am ausgereiftesten. Codeium liegt nahe dran und kostet nichts.

Einstellungen zwischen mehreren Macs synchronisieren

Wenn Sie ein MacBook Pro und einen Mac mini haben, aktivieren Sie Settings Sync: Befehlspalette → „Settings Sync: Turn On“. Sie können Einstellungen, Erweiterungen, Tastenkürzel, Snippets und den UI-Status synchronisieren. Gespeichert wird im Konto von Microsoft oder GitHub.

Manuelle Alternative, wenn Sie keine Konten nutzen möchten: Speichern Sie Ihre settings.json und die Erweiterungsliste in einem privaten GitHub-Repository. Die installierten Erweiterungen listen Sie so auf:

code --list-extensions > extensions.txt

Auf dem anderen Mac installieren Sie sie mit einer einfachen Schleife wieder.

Häufige Probleme

VS Code ist beim Öffnen großer Projekte langsam. Schließen Sie node_modules und .next in den settings.json von der Indizierung aus:

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

Der Befehl code funktioniert im Terminal nicht. Führen Sie „Shell Command: Install ‘code’ command in PATH“ erneut aus. Wenn es weiterhin scheitert, prüfen Sie, ob /usr/local/bin in Ihrem $PATH enthalten ist.

Prettier formatiert nicht beim Speichern. Prüfen Sie, ob es als Standardformatierer eingestellt ist und ob das Projekt keine .prettierignore hat, die die Datei ausschließt.

Das Terminal findet nvm oder node nicht. Meist wird ~/.zshrc nicht geladen. Prüfen Sie, ob das integrierte Terminal Zsh statt Bash verwendet: Einstellungen → nach terminal.integrated.defaultProfile.osx suchen.

Copilot macht keine Vorschläge. Prüfen Sie, ob Sie angemeldet sind (Symbol in der unteren Leiste) und ob die Sprache der Datei nicht in der Ausschlussliste der Erweiterung steht.

Alternativen zu VS Code auf dem Mac

VS Code ist nicht der einzige brauchbare Editor für den Mac, aber der meistgenutzte. Wenn Ihnen Leistung besonders wichtig ist, werfen Sie einen Blick auf Zed (nativ, in Rust geschrieben, startet in unter einer Sekunde). Für umfangreiches JavaScript/TypeScript ist WebStorm von JetBrains bei Refactorings weiterhin mächtiger, kostet für Einzelnutzer nach dem ersten Jahr aber 169 € im Jahr.

Wenn Sie viel mit Containern arbeiten, sollten Sie VS Code durch ein gut konfiguriertes Docker Desktop auf Apple Silicon ergänzen, damit es den Akku nicht übermäßig belastet. Und wenn Sie viele Stunden am Tag programmieren, merkt man den Unterschied zwischen der MacBook-Tastatur und einer mechanischen externen Tastatur nach einem Monat im Handgelenk.

FAQ

Läuft VS Code gut auf einem MacBook Air M3 mit 8 GB? Ja, für kleine und mittlere Projekte (React, Vue, statische Websites). Bei großen Monorepos oder mehreren aktiven Docker-Containern sind 16 GB sehr empfehlenswert.

Lohnt sich Copilot, wenn ich ohnehin ChatGPT nutze? Das hängt davon ab. Copilot liefert Vorschläge direkt beim Schreiben, was ChatGPT im Browser nicht bietet. Wenn Sie ständig Code zwischen Tabs kopieren und einfügen, spart Ihnen Copilot Zeit. Wenn Sie nur gelegentlich Fragen haben, eher nicht.

Kann ich VS Code für die iOS- oder native Mac-Entwicklung verwenden? Technisch ja, mit Swift-Erweiterungen, aber zum Kompilieren und Signieren bleibt Xcode Pflicht. Für reines Swift ohne Apple-Apps funktioniert VS Code mit der offiziellen Swift-Erweiterung gut.

Wie deinstalliere ich VS Code vollständig? Ziehen Sie die App in den Papierkorb und löschen Sie ~/Library/Application Support/Code sowie ~/.vscode. Wenn Sie es mit Homebrew installiert haben, verwenden Sie brew uninstall --cask visual-studio-code und löschen Sie danach diese Ordner.

Lohnt sich VS Code Insiders? Es ist die Testversion, die täglich aktualisiert wird. Nützlich, wenn Sie neue Funktionen früher ausprobieren möchten oder Erweiterungen entwickeln. Für die tägliche Arbeit bleiben Sie besser bei der stabilen Version.