Connect Claude Code to VS Code and Cursor for inline AI development.
Module · Environment + Workspace Setup
Lesson 6 of 26 available lessons
Claude Code is terminal-first — but it doesn't have to stay in the terminal. The IDE integration connects Claude Code to VS Code (and its forks, Cursor and Windsurf) and to JetBrains editors, so edits arrive as native diffs in your editor, your current selection becomes context, and Claude sees the same lint and type errors you do.
By the end, Claude Code will be wired into your editor and you'll know the handful of keybindings that make it fast to drive.
ℹThe terminal is still the engine
The IDE integration is a surface, not a replacement. Claude Code still runs as the CLI operator — the extension just gives it an editor-native diff view, your selection as context, and access to your IDE's diagnostics. You lose nothing by connecting; you gain a tighter review loop.
Both are valid. The difference is the review surface, not the capability.
| Terminal-only | IDE-connected | |
|---|---|---|
| Where edits show | Unified diff in the terminal | Native diff in your editor's diff viewer |
| Selection context | You paste code manually | Highlighted code is shared automatically |
| Errors Claude can see | Only what a command prints | Live lint + type diagnostics from the IDE |
| File references | Full paths, typed out | @-mention with path completion |
| Best for | Servers, quick tasks, SSH | Real feature work you review closely |
If you review Claude's diffs carefully — and on production code you should — the IDE surface is worth the two-minute setup.
VS Code / Cursor / Windsurf (all VS Code–based): open the editor's integrated terminal, move into your project, and launch Claude Code. On first launch inside a supported editor it offers to install the companion extension.
cd /path/to/your/project
claude
# First launch inside the editor prompts to install the
# "Claude Code" extension — accept it, then relaunch.You can also install it by hand: search "Claude Code" in the Extensions marketplace and install it.
JetBrains (IntelliJ, PyCharm, WebStorm, etc.): install the Claude Code plugin from Settings → Plugins → Marketplace, then restart the IDE.
⚠Launch from the editor's own terminal
The extension auto-connects only to the editor whose integrated terminal launched Claude Code. If you run claude in an external terminal (iTerm, Windows Terminal), it won't attach to your editor until you connect it manually — see the next step.
If you launched from the integrated terminal, Claude Code auto-connects. If you started it elsewhere, connect explicitly with /ide:
Confirm the connection is live:
Two things change the moment the IDE is connected.
Selection becomes context. Highlight a function in the editor, then refer to it directly — Claude receives the exact selected range, not a guess.
Refactor the selected function to return early instead of nesting.Diagnostics become shared. Claude sees your editor's live TypeScript and lint errors, so a prompt like this works against the real problem list rather than a re-run of the build:
Fix the type errors the editor is showing in this file.File references get shorter. Type @ to reference a file by path with completion, instead of pasting its contents into the prompt:
Compare @lib/tracks.ts against @lib/lesson-content.ts and tell me where a lesson can exist in one but not the other.You only need a few. These are the ones worth committing to muscle memory.
Claude Code IDE keybindings & commands
Cmd+Esc / Ctrl+EscOpen Claude Code from the editor (Mac / Windows-Linux).
Cmd+Esc
/ideConnect Claude Code to the current IDE from the integrated terminal.
> /ide
/terminal-setupBind Shift+Enter for multi-line prompts (VS Code and iTerm).
> /terminal-setup
@Reference a file by path inline, with completion, instead of pasting it.
> review @lib/tracks.ts
EscInterrupt Claude mid-task without ending the session — then redirect it.
Esc
ℹExact bindings can vary
Editors and platforms occasionally remap shortcuts, and you can rebind them yourself. If Cmd+Esc doesn't open Claude Code, run /help or open the command palette and search "Claude Code" to see the binding your setup actually uses.
Cursor and Windsurf are VS Code forks, so the same extension and shortcuts apply. But they ship their own AI agents — and that's where operators get burned.
Failure Pattern — Two AI operators editing the same file
✕ Before (broken pattern)
# Cursor's agent and Claude Code both "helping" at once: # 1. Claude Code edits lib/tracks.ts (adds a lesson entry) # 2. Cursor's autocomplete "fixes" an import in the same file # 3. Claude Code's next Edit fails — the old_string no longer # matches, because Cursor changed the file underneath it # 4. You spend 20 minutes reconciling two AI models of one file
✓ After (production pattern)
# One operator model of the codebase at a time: # - Claude Code owns file edits, git, and terminal # - Cursor's agent/autocomplete disabled while Claude works # (or: use plain VS Code for Claude Code sessions) # The file only changes through one actor. Edits apply cleanly.
Lesson: A VS Code fork's built-in AI and Claude Code are two operators with two independent models of your files. Let only one edit at a time. Pick Claude Code for agentic work and pause the editor's own agent — the conflict costs more than either tool saves.
IDE integration verified
Milestone 4
Foundations complete. Claude Code now runs where you work — native diffs, selection as context, and shared diagnostics — with the keybindings to drive it fast. You've finished the Foundations module: an authenticated, permission-scoped, CLAUDE.md-briefed, editor-connected operator setup, end to end. From here the track moves from setup to execution.
Claude Code — IDE integrations
Official setup and feature reference for the VS Code and JetBrains integrations.
Claude Code — terminal & keybinding setup
How to configure multi-line input, key bindings, and terminal behavior.