Claude Code in VS Code: So richtest du die Erweiterung ein und nutzt sie optimal

Wer täglich mit VS Code arbeitet, kennt das Gefühl: Man sucht nach einer Funktion, debuggt einen hartnäckigen Fehler oder schreibt zum dritten Mal denselben Boilerplate-Code. Genau hier setzt Claude Code an. Die KI von Anthropic lässt sich direkt in deinen Code-Editor integrieren und arbeitet als intelligenter Assistent, der nicht nur Vorschläge macht, sondern ganze Aufgaben eigenständig erledigt.

In diesem Artikel zeige ich dir Schritt für Schritt, wie du die VS Code Erweiterung einrichtest, das Panel verwendest und deinen Entwickler-Workflow damit dauerhaft beschleunigst.

Voraussetzungen: Was du vor der Installation brauchst

Bevor du Claude Code in VS Code installieren kannst, müssen einige Grundvoraussetzungen erfüllt sein. Der Setup-Prozess ist unkompliziert, aber ein vollständiges Setup spart dir später unnötige Fehler.

Das Wichtigste zuerst: Du benötigst einen aktiven Anthropic-Account mit API-Zugang. Claude Code ist ein kostenpflichtiges Tool – es wird über die Anthropic API abgerechnet. Ein kostenloser Testzugang ist über claude.ai möglich, für den vollen Funktionsumfang in VS Code brauchst du aber API-Credits.

Systemanforderungen im Überblick

• Node.js: Version 18 oder höher – Claude Code läuft als npm-Paket und benötigt eine aktuelle Node-Laufzeitumgebung.
• VS Code: Version 1.90 oder höher – ältere Versionen unterstützen die Extension-API nicht vollständig.
• Anthropic API Key: Zu finden im Anthropic Console unter api.anthropic.com.
• npm oder npx: Für die Installation und Ausführung des Claude Code CLI.

Auf Windows-Systemen empfiehlt sich zusätzlich die Installation von Git Bash oder WSL2, da Claude Code im Terminal arbeitet und unter Windows PowerShell gelegentlich Pfadprobleme auftreten können. Unter macOS und Linux läuft alles direkt out of the box.

Node.js installieren (falls noch nicht vorhanden)

Prüfe zunächst, ob Node.js bereits installiert ist:

node --version

Falls die Ausgabe fehlt oder eine Version unter 18 anzeigt, lade Node.js von nodejs.org herunter oder verwende einen Versionsmanager:

nvm install 20
nvm use 20

Mit diesem Setup bist du bereit für die eigentliche Installation.

Claude Code Erweiterung in VS Code installieren

Es gibt zwei Wege, Claude Code in VS Code zu integrieren: über die offizielle Extension aus dem Marketplace oder über das CLI in Kombination mit der Extension. Beide Methoden ergänzen sich und werden in der Regel zusammen genutzt.

Schritt 1: Claude Code CLI global installieren

Das Fundament ist das Claude Code CLI-Paket von Anthropic. Öffne dein Terminal – entweder direkt in VS Code über das integrierte Terminal oder extern – und führe folgenden Befehl aus:

npm install -g @anthropic-ai/claude-code

Nach der Installation kannst du überprüfen, ob alles korrekt installiert wurde:

claude --version

Du solltest jetzt die aktuelle Versionsnummer sehen. Falls der Befehl nicht gefunden wird, musst du deine PATH-Variable prüfen.

Schritt 2: VS Code Extension installieren

Öffne VS Code und drücke Ctrl+Shift+P (Windows/Linux) oder Cmd+Shift+P (macOS), um die Command Palette zu öffnen. Tippe “Extensions: Install Extensions” und drücke Enter.

Im Extensions-Suchfeld gibst du folgendes ein:

anthropic.claude-code

Du kannst die Extension auch direkt über die Extension-ID installieren. Öffne das Terminal in VS Code und führe aus:

code --install-extension anthropic.claude-code

Alternativ navigierst du im Marketplace direkt zur Extension und klickst auf “Install”. Nach der Installation erscheint das Claude-Icon in der linken Sidebar deines Code-Editors.

Schritt 3: API Key hinterlegen

Beim ersten Start wirst du aufgefordert, dich zu authentifizieren. Du hast zwei Möglichkeiten:

• Browser-Login: Claude Code öffnet automatisch claude.ai zur Authentifizierung – empfohlen für schnellen Einstieg.
• API Key: Du setzt den Key direkt als Umgebungsvariable für mehr Kontrolle über die Abrechnung.

Für die API-Key-Methode auf Windows setzt du die Variable folgendermaßen in der PowerShell:

$env:ANTHROPIC_API_KEY="sk-ant-dein-key-hier"

Unter macOS/Linux trägst du ihn in deine Shell-Konfiguration ein:

export ANTHROPIC_API_KEY="sk-ant-dein-key-hier"

Persistenz erreichst du, indem du den Export-Befehl in deine ~/.bashrc, ~/.zshrc oder das entsprechende Windows-Äquivalent einträgst.

Erste Schritte: Claude Code in VS Code starten

Nach der Installation ist der erste Start unkompliziert. Navigiere im Terminal in dein Projektverzeichnis und starte Claude Code:

cd /pfad/zu/deinem/projekt
claude

Alternativ öffnest du in VS Code ein neues Terminal (Ctrl+`) und führst claude direkt dort aus. Claude Code liest automatisch die Struktur deines Projekts ein und bereitet sich auf Aufgaben vor.

Die Benutzeroberfläche verstehen

Nach dem Start siehst du ein interaktives Terminal-Interface. Oben werden Modell und Session-Informationen angezeigt, darunter öffnet sich der Eingabe-Prompt. Claude Code arbeitet in einem sogenannten REPL-Modus (Read-Eval-Print Loop): Du gibst eine Aufgabe ein, Claude führt sie aus, du überprüfst das Ergebnis und gibst die nächste Anweisung.

Der große Unterschied zu einfachen Copilot-Tools: Claude Code kann nicht nur Vorschläge machen, sondern Dateien lesen, bearbeiten, erstellen, Terminal-Befehle ausführen und das gesamte Repository analysieren – autonom und ohne manuelle Eingriffe für jeden Schritt.

Dein erstes Kommando

Teste die Integration mit einer einfachen Aufgabe. Gib im Claude-Prompt ein:

Zeige mir eine Übersicht aller TypeScript-Dateien im src-Ordner und erkläre die Hauptfunktionen.

Claude Code wird die Dateien selbstständig lesen und eine strukturierte Zusammenfassung liefern. Das zeigt direkt einen der größten Vorteile: kontextbewusstes Arbeiten über das gesamte Projekt hinweg.

Das Prompt-Panel verwenden: Befehle und Eingaben

Das Prompt-Panel ist das Herzstück der Claude Code Interaktion in VS Code. Hier steuerst du, was Claude tun soll – von einfachen Fragen bis hin zu komplexen Refactoring-Aufgaben über mehrere Dateien.

Wichtige Slash-Befehle

Claude Code unterstützt eine Reihe eingebauter Slash-Befehle, die spezielle Funktionen aktivieren:

• /help: Zeigt alle verfügbaren Befehle und deren Beschreibung an.
• /clear: Leert den Gesprächsverlauf und startet eine neue Session.
• /compact: Komprimiert lange Conversations, um Token zu sparen.
• /model: Wechselt zwischen verfügbaren Claude-Modellen (z. B. claude-opus-4 oder claude-sonnet-4).
• /status: Zeigt Verbindungsstatus und aktuelle Konfiguration.
• /exit: Beendet die Claude Code Session.

Diese Befehle gibst du direkt im Panel ein. Wenn du oft mit dem Panel arbeitest, empfiehlt sich der regelmäßige Einsatz von /compact, um die Token-Nutzung und damit die Kosten zu kontrollieren.

Kontextbezogene Eingaben formulieren

Je präziser deine Eingabe, desto besser das Ergebnis. Statt “Verbessere den Code” liefert “Refactore die Funktion handleUserInput in auth.ts so, dass sie async/await statt Promises verwendet und Fehler über ein zentrales Error-Handling weiterleitet” wesentlich nutzbarere Ergebnisse.

Nützliche Muster für effektive Prompts:

• Dateikontext explizit angeben: Nenne die Datei und Funktion, die du bearbeiten möchtest.
• Gewünschtes Ausgabeformat beschreiben: “Als TypeScript-Interface”, “Mit JSDoc-Kommentaren”, “Mit Unit-Tests”.
• Constraints nennen: “Ohne externe Bibliotheken”, “Kompatibel mit Node 18”, “Ohne Breaking Changes”.

Dateien und Ordner direkt referenzieren

Du kannst Dateien im Prompt mit dem @-Symbol direkt referenzieren, ähnlich wie in GitHub Copilot Chat:

Erkläre mir die Logik in @src/utils/parser.ts und schreibe Unit-Tests dafür.

Claude Code liest die Datei selbstständig ein und arbeitet auf Basis des tatsächlichen Inhalts – kein Copy-Paste nötig.

Workflow anpassen und Produktivität steigern

Ein gut konfigurierter Workflow macht den Unterschied zwischen einem nützlichen Tool und einem echten Produktivitätsmultiplikator. Claude Code bietet mehrere Mechanismen, um das Verhalten an dein Projekt anzupassen.

CLAUDE.md: Das Projekt-Gedächtnis

Die wichtigste Konfigurationsmöglichkeit ist die CLAUDE.md-Datei im Projektstamm. Diese Datei liest Claude Code bei jeder Session automatisch ein und nutzt sie als Kontext für alle Aufgaben.

Erstelle eine solche Datei in deinem Projektverzeichnis:

touch CLAUDE.md

Füge dort projektspezifische Informationen ein, zum Beispiel:

# Projekt-Kontext

## Tech Stack
- Framework: Next.js 14 mit App Router
- Styling: Tailwind CSS
- Testing: Vitest + React Testing Library
- Datenbank: PostgreSQL via Prisma

## Coding Standards
- Funktionale Komponenten, keine Klassen-Komponenten
- TypeScript strict mode
- Fehlerbehandlung immer mit try/catch
- Deutsche Kommentare im Code

## Verbotene Patterns
- Keine direkten DOM-Manipulationen
- Kein console.log in Production-Code

Mit dieser Konfiguration kennt Claude Code deinen Stack, deine Standards und deine Einschränkungen – ohne dass du sie bei jeder Aufgabe neu erklären musst.

Hooks für automatisierte Workflows

Claude Code unterstützt sogenannte Hooks – automatische Aktionen, die vor oder nach bestimmten Ereignissen ausgeführt werden. Du kannst beispielsweise konfigurieren, dass nach jeder Codeänderung automatisch die Tests laufen oder ein Lint-Durchlauf gestartet wird.

Die Hook-Konfiguration erfolgt in der settings.json:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "npm run lint --silent"
          }
        ]
      }
    ]
  }
}

Das ist besonders nützlich, wenn du mit automatisierten Workflows arbeitest – Claude Code wird Teil einer größeren Automatisierungskette.

Modell gezielt wählen

Nicht jede Aufgabe braucht das leistungsfähigste Modell. Für einfache Refactorings reicht claude-haiku, für komplexe Architekturentscheidungen nimmst du claude-opus. Den Wechsel erledigst du im Panel:

/model claude-sonnet-4-5

Oder du setzt das Modell als Umgebungsvariable für die gesamte Session:

ANTHROPIC_MODEL=claude-haiku-4-5 claude

Plugins und Erweiterungen verwalten

Claude Code lässt sich durch MCP-Server (Model Context Protocol) erweitern. Diese Plugins geben Claude Zugang zu externen Systemen – Datenbanken, APIs, Browsern oder internen Tools.

MCP-Server einrichten

Die Konfiguration von MCP-Servern erfolgt in der globalen oder projektspezifischen Claude-Konfiguration. Öffne oder erstelle die Datei ~/.claude/settings.json:

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/pfad/zu/verzeichnis"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "dein-token"
      }
    }
  }
}

Nach einem Neustart von Claude Code stehen die konfigurierten Server zur Verfügung. Claude kann dann zum Beispiel direkt GitHub-Issues lesen, Pull Requests erstellen oder auf Repositories zugreifen.

Nützliche MCP-Server für Entwickler

Die vollständige Liste verfügbarer MCP-Server findest du im offiziellen MCP-Repository auf GitHub. Das Ökosystem wächst schnell – regelmäßiges Nachschauen lohnt sich.

Browseraufgaben mit Chrome automatisieren

Eine besonders mächtige Funktion ist die Browser-Automatisierung über den Puppeteer- oder Playwright-MCP-Server. Claude Code kann damit eigenständig Websites aufrufen, Formulare ausfüllen, Screenshots erstellen und Web-Scraping-Aufgaben durchführen.

Playwright MCP konfigurieren

Installiere zunächst den Playwright-Server:

npx @playwright/mcp@latest --help

Dann trägst du ihn in deine MCP-Konfiguration ein:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Nach dem Neustart kann Claude Code Browseraufgaben ausführen. Du kannst zum Beispiel eingeben:

Öffne https://example.com, mache einen Screenshot und prüfe ob alle Navigation-Links korrekt funktionieren.

Claude öffnet Chrome, navigiert zur Seite, analysiert die Links und liefert dir einen strukturierten Report – vollständig autonom.

Typische Anwendungsfälle

• E2E-Test-Erstellung: Claude besucht deine App und generiert automatisch Playwright-Tests basierend auf dem echten Nutzerflow.
• Competitor-Research: Automatisches Sammeln von Informationen von definierten Websites.
• Form-Testing: Überprüfung aller Formularfelder auf korrekte Validierung und Fehlerbehandlung.
• Visual Regression: Vergleich von Screenshots vor und nach Code-Änderungen.

Wichtige VS Code Befehle und Shortcuts für Claude Code

Die effiziente Nutzung von Claude Code in VS Code hängt auch davon ab, wie gut du die Tastaturkürzel kennst. Hier sind die wichtigsten Shortcuts und Befehle, die du täglich brauchen wirst.

VS Code-native Shortcuts

Claude Code im Terminal-Modus steuern

Innerhalb einer aktiven Claude-Session gibt es eigene Steuerungsbefehle:

• Escape: Laufende Aufgabe abbrechen – nützlich, wenn Claude in die falsche Richtung läuft.
• Pfeil hoch/runter: Durch die Befehlshistorie navigieren.
• Ctrl+C: Session beenden.
• Tab: Autovervollständigung für Slash-Befehle aktivieren.

Für Windows-Nutzer: Die Tastenkombination Ctrl+Shift+P ist besonders wichtig, um schnell zur Command Palette zu gelangen und Claude Code-bezogene Befehle direkt aus der Extension heraus auszuführen, ohne das Terminal manuell öffnen zu müssen.

Parallel in mehreren Terminals arbeiten

Ein produktiver Trick: Öffne mehrere Terminal-Instanzen in VS Code. Im ersten Terminal läuft claude für KI-Aufgaben, im zweiten dein Dev-Server, im dritten laufen Tests. Das Split-Terminal-Feature aktivierst du über das Terminal-Panel mit dem Split-Icon oder per Tastenkürzel:

Ctrl+Shift+5  # Terminal horizontal teilen (Windows/Linux)

So behältst du den Überblick und musst Claude Code nicht ständig pausieren, wenn du schnell einen anderen Terminal-Befehl ausführen willst.

Häufige Probleme und Lösungen

Auch bei einem robusten Tool wie Claude Code laufen nicht immer alle Dinge auf Anhieb. Hier sind die häufigsten Probleme und wie du sie schnell löst.

Problem: “claude: command not found”

Das ist das häufigste Problem nach der Installation. Die npm-Binaries sind nicht im PATH. Prüfe zuerst:

npm list -g @anthropic-ai/claude-code

Wenn das Paket installiert ist, aber der Befehl nicht gefunden wird, füge das npm-Binary-Verzeichnis zu deinem PATH hinzu:

# macOS/Linux
export PATH="$PATH:$(npm root -g)/../bin"

# Permanent in ~/.zshrc oder ~/.bashrc eintragen
echo 'export PATH="$PATH:$(npm root -g)/../bin"' >> ~/.zshrc

Auf Windows überprüfst du die Systemumgebungsvariablen und stellst sicher, dass der npm-Pfad (typischerweise C:\Users\DeinName\AppData\Roaming\npm) eingetragen ist.

Problem: Authentifizierungsfehler

Wenn Claude Code sich nicht verbinden kann, liegt es meist am API Key. Überprüfe:

echo $ANTHROPIC_API_KEY

Wenn die Ausgabe leer ist, wurde die Umgebungsvariable nicht gesetzt. Setze sie erneut und starte das Terminal neu. Prüfe außerdem, ob dein API Key noch gültig ist und ausreichend Credits vorhanden sind – das kannst du in der Anthropic Console unter console.anthropic.com einsehen.

Problem: Claude modifiziert falsche Dateien

Claude Code hat standardmäßig Schreibzugriff auf dein gesamtes Projektverzeichnis. Wenn du das einschränken möchtest, nutze den --no-auto-commit-Flag und bestätige Änderungen manuell:

claude --no-auto-commit

Alternativ aktivierst du den “Managed Mode”, bei dem Claude alle geplanten Aktionen erst anzeigt, bevor er sie ausführt. Das gibt dir vollständige Kontrolle.

Problem: Langsame Antwortzeiten

Bei großen Projekten mit vielen Dateien kann Claude Code langsamer werden, weil er den Kontext aufbaut. Nutze /compact regelmäßig, um den Gesprächsverlauf zu komprimieren, oder starte eine neue Session mit /clear. Für rechenintensive Aufgaben wechsle auf claude-haiku, das schneller antwortet.

Problem: Extension zeigt keinen Output

Wenn die VS Code Extension installiert ist, aber nichts anzeigt, prüfe den Output-Channel. Öffne die Command Palette mit Ctrl+Shift+P, tippe “Output: Show Output Channels” und wähle “Claude Code” aus. Dort findest du Fehlerprotokolle, die dir bei der Diagnose helfen.

Claude Code im Vergleich zu anderen KI-Tools für VS Code

Der Markt für KI-Coding-Assistenten ist groß. Claude Code positioniert sich aber klar anders als GitHub Copilot oder Cursor – nicht als Autocomplete-Tool, sondern als autonomer Agent. Das ist ein entscheidender Unterschied im täglichen Workflow.

Während Copilot dir beim Tippen Vorschläge macht, kannst du Claude Code sagen: “Implementiere das gesamte Authentifizierungsmodul mit JWT, Refresh Tokens und Rate Limiting” – und Claude erledigt das eigenständig, über mehrere Dateien hinweg, mit Tests und Dokumentation. Dieser Ansatz ist besonders für größere Refactorings, Projektmigrationen und das Einarbeiten in fremden Code wertvoll.

Wer tiefer in die Möglichkeiten von Open-Source-KI-Assistenten und deren GitHub-Integration einsteigen möchte, findet dort weitere Ansätze für autonome Entwicklungsworkflows. Und wenn du überlegst, wie Claude Code in einen größeren Unternehmenskontext passt, lohnt sich ein Blick auf die Möglichkeiten einer professionellen KI-Unterstützung für Teams und Entwicklungsabteilungen.

FAQ: Claude Code in VS Code

Ist Claude Code für VS Code kostenlos?

Claude Code selbst ist kostenpflichtig und wird über die Anthropic API abgerechnet. Die Kosten hängen vom genutzten Modell und der Anzahl der verarbeiteten Token ab. Es gibt keine fixe monatliche Gebühr – du zahlst nur, was du tatsächlich nutzt. Für Einsteiger bietet Anthropic ein kostenloses Guthaben bei der Registrierung.

Funktioniert Claude Code auch ohne Internetverbindung?

Nein. Claude Code ist ein cloud-basierter Dienst und benötigt eine aktive Internetverbindung zur Anthropic API. Eine Offline-Nutzung ist technisch nicht möglich, da die KI-Berechnungen auf Anthropics Servern stattfinden.

Wie unterscheidet sich Claude Code von GitHub Copilot?

GitHub Copilot ist primär ein Autocomplete-Tool, das beim Tippen kontextbezogene Codevorschläge macht. Claude Code hingegen ist ein autonomer Agent: Er kann eigenständig Dateien lesen und bearbeiten, Terminal-Befehle ausführen, Tests schreiben und ganze Features über mehrere Dateien hinweg implementieren – ohne ständige manuelle Eingriffe.

Kann Claude Code meinen gesamten Code lesen?

Standardmäßig hat Claude Code Zugriff auf das Verzeichnis, in dem du ihn gestartet hast. Dateien außerhalb dieses Verzeichnisses sind nicht zugänglich, es sei denn, du gibst explizit einen anderen Pfad an. Du kannst den Zugriff über die Konfiguration weiter einschränken.

Welches Claude-Modell sollte ich für die VS Code Extension verwenden?

Das hängt von der Aufgabe ab. Für komplexe Architekturentscheidungen und mehrstufige Aufgaben empfiehlt sich claude-opus. Für alltägliche Coding-Aufgaben ist claude-sonnet eine gute Balance aus Geschwindigkeit und Qualität. Für einfache, schnelle Tasks reicht claude-haiku und ist deutlich günstiger.

Wie speichere ich Prompts für wiederkehrende Aufgaben?

Du kannst häufig genutzte Prompts als Slash-Befehle definieren. Erstelle dafür eine .claude/commands/-Verzeichnisstruktur in deinem Projekt und lege dort Markdown-Dateien mit deinen Standard-Prompts an. Diese stehen dann als eigene Befehle zur Verfügung, zum Beispiel /pr-review oder /write-tests.

Funktioniert Claude Code auf Windows genauso wie auf macOS?

Grundsätzlich ja, aber es gibt kleinere Unterschiede. Auf Windows empfiehlt sich die Nutzung von WSL2 oder Git Bash, um Pfadprobleme zu vermeiden. Die Grundfunktionalität – Extension installieren, Terminal öffnen, claude ausführen – funktioniert auf allen Plattformen identisch.

Kann ich Claude Code mit privaten GitHub-Repositories nutzen?

Ja. Über den GitHub-MCP-Server kannst du Claude Code Zugriff auf private Repositories geben. Du benötigst dafür ein GitHub Personal Access Token mit den entsprechenden Berechtigungen, das du in der MCP-Serverkonfiguration als Umgebungsvariable hinterlegst.