Claude Code Masterkurs – KI-gestuetztes Programmieren lernen mit Anthropics Coding-Agent

IDE-Integrationen

Level 3 | 35 Minuten

Claude Code in VS Code, JetBrains, Chrome und Desktop nutzen

Lernziele

Claude Code – Mehr als nur Terminal

Claude Code begann als reines Terminal-Tool, ist aber längst zu einer Plattform geworden die sich in verschiedene Entwicklungsumgebungen integriert. Vom VS Code Extension über JetBrains Plugins bis zur Chrome Extension und Web-Version — du kannst Claude Code dort nutzen wo du am produktivsten bist. Warum ist das wichtig? Weil Entwickler unterschiedliche Präferenzen haben. Manche leben im Terminal und brauchen nichts anderes. Andere arbeiten hauptsächlich in VS Code und wollen Claude direkt neben ihrem Code haben. Wieder andere brauchen Browser-Integration für Frontend-Testing. Die verschiedenen Integrationen teilen den gleichen Kern — die Claude Code Engine — aber bieten unterschiedliche Interaktionsmöglichkeiten. Das Terminal bietet maximale Kontrolle und Flexibilität. Die IDE-Extension bietet visuelle Integration und Kontext-Awareness. Die Web-Version bietet Zugänglichkeit ohne lokale Installation. Jede Integration hat spezifische Stärken: Im Terminal hast du volle Kontrolle über CLI-Flags, Pipes und Automatisierung. In VS Code siehst du Inline-Vorschläge direkt im Editor. Im Browser kannst du Webseiten analysieren und Frontend-Probleme debuggen. Du musst dich nicht für eine entscheiden — die meisten erfahrenen Nutzer kombinieren mehrere Integrationen. Terminal für komplexe Tasks und Automatisierung, VS Code für den täglichen Code-Workflow, Browser für Frontend-Arbeit. In dieser Lektion lernst du jede Integration im Detail kennen: Setup, Features, fortgeschrittene Nutzung und die besten Kombinationen für verschiedene Arbeitsweisen.

CLAUDE CODE ÖKOSYSTEM
━━━━━━━━━━━━━━━━━━━━

┌─────────────┐     ┌──────────────┐     ┌──────────────┐
│  Terminal    │     │  VS Code     │     │  JetBrains   │
│  (CLI)       │     │  Extension   │     │  Plugin      │
│  claude      │     │  Spark Icon  │     │  Beta        │
└──────┬──────┘     └──────┬───────┘     └──────┬───────┘
       │                   │                     │
       └───────────┬───────┴───────┬─────────────┘
                   │               │
            ┌──────┴──────┐  ┌─────┴──────┐
            │  Desktop    │  │  Chrome     │
            │  App        │  │  Extension  │
            └──────┬──────┘  └─────┬──────┘
                   │               │
            ┌──────┴──────┐  ┌─────┴──────┐
            │  Claude.ai  │  │  Slack      │
            │  Web        │  │  Bot        │
            └─────────────┘  └────────────┘

VS Code Extension – Setup

Die offizielle VS Code Extension bringt Claude Code direkt in deinen Editor. Du bekommst ein Chat-Panel, Inline-Code-Vorschläge und nahtlose Integration mit dem Terminal — alles ohne zwischen Fenstern wechseln zu müssen. Die Installation dauert weniger als eine Minute. Der Setup-Prozess: Öffne VS Code, gehe zum Extensions Marketplace (Ctrl+Shift+X), suche nach 'Claude Code', und installiere die offizielle Extension von Anthropic. Nach der Installation erscheint ein neues Claude Code Icon in der Seitenleiste. Beim ersten Start wirst du aufgefordert dich zu authentifizieren — entweder mit deinem bestehenden Claude Code Login oder über einen API-Key. Wenn du Claude Code bereits im Terminal nutzt, wird die Authentifizierung automatisch übernommen. Nach der Einrichtung hast du mehrere Möglichkeiten Claude zu nutzen: Das Chat-Panel in der Seitenleiste für längere Konversationen, die Inline-Suggestion für schnelle Fragen (markiere Code, Rechtsklick, 'Ask Claude'), und das integrierte Terminal das die gleiche Funktionalität wie die CLI bietet. Die Extension erkennt automatisch deinen Projektkontext: CLAUDE.md, offene Dateien, ausgewählten Code und die Cursor-Position. Wenn du Code markierst und Claude fragst, wird der markierte Code automatisch als Kontext mitgegeben. Besonders nützlich: Die Diff-Ansicht. Wenn Claude Code-Änderungen vorschlägt, siehst du sie als übersichtlichen Diff — genau wie bei einem Git-Commit. Du kannst Änderungen einzeln akzeptieren oder ablehnen. Ein Tipp für den Start: Konfiguriere die Extension so dass sie das gleiche Modell und die gleichen Einstellungen wie deine CLI nutzt. Konsistenz zwischen Terminal und IDE verhindert Verwirrung.

# Installation in VS Code:
# 1. Öffne VS Code
# 2. Ctrl+Shift+X (Extensions Marketplace)
# 3. Suche: "Claude Code"
# 4. Installiere die offizielle Anthropic Extension (2M+ Installs)
# 5. Klicke auf das Spark-Icon ✨ in der Sidebar

# Alternativ via CLI:
code --install-extension anthropic.claude-code

# Voraussetzungen:
# - VS Code 1.93 oder neuer
# - Claude Code CLI installiert
# - Aktive Authentifizierung (API Key oder Claude Pro/Max)

VS Code Extension – Features

Die VS Code Extension bietet deutlich mehr als nur einen Chat im Editor. Sie integriert sich tief in den VS Code Workflow und bietet Features die im Terminal nicht möglich sind — von visuellem Diff über Inline-Annotations bis zu automatischem Context aus offenen Tabs. Das Chat-Panel ist dein Hauptinteraktionspunkt. Es funktioniert wie die Terminal-Session, aber mit visuellen Extras: Syntax-Highlighting in Code-Blöcken, klickbare Dateireferenzen die direkt im Editor öffnen, und eine History die du durchblättern kannst. Inline-Suggestions: Markiere Code im Editor, klicke rechts, und wähle 'Ask Claude about this code'. Claude bekommt den markierten Code plus den umgebenden Dateikontext und kann gezielt Fragen beantworten: 'Was macht diese Funktion?', 'Gibt es hier Bugs?', 'Wie kann ich das refactoren?' Die Diff-Integration zeigt Claude's vorgeschlagene Änderungen als visuellen Diff — grüne Zeilen für Hinzufügungen, rote für Löschungen. Du kannst einzelne Hunks akzeptieren oder ablehnen, genau wie bei einem Pull Request Review. Automatischer Context: Die Extension fügt automatisch Informationen über deine aktuelle Arbeitsumgebung hinzu: Welche Dateien sind geöffnet, wo steht der Cursor, welche Linter-Fehler gibt es, welche Git-Änderungen sind staged. Claude kennt dadurch deinen aktuellen Arbeitskontext ohne dass du ihn erklären musst. Terminal-Integration: Das integrierte Terminal in VS Code funktioniert identisch zur standalone CLI. Du kannst Slash-Commands nutzen, MCP Server verwenden und alle CLI-Flags einsetzen — aber innerhalb der vertrauten VS Code Umgebung. Mein Empfehlung: Nutze das Chat-Panel für längere Aufgaben und Inline-Suggestions für schnelle Fragen. Die Kombination aus beiden deckt den Großteil des täglichen Workflows ab.

VS CODE EXTENSION vs. CLI
━━━━━━━━━━━━━━━━━━━━━━━━

Feature              │ VS Code Extension │ CLI
─────────────────────┼───────────────────┼──────────
Inline Diffs         │ ✅ Visuell        │ ❌ Text
File Referencing     │ ✅ @-Syntax       │ ✅ Pfade
Checkpoints/Rewind   │ ✅ Eingebaut      │ ❌ Manuell
Multiple Panels      │ ✅ Tabs           │ ⚠️ tmux
Subagents            │ ✅ Visual         │ ✅ Intern
MCP Server           │ ✅ Unterstützt    │ ✅ Unterstützt
Terminal-Zugriff     │ ✅ Integriert     │ ✅ Nativ
Custom Slash Cmds    │ ✅ Unterstützt    │ ✅ Unterstützt
Geschwindigkeit      │ ⚠️ IDE-Overhead  │ ✅ Schneller
Headless/CI          │ ❌ Nicht möglich  │ ✅ -p Flag
SSH/Remote           │ ✅ Remote Dev     │ ✅ SSH direkt

VS Code – Fortgeschrittene Nutzung

Power-User holen mit diesen fortgeschrittenen Features das Maximum aus der VS Code Extension. Von Keyboard-Shortcuts über Multi-File-Editing bis zu automatischem Background-Processing — diese Features beschleunigen deinen Workflow erheblich. Keyboard-Shortcuts sind der schnellste Weg Claude zu nutzen: Konfiguriere einen Shortcut für 'Open Claude Chat' (z.B. Cmd+Shift+C), einen für 'Ask Claude about Selection' (z.B. Cmd+Shift+A), und einen für 'Accept Claude's Suggestion' (z.B. Cmd+Enter). Damit brauchst du die Maus kaum noch. Multi-File-Context: Du kannst mehrere Dateien explizit als Kontext angeben indem du @-Referenzen im Chat nutzt. '@src/auth/login.ts @src/middleware/auth.ts Prüfe ob die Authentifizierung konsistent implementiert ist' — Claude liest beide Dateien und analysiert sie zusammen. Die Extension unterstützt auch VS Code Tasks und Launch-Configurations. Du kannst Claude Code Befehle als VS Code Tasks definieren die per Shortcut oder automatisch bei bestimmten Events ausgelöst werden. Fortgeschrittene Diff-Navigation: Bei großen Änderungen über mehrere Dateien zeigt die Extension eine Übersicht aller betroffenen Dateien. Du kannst durch die Diffs navigieren und für jede Datei einzeln entscheiden ob du die Änderungen akzeptierst. Workspace-Settings: Konfiguriere Claude Code Einstellungen pro Workspace in .vscode/settings.json. Zum Beispiel verschiedene Modelle für verschiedene Projekte, oder spezielle MCP Server die nur in bestimmten Workspaces aktiv sind. Ein Profi-Tipp: Nutze die Extension zusammen mit der Cursor IDE — beide unterstützen die gleichen Claude Code Features, aber Cursor bietet zusätzlich eigene KI-Features die sich mit Claude Code ergänzen.

// VS Code Settings für Claude Code (settings.json)
{
  // Claude Code Panel Position
  "claudeCode.panelPosition": "sidebar",
  
  // Automatisch Terminal-Output inkludieren
  "claudeCode.includeTerminalOutput": true,
  
  // Diff-Anzeige konfigurieren
  "claudeCode.diffStyle": "inline",
  
  // MCP Server auch in Extension nutzen
  "claudeCode.mcpServers": true,
  
  // Plugins verwalten
  "claudeCode.pluginMarketplace": true
}
# Terminal-Output in Prompts inkludieren:
# 1. Markiere Text im VS Code Terminal
# 2. Rechtsklick → "Include in Claude Prompt"
# 3. Der Terminal-Output wird automatisch als Kontext hinzugefügt

# Zwischen Extension und CLI wechseln:
# In der Extension: Ctrl+` öffnet Terminal
# Im Terminal: claude --switch-to-extension

# Parallele Konversationen:
# Klicke auf "+" neben dem Claude Tab
# Jede Konversation hat eigenen Context
# Ideal für: Frontend + Backend gleichzeitig

# Remote Development:
# VS Code Remote SSH → Claude Code Extension funktioniert
# DevContainers → Claude hat Zugriff auf Container-Dateien
# GitHub Codespaces → Vollständig unterstützt

JetBrains Plugin (Beta)

Für IntelliJ IDEA, PyCharm, WebStorm, GoLand und andere JetBrains IDEs gibt es ein offizielles Claude Code Plugin. Es ist aktuell in Beta, aber bereits für den täglichen Einsatz brauchbar. Die Funktionalität ist ähnlich zur VS Code Extension, angepasst an die JetBrains-Oberfläche und Workflows. Die Installation erfolgt über den JetBrains Marketplace: Settings → Plugins → Marketplace → 'Claude Code' suchen und installieren. Nach dem Neustart erscheint ein Claude Code Tool-Window in der Seitenleiste. Die Kernfeatures sind identisch zur VS Code Extension: Chat-Panel für Konversationen, Code-Markierung mit Kontextmenü für schnelle Fragen, Diff-Ansicht für vorgeschlagene Änderungen, und Terminal-Integration für CLI-Zugriff. Der Vorteil der JetBrains-Integration: Sie nutzt die mächtigen Code-Analyse-Features der IDE. Wenn du IntelliJ's Code-Inspections, Refactoring-Tools und Debugger bereits kennst, fügt Claude sich nahtlos in diesen Workflow ein. Als Beta hat das Plugin noch einige Einschränkungen: Nicht alle Claude Code Features sind verfügbar, die Performance kann bei sehr großen Projekten noch optimiert werden, und manche JetBrains-spezifische Integrationen fehlen noch. Prüfe die Release-Notes regelmäßig auf Updates. Für JetBrains-Nutzer die hauptsächlich Java, Kotlin, Python oder Go entwickeln, ist das Plugin trotz Beta-Status eine deutliche Verbesserung gegenüber dem separaten Terminal — vor allem wegen des automatischen Kontexts aus der IDE. Mein Tipp: Installiere das Plugin und nutze es für den Chat-Workflow. Für komplexe Automatisierung und CLI-Features nutze zusätzlich das Terminal. Die Kombination aus beiden gibt dir das Beste aus beiden Welten.

JETBRAINS PLUGIN INSTALLATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Unterstützte IDEs:
- IntelliJ IDEA
- PyCharm
- WebStorm
- PhpStorm
- Rider
- GoLand
- RubyMine

Installation:
1. Settings → Plugins → Marketplace
2. Suche: "Claude Code"
3. Install & Restart
4. Tool Window: View → Tool Windows → Claude Code

Einschränkungen (Beta):
- Noch keine Inline-Diffs (kommt bald)
- Kein Checkpoint/Rewind
- Basiert auf CLI im Hintergrund
- Terminal-Output-Integration begrenzt

Vorteile:
- Nativer JetBrains Look & Feel
- Projekt-Navigation integriert
- Refactoring-Tools kombinierbar
- Kein IDE-Wechsel nötig

Chrome Extension (Beta)

Die Chrome Extension bringt Claude Code in deinen Browser. Sie ist besonders wertvoll für Frontend-Entwickler: Du kannst Webseiten analysieren, Screenshots als Kontext nutzen, und Claude direkt im Browser-Tab Fragen zu UI-Problemen stellen. Die Extension ermöglicht zwei Hauptszenarien: Erstens, Web-Testing — Claude kann eine Webseite analysieren, Accessibility-Probleme finden, Performance-Metriken prüfen und UI-Bugs identifizieren. Zweitens, Context-Sharing — du kannst Inhalte einer Webseite (Dokumentation, API-Specs, Design-Mockups) direkt als Kontext an Claude senden. Die Installation erfolgt über den Chrome Web Store oder über Claude Code's /install-chrome-extension Befehl. Nach der Installation kannst du die Extension über das Claude Code Icon in der Browser-Toolbar aufrufen. Besonders nützlich ist die Screenshot-Funktion: Du machst einen Screenshot einer Webseite und sendest ihn an Claude mit einer Frage wie 'Was stimmt mit dem Layout nicht?' oder 'Wie kann ich dieses Design in React umsetzen?'. Claude analysiert das Bild und gibt konkretes Code-Feedback. Die Extension kann auch mit der CLI und der IDE-Extension zusammenarbeiten. Zum Beispiel: Du identifizierst ein UI-Problem im Browser, sendest den Screenshot an Claude, und Claude implementiert den Fix direkt in VS Code — ein nahtloser Cross-Tool-Workflow. Als Beta ist die Extension noch experimentell. Die Stärke liegt klar in der Frontend-Entwicklung — für Backend-Arbeit bleibst du besser bei Terminal oder IDE. Ein Hinweis zur Sicherheit: Die Extension braucht bestimmte Browser-Berechtigungen. Prüfe welche Berechtigungen sie anfordert und stelle sicher dass du damit einverstanden bist, besonders auf Seiten mit sensiblen Daten.

# Chrome Extension aktivieren:
# 1. Chrome Web Store → "Claude Code" Extension installieren
# 2. In VS Code: Extension verbindet sich automatisch

# Was kann die Chrome Extension?
# → Claude kann Webseiten sehen und analysieren
# → Browser-Automation (Klicken, Tippen, Navigieren)
# → Screenshots von Webseiten machen
# → Visuelles Debugging (wie sieht meine App aus?)

# Beispiel-Workflow:
> "Öffne localhost:3000 und prüfe ob das Login-Formular
>  korrekt dargestellt wird"

# Claude öffnet Chrome, macht Screenshot, analysiert:
# → "Das Login-Formular wird dargestellt, aber der
#    Submit-Button hat keinen Hover-Effekt. Soll ich
#    das CSS anpassen?"

# Besonders nützlich für:
# - Frontend-Entwicklung mit visuellem Feedback
# - E2E-Testing Unterstützung
# - Responsive Design prüfen
# - Accessibility-Checks

Claude Code on Desktop & Web

Neben Terminal, IDE und Browser gibt es Claude Code auch als Web-Anwendung auf claude.com/code und als Teil der Desktop-App. Jede Variante hat spezifische Stärken und eignet sich für unterschiedliche Szenarien. Die Web-Version (claude.com/code) ermöglicht es Claude Code komplett im Browser zu nutzen — ohne lokale Installation. Claude Code läuft in einer isolierten Sandbox in der Cloud mit vollem Dateisystem- und Terminal-Zugriff. Das ist perfekt für schnelle Experimente, für die Arbeit auf fremden Rechnern oder wenn du keine lokale Entwicklungsumgebung einrichten willst. Der Vorteil der Web-Version: Keine Installation nötig, läuft überall wo ein Browser verfügbar ist, und die Cloud-Sandbox bietet eine sichere Ausführungsumgebung. Der Nachteil: Du arbeitest nicht mit deinem lokalen Dateisystem und musst den Code erst synchronisieren (z.B. über Git). Die Desktop-Version integriert sich in die reguläre Claude App und bietet Claude Code als Feature innerhalb der bekannten Oberfläche. Du kannst zwischen normalen Chat-Konversationen und Claude Code Sessions wechseln. Für den typischen Entwickler-Alltag empfehle ich: Terminal oder IDE-Extension als Hauptwerkzeug (lokaler Dateizugriff, maximale Kontrolle), Web-Version für Demos und Remote-Arbeit (kein Setup nötig), Desktop-App für Ad-hoc-Fragen die keinen Projektkontext brauchen. Die verschiedenen Plattformen teilen dein Anthropic-Konto und die Modell-Konfiguration. Sessions werden jedoch NICHT synchronisiert — eine im Terminal gestartete Session kannst du nicht in der Web-Version fortsetzen (Stand Februar 2026, kann sich ändern). Ein Profi-Tipp: Nutze die Web-Version von Claude Code für das Onboarding neuer Teammitglieder. Sie können sofort mit Claude Code experimentieren ohne erst eine lokale Umgebung einrichten zu müssen.

Git Worktrees für parallele Tasks

Git Worktrees sind ein selten genutztes aber extrem mächtiges Git-Feature das perfekt zu Claude Code's Multi-Agent-Fähigkeiten passt. Sie erlauben dir, mehrere Branches gleichzeitig in verschiedenen Verzeichnissen ausgecheckt zu haben — jeder mit seinem eigenen Working Directory, aber mit gemeinsamer Git-History. Das Problem das Worktrees lösen: Du arbeitest an Feature A, aber plötzlich kommt ein dringender Hotfix. Normalerweise müsstest du: Änderungen stashen oder committen, Branch wechseln, Hotfix machen, Branch zurückwechseln, Stash poppen. Mit Worktrees hast du einfach zwei parallele Verzeichnisse — eines für Feature A und eines für den Hotfix. Mit Claude Code wird das noch mächtiger: Du kannst in jedem Worktree eine eigene Claude Code Session laufen lassen. Eine Session arbeitet an Feature A, eine andere am Hotfix — parallel, ohne sich gegenseitig zu beeinflussen. Jede Session hat ihren eigenen Kontext und ihre eigene CLAUDE.md. So richtest du Worktrees ein: 'git worktree add ../feature-a feature/my-feature' erstellt ein neues Verzeichnis 'feature-a' mit dem Branch 'feature/my-feature'. Du wechselst ins neue Verzeichnis und startest dort Claude Code. Das Original-Verzeichnis bleibt auf dem Hauptbranch. Besonders wertvoll für Background Agents: Du startest einen Claude Code Background Agent in einem Worktree der ein großes Refactoring durchführt, und arbeitest gleichzeitig in deinem Haupt-Worktree an einem anderen Feature. Keine Konflikte, keine Branch-Wechsel. Für Teams: Worktrees funktionieren pro Entwickler lokal. Jeder kann seine eigene Worktree-Struktur haben. Die Ergebnisse werden über normale Git-Workflows (Push, PR, Merge) zusammengeführt. Mein Empfehlung: Erstelle einen Worktree für jede parallele Claude Code Session. Das kostet minimal Speicherplatz (nur die geänderten Dateien werden kopiert) und eliminiert Branch-Wechsel-Overhead komplett.

# Git Worktrees = Mehrere Branches gleichzeitig bearbeiten
# Perfekt für parallele Claude Code Sessions!

# Worktree erstellen:
git worktree add ../my-project-feature-auth feature/auth
git worktree add ../my-project-fix-bug fix/login-bug

# Jetzt kannst du:
# Terminal 1: cd ../my-project-feature-auth && claude
# Terminal 2: cd ../my-project-fix-bug && claude
# → Zwei unabhängige Claude Code Sessions!
# → Kein Context-Konflikt zwischen Features

# Worktree entfernen wenn fertig:
git worktree remove ../my-project-feature-auth

# VS Code: Jeder Worktree als eigenes Fenster öffnen
code ../my-project-feature-auth
code ../my-project-fix-bug
🎓 Empfehlung Für den Einstieg: VS Code Extension (visuell, intuitiv) Für Profis: CLI im Terminal (maximale Kontrolle) Für Teams: VS Code Extension + Slack Integration Für CI/CD: CLI mit -p Flag (Headless Mode) Für Frontend: VS Code + Chrome Extension