Addons & Integrationen · Editor
Claude Code für VS Code
Anthropics offizielle IDE-Extension: Sidebar-Panel mit Inline-Diffs — Claude Code grafisch direkt in VS Code statt nur im Terminal.
Claude Code für VS Code ist Anthropics offizielle Erweiterung, die die Claude-Code-CLI als grafisches Panel direkt in den Editor bringt. Nach der Anmeldung (Pro-, Max-, Team- oder Enterprise-Account, kein API-Key nötig) läuft im Hintergrund ein lokaler MCP-Server namens „ide": Er bindet sich an 127.0.0.1 auf einem zufälligen Port, sichert jede Verbindung mit einem frisch generierten Auth-Token ab und stellt der CLI zwei Tools bereit — eines liest Diagnostics aus VS Codes Problems-Panel, eines führt Code in einem aktiven Jupyter-Kernel aus (immer mit Bestätigungsdialog). Darüber sieht Claude automatisch deine Textauswahl und den Pfad der offenen Datei als Kontext.
Schlägt Claude eine Änderung vor, öffnet sich eine Side-by-Side-Diff-Ansicht, die du annehmen, ablehnen oder direkt weiterbearbeiten kannst. Drei Permission-Modi steuern, wie viel Freiheit Claude bekommt: Manual (fragt vor jeder Änderung), Plan (zeigt erst den Plan als Markdown-Dokument zur Kommentierung) und Edit automatically. Das Panel lässt sich frei in Sidebar, Editor-Tab oder eigenes Fenster ziehen, mehrere parallele Konversationen sind möglich, und per /mcp verwaltest du externe MCP-Server, die du zuvor über die CLI mit claude mcp add hinzugefügt hast. Mit installierter Claude-in-Chrome-Extension kann das Panel zusätzlich den Browser steuern (@browser ...). Laut VS-Code-Marketplace inzwischen über 20 Millionen Installationen.
🔧 SETUP
- VS Code Version prüfen (mindestens 1.98.0 nötig)
- Extension installieren: Ctrl+Shift+X (Cmd+Shift+X auf Mac) öffnet die Extensions-Ansicht, "Claude Code" suchen und Install klicken — oder direkt über den Link vscode:extension/anthropic.claude-code
- Beim ersten Öffnen des Panels auf "Sign in" klicken und die Autorisierung im Browser abschließen (Pro/Max/Team/Enterprise-Account genügt, kein API-Key nötig)
- Panel öffnen über das Spark-Icon in der Editor-Toolbar (erscheint bei geöffneter Datei) und einen Prompt senden
- Optional: MCP-Server hinzufügen im integrierten Terminal mit `claude mcp add`, danach mit `/mcp` im Panel verwalten
✅ WANN EINSETZEN?
Schnelle Bugfixes im gewohnten Editor
Du markierst eine fehlerhafte Funktion, drückst Alt+K, beschreibst den Bug — Claude sieht automatisch deine Auswahl und schlägt eine Inline-Diff-Änderung vor, die du direkt annimmst oder ablehnst.
Frontend bauen und im Browser gegenprüfen
Mit installierter Claude-in-Chrome-Extension tippst du im Panel `@browser go to localhost:3000 and check the console for errors` — Claude testet die eigene Änderung sofort live, ohne dass du den Editor verlässt.
⛔ WANN EHER NICHT?
CLI-only Features fehlen
Der `!`-Bash-Shortcut, Tab-Completion und nicht alle Slash-Commands sind laut Doku nur im Terminal-CLI verfügbar, nicht vollständig im VS-Code-Panel.
Besser: Für den vollen Funktionsumfang zusätzlich die Claude Code CLI separat installieren und im integrierten Terminal mit `claude` starten.
Kein automatischer PATH-Eintrag
Die Extension bringt eine eigene gebündelte CLI-Kopie fürs Panel mit, setzt `claude` aber nicht auf den Terminal-PATH.
Besser: Die Standalone-CLI-Installation separat durchführen, wenn `claude` direkt im Terminal aufrufbar sein soll.
QUELLEN
- VS Code Marketplace: Claude Code ↗ marketplace.visualstudio.com
- Offizielle Doku: Claude Code in VS Code ↗ code.claude.com
- Doku: Claude Code mit Chrome verbinden ↗ code.claude.com