Zwei Wege: Extension vs. Terminal-im-Editor
Claude Code ist primär ein CLI-Tool. In VS Code gibt es zwei Ansätze, die sich ergänzen:
- Claude Code Extension (offiziell): Direkte IDE-Integration mit Sidebar, @-Mentions für Dateien, Diff-View für Änderungen
- Integriertes Terminal: Standard
claude CLI im VS Code Terminal — voller Zugriff, keine Einschränkungen
Die meisten Power-User nutzen beide: Extension für schnelle Edits und Erklärungen, Terminal für komplexere autonome Tasks.
Setup: Claude Code Extension
1Extension installieren
# VS Code Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
Extensions: Install Extensions
→ Suche: "Claude Code"
→ Publisher: Anthropic
→ Install
# Oder via CLI:
code --install-extension anthropic.claude-code
2API Key konfigurieren
Die Extension liest denselben API Key wie das CLI — du musst ihn nicht doppelt einrichten.
# Wenn ANTHROPIC_API_KEY in .bashrc/.zshrc gesetzt ist:
# Extension findet ihn automatisch — fertig.
# Falls nicht: VS Code Settings (Ctrl+,) →
# Suche "claude" → "Anthropic API Key" → eintragen
# ODER: .env im Projekt-Root (Extension liest das auch):
ANTHROPIC_API_KEY=sk-ant-api03-...
Nicht doppelt pflegen. Setze den Key einmalig als Umgebungsvariable in deinem Shell-Profil — dann funktionieren Extension und CLI immer synchron.
3Extension-Features nutzen
# @-Mention für Datei-Kontext in Chat:
"Refaktoriere @src/auth/middleware.ts — extrahiere die Token-Validierung"
# Aktuell geöffnete Datei als Kontext:
Cmd+Shift+P → "Claude Code: Chat with current file"
# Selection → Claude Code:
Code markieren → Rechtsklick → "Ask Claude Code"
# Quick Fix für Fehler:
Auf rote Unterwellung hovern → Lightbulb → "Fix with Claude Code"
Terminal-Integration (Power-User-Setup)
4Integrated Terminal konfigurieren
# settings.json — Terminal-Konfiguration
{
"terminal.integrated.defaultProfile.osx": "zsh",
"terminal.integrated.defaultProfile.linux": "bash",
"terminal.integrated.env.osx": {
"ANTHROPIC_API_KEY": "${env:ANTHROPIC_API_KEY}"
},
// Terminal panel unten: Ctrl+` öffnet/schließt
"terminal.integrated.fontSize": 13,
// Split: Editor links, Terminal rechts
"terminal.integrated.splitCwd": "workspaceRoot"
}
5VS Code Terminal Layout für Claude Code
Das optimale Layout: Editor oben, Terminal unten (oder rechts). Claude Code läuft im Terminal, sieht aber dieselben Dateien wie du im Editor.
# Empfohlenes Layout:
# ┌─────────────────────────────────┐
# │ Explorer │ Editor │
# │ (links) │ (Mitte/Hauptteil) │
# ├────────────┴────────────────────┤
# │ Terminal: claude │
# │ (unten, ~30% Höhe) │
# └─────────────────────────────────┘
# Terminal öffnen: Ctrl+` (backtick)
# Claude starten:
cd /dein/projekt && claude
Keyboard Shortcuts
| Aktion |
Mac |
Windows/Linux |
| Terminal öffnen/schließen |
Ctrl+` |
Ctrl+` |
| Neues Terminal-Tab |
Cmd+Shift+5 |
Ctrl+Shift+5 |
| Claude Extension Chat öffnen |
Cmd+Shift+C |
Ctrl+Shift+C |
| Aktuelle Datei zu Claude |
Cmd+Shift+P → "Claude" |
Ctrl+Shift+P → "Claude" |
| Quick Fix mit Claude |
Cmd+. auf Fehler |
Ctrl+. auf Fehler |
| Terminal Panel vergrößern |
Cmd+J |
Ctrl+J |
MCP-Server in VS Code nutzen
MCP-Server (Model Context Protocol) erweitern Claude Code mit zusätzlichen Tools. In VS Code konfiguriert du sie in der Claude Code Extension oder direkt in ~/.claude/settings.json:
# ~/.claude/settings.json — MCP-Konfiguration
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem",
"/Users/du/projekte"]
},
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_TOKEN": "${env:GITHUB_TOKEN}"
}
},
"postgres": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres",
"postgresql://localhost/mydb"]
}
}
}
MCP-Server prüfen: Im VS Code Terminal claude --mcp-debug zeigt welche Server verbunden sind und ob Tools erkannt werden.
CLAUDE.md für VS Code Projekte
In VS Code-Projekten empfiehlt sich eine CLAUDE.md die VS Code-spezifische Konventionen enthält:
# CLAUDE.md — VS Code Projekt-Konfiguration
## IDE-Kontext
- IDE: VS Code mit ESLint + Prettier
- Launch-Config: .vscode/launch.json — NIEMALS ändern
- Tasks: .vscode/tasks.json — Build-Scripts nicht anfassen
## Coding-Standards (VS Code Projekt)
- Formatter: Prettier (config in .prettierrc)
- Linter: ESLint (config in .eslintrc.json)
- Vor Commit: `npm run lint && npm run test` (läuft auch via Task)
## Wichtige VS Code Extension Einstellungen
- TypeScript: strict mode aktiv
- Import-Pfade: relative Importe für gleiche Ebene, @/ alias für src/
## Dateien die du NICHT veränderst
- .vscode/settings.json
- .vscode/extensions.json
- .eslintrc.json (außer bei explizitem Auftrag)
Der optimale tägliche Workflow
Täglicher VS Code + Claude Code Workflow
VS Code öffnen — Claude Extension Auto-Start
Terminal öffnen (Ctrl+`) → `claude` starten
Task definieren: "Schaue dir @src/api/users.ts an — füge Pagination hinzu"
Claude liest Dateien, schlägt Änderungen vor — du siehst Diff im Editor
Änderungen annehmen → Tests laufen → git commit
Nächster Task — Claude behält den Kontext im laufenden Prozess
VS Code Setup im Kurs
Im Claude Code Mastery Kurs findest du das vollständige VS Code Setup-Video: Extension konfigurieren, MCP-Server einrichten, optimale Keyboard-Shortcuts und der tägliche Workflow der Zeit spart.
14 Tage kostenlos testen →