promptgarten 🌱
🌍 EN

Addons & Integrationen · Editor

Claude Code für VS Code

Offiziell

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

  1. VS Code Version prüfen (mindestens 1.98.0 nötig)
  2. 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
  3. 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)
  4. Panel öffnen über das Spark-Icon in der Editor-Toolbar (erscheint bei geöffneter Datei) und einen Prompt senden
  5. 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