Claude Code in VS Code: Editor-Extension von Anthropic

Was Claude Code in VS Code besonders macht.

Vier Mechaniken, die die Extension von einem normalen Chat-Fenster neben dem Editor unterscheiden.

01 · SELEKTION

01 function verify(token) {

02 if (!token) throw Error();

03 }

⧉ 3 lines · auth.ts

Claude sieht, was du markierst, ganz automatisch.

Sobald du Text im Editor selektierst, landet er ohne Copy-Paste als Kontext im Claude-Panel. Ein Klick auf Option+K (Mac) / Alt+K fügt zusätzlich eine präzise @datei.ts#5-10-Referenz mit exakten Zeilennummern ein, und Claude weiß immer, worüber du sprichst.

02 · INLINE-DIFF

- if (!token) throw Error();

+ if (!token) throw new AuthError();

Änderungen direkt im Editor, nicht im Terminal-Wirrwarr.

Statt Patch-Blöcke im Terminal zu lesen, zeigt Claude eine native Side-by-Side-Diff-Ansicht im VS-Code-Diff-Viewer. Du kannst den Vorschlag direkt in der Diff-Ansicht editieren, bevor du annimmst. Claude merkt sich deine manuelle Änderung.

03 · DIAGNOSTICS

TS2345 · Zeile 12

„Ich sehe den TS2345-Fehler in Zeile 12 …“

Claude liest deine Linter- und TypeScript-Fehler mit.

Über den lokalen IDE-MCP-Server ruft Claude getDiagnostics auf und sieht exakt die Fehler und Warnungen aus dem VS-Code-„Problems“-Panel, optional gescoped auf eine einzelne Datei. Kein Copy-Paste von Fehlermeldungen mehr nötig.

04 · PARALLELE TABS

Mehrere Claude-Sessions gleichzeitig, jede mit eigenem Kontext.

Öffne über „Open in New Tab“ (Cmd+Shift+Esc) beliebig viele parallele Konversationen als eigene Editor-Tabs oder sogar separate Fenster. Jede Session behält ihre eigene History. Perfekt, um an einem Feature zu arbeiten, während im Hintergrund ein Bugfix läuft.

Wie Claude Code in VS Code wirklich arbeitet.

01 · IDE-MCP-Server

Ein lokaler MCP-Server verbindet CLI und Editor.

Sobald die Extension aktiv ist, startet sie automatisch einen lokalen MCP-Server namens „ide“, der auf 127.0.0.1 an einem zufälligen Port lauscht, nicht von anderen Rechnern erreichbar. Jede Aktivierung erzeugt ein frisches Auth-Token, das in einer Lock-Datei mit 0600-Rechten liegt. So können CLI und Extension denselben Editor-Zustand teilen, ohne dass Dritte zugreifen können.

02 · Zwei Tools, viele Funktionen

Nur zwei Tools sind für Claude sichtbar, der Rest ist internes UI-Wiring.

Der MCP-Server hostet rund ein Dutzend Funktionen, aber nur getDiagnostics (liest Fehler/Warnungen aus dem Problems-Panel) und executeCode (führt Python-Zellen im aktiven Jupyter-Notebook aus) sind für das Modell selbst sichtbar. Alles andere, also Diff-Öffnen, Selektion lesen und Datei speichern, läuft als interne RPC, die vor der Tool-Liste des Modells gefiltert wird.

03 · Bundled CLI

Die Extension bringt ihre eigene CLI-Kopie mit, getrennt vom Terminal-Claude.

Die Extension installiert claude NICHT auf den Shell-PATH. Sie bündelt eine private CLI-Kopie nur für das Chat-Panel. Wer im integrierten Terminal claude tippen will, braucht die separate Standalone-CLI-Installation, die sich dann automatisch über /ide mit dem laufenden VS-Code-Fenster verbindet.

04 · Geteilte History

Extension und Terminal-CLI teilen sich dieselbe Konversations-History.

Egal ob eine Session im Sidebar-Panel oder im Terminal gestartet wurde: claude --resume im Terminal öffnet einen interaktiven Picker mit allen Konversationen aus beiden Welten. Checkpoints (Datei-Rewind-Punkte) funktionieren in der Extension genauso wie in der CLI, inklusive „Fork conversation and rewind code“.

Wer Claude Code in VS Code wirklich nutzt.

01 · Solo-SaaS-Gründer

Bugfix ohne Kontext-Wechsel

Ein Solo-SaaS-Entwickler markiert die fehlerhafte Funktion direkt im Editor, drückt Alt+K und fragt Claude, warum der TypeScript-Compiler meckert. Claude sieht automatisch die Diagnostics aus dem Problems-Panel und schlägt den Fix als Inline-Diff vor, kein Alt-Tab zum Terminal, kein Copy-Paste von Fehlermeldungen.

02 · Agentur-Inhaber

Parallel an drei Kundenprojekten arbeiten

Ein Agentur-Inhaber öffnet für jedes Kundenprojekt einen eigenen Claude-Tab per Cmd+Shift+Esc. Während Session A einen Merge-Konflikt löst, arbeitet Session B im Hintergrund an einer neuen Landingpage-Komponente. Der orange Status-Punkt zeigt sofort, welche Session fertig ist.

03 · Freelance-Coder

Code-Review direkt im Diff-Viewer statt im Terminal

Ein Freelancer lässt sich von Claude einen Refactoring-Vorschlag machen, sieht die Änderung als native Side-by-Side-Diff, editiert eine Zeile manuell direkt im Diff-View und nimmt den Rest an. Claude merkt sich, dass diese Zeile nicht mehr dem Original-Vorschlag entspricht.

04 · Technischer Berater

Onboarding neuer Entwickler mit Plan-Mode

Ein technischer Berater lässt Claude vor jedem größeren Refactor erst einen Plan als Markdown-Dokument öffnen, kommentiert Zeile für Zeile mit Inline-Kommentaren im Editor und gibt erst dann grünes Licht, bevor auch nur eine Datei angefasst wird.

Dein Erst-Workflow zum Kopieren.

Dieser Erst-Workflow zeigt dir in einem Rutsch die vier Kernmechaniken der Extension. Kopiere ihn in ein frisch geöffnetes Claude-Code-Panel.

erster-workflow.md

Ich richte gerade Claude Code in VS Code ein und will die wichtigsten
Mechaniken der Extension in einem Durchlauf kennenlernen. Bitte führe
mich Schritt für Schritt durch folgenden Ablauf, direkt in diesem
Projekt (nutze meine aktuell geöffnete Datei als Ausgangspunkt):

1. KONTEXT-CHECK
   Sag mir kurz, welche Datei du gerade als "aktiv geöffnet" siehst
   und ob ich Text markiert habe (Selection-Kontext). Falls ich noch
   nichts markiert habe, fordere mich explizit auf, 2-3 Zeilen Code
   zu selektieren und dir per Option+K / Alt+K eine @-Referenz zu
   schicken.

2. DIAGNOSTICS-SCAN
   Prüfe über die IDE-Diagnostics (Problems-Panel), ob es in der
   aktuell geöffneten Datei Linter- oder TypeScript-Fehler gibt.
   Liste sie mir kurz auf inkl. Zeilennummer. Falls keine Fehler
   vorhanden sind, sag das explizit und schlage stattdessen eine
   kleine Code-Qualitäts-Verbesserung vor (z. B. fehlende Typannotation,
   ungenutzte Variable, fehlende Fehlerbehandlung).

3. PLAN-MODE-VORSCHLAG
   Wechsle gedanklich in den Plan-Mode: Beschreibe mir in 3-5
   Bulletpoints, was du ändern würdest, BEVOR du irgendetwas anfasst.
   Ich gebe dann bewusst grünes Licht.

4. INLINE-DIFF
   Nach meinem OK: Zeige die Änderung als Diff (nicht als reinen
   Textblock) und erkläre in 1-2 Sätzen, warum genau diese Änderung
   den gefundenen Fehler oder Verbesserungspunkt behebt.

5. ABSCHLUSS-CHECK
   Fasse zum Schluss zusammen: Welche Datei wurde geändert, welcher
   Fehler ist behoben, und was wäre der nächste sinnvolle Schritt in
   diesem Projekt?

Antworte auf Deutsch, halte jeden Schritt kompakt (max. 4-5 Sätze)
und warte nach Schritt 3 aktiv auf meine Bestätigung, bevor du
fortfährst.

In 4 Schritten startklar.

01

Extension installieren

In VS Code Cmd+Shift+X (Mac) / Ctrl+Shift+X (Windows/Linux) öffnen, nach „Claude Code“ suchen und auf Install klicken. VS Code 1.98.0 oder neuer wird vorausgesetzt.

02

Anmelden

Beim ersten Öffnen des Panels (Spark-Icon oben rechts im Editor oder in der Activity Bar links) erscheint der Sign-in-Screen. Mit dem bestehenden Pro-/Max-/Team-Account im Browser autorisieren, kein API-Key nötig.

03

Ersten Prompt senden

Text im Editor markieren (wird automatisch als Kontext erkannt) oder Option+K / Alt+K drücken, um eine @datei.ts#5-10-Referenz einzufügen, dann die Frage im Prompt-Feld stellen.

04

Terminal-CLI optional dazuschalten

Für CLI-only-Features (!-Bash-Shortcut, Tab-Completion) im integrierten Terminal (Cmd+`) einmalig die Standalone-CLI installieren. Extension und Terminal teilen sich automatisch dieselbe Session-History über claude --resume.

Häufige Fragen.

Brauche ich einen extra API-Key für die VS-Code-Extension?

Nein. Jeder bezahlte Claude-Plan (Pro, Max, Team oder Enterprise) reicht, ebenso ein Claude-Console-Account. Du meldest dich beim ersten Öffnen des Panels einfach im Browser an, kein separater API-Key nötig, außer du bindest die Extension explizit an Bedrock, Vertex AI oder Microsoft Foundry an.

Ist das dieselbe Claude-Code-CLI, die ich im Terminal kenne?

Teilweise. Die Extension bündelt eine eigene, private CLI-Kopie nur für das Chat-Panel und legt claude NICHT auf deinen Shell-PATH. Für Terminal-Features wie den !-Bash-Shortcut oder Tab-Completion brauchst du zusätzlich die separate Standalone-CLI-Installation, beide teilen sich aber dieselbe Konversations-History.

Sieht Claude wirklich automatisch, was ich gerade markiert habe?

Ja. Sobald du im Editor Text selektierst, erscheint im Prompt-Feld ein Hinweis wie „Selected 3 lines from datei.ts“, und Claude bekommt die Auswahl als Kontext. Über das Augen-Icon lässt sich das pro Selektion gezielt ausblenden, und für sensible Dateien wie .env kannst du eine Read-Deny-Regel setzen, die sowohl Selektion als auch Open-File-Hinweis blockiert.

Kann Claude meine Linter- und TypeScript-Fehler wirklich lesen?

Ja, über das Tool mcp__ide__getDiagnostics, das direkt auf VS Codes „Problems“-Panel zugreift, optional gescoped auf eine einzelne Datei. Das läuft komplett lokal über den eingebauten IDE-MCP-Server, der nur auf 127.0.0.1 lauscht.

Was ist der Unterschied zwischen Sidebar, Panel und Terminal-Modus?

Du kannst das Claude-Panel per Drag-and-Drop in die rechte Sidebar (immer sichtbar neben dem Code), die linke Primary Sidebar oder als eigenen Editor-Tab verschieben. Wer lieber die klassische Terminal-Optik mag, aktiviert in den Extension-Settings „Use Terminal“, dann öffnet sich ein CLI-artiges Interface statt der grafischen Oberfläche.

Funktioniert die Extension auch in Cursor oder anderen VS-Code-Forks?

Ja. Sie lässt sich direkt für Cursor installieren und funktioniert auch in weiteren VS-Code-Forks wie Devin Desktop oder Kiro, entweder über die integrierte Extensions-Ansicht oder über die Open-VSX-Registry, falls der jeweilige Editor keinen eigenen Marketplace-Zugriff hat.

Claude Code, direkt in deinem Editor.