If you searched "claude code vscode," here's the whole answer: install the official Claude Code extension (publisher: Anthropic) from the VS Code Marketplace, open a file, click the Spark icon in the top-right editor toolbar, and sign in with a paid Claude account. The extension ships with its own copy of the Claude Code CLI, so that's genuinely all it takes — no Node install, no separate CLI, no API key.
That last part is what most older tutorials get wrong: the graphical panel is self-contained. You only need a separate install for the claude command in your terminal — covered at the end.
Prerequisites#
- VS Code 1.94.0 or higher (Help → About to check). The extension also installs in forks like Cursor via Open VSX.
- A paid Claude account: any Claude subscription (Pro, Max, Team, or Enterprise) or a Claude Console account. No API key required — you sign in through the browser. The free Claude.ai plan does not include Claude Code.
- Nothing else for the panel. The extension bundles the CLI it needs. Node.js is not a prerequisite; it only matters if you later install the standalone CLI via npm (which wants Node 22+), and even the native installer ships a binary that doesn't use Node.
- Optional: the standalone Claude Code CLI, if you want to run
claudein the integrated terminal.
1. Install the extension#
The Marketplace path. In VS Code, press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open the Extensions view, search Claude Code, confirm the publisher is Anthropic, and click Install. Or use the direct link vscode:extension/anthropic.claude-code. If the extension doesn't appear afterward, run Developer: Reload Window from the Command Palette.
The claude auto-install path. If you already have the standalone CLI, you don't have to touch the Marketplace. Open VS Code's integrated terminal and run:
claudeRunning claude inside a VS Code terminal auto-installs the IDE extension for you. If you'd rather it didn't, turn off Auto-install IDE extension in /config, set autoInstallIdeExtension to false, or set the CLAUDE_CODE_IDE_SKIP_AUTO_INSTALL environment variable to 1.
The first time you open the panel, a sign-in screen appears. Click Sign in and finish authorization in your browser.
2. What changes vs. the terminal#
Running Claude Code inside the editor buys you a real GUI on top of the same engine:
- Inline diffs. When Claude wants to edit a file in Manual mode, it opens a side-by-side comparison in VS Code's native diff viewer and asks permission. You can accept, reject, or tell Claude what to do instead — and if you tweak the proposed change directly in the diff before accepting, Claude is told you modified it.
- Automatic selection sharing. Highlight code and Claude sees it automatically; the prompt box footer shows how many lines are selected. Press
Option+K(Mac) /Alt+K(Windows/Linux) to insert an@-mention with the exact range, like@app.ts#5-10.@-mention any file or folder with fuzzy matching. - Plan mode you can edit. In Plan mode Claude describes its approach and waits. VS Code opens that plan as a full Markdown document with inline comments, so you steer the work before a single line changes — the single best habit for non-trivial tasks.
- A panel that lives where you want it. Dock Claude in the secondary sidebar to keep it visible while you code, or open it as an editor tab for side tasks. Session history, multiple parallel conversations in tabs, and checkpoint rewind are all there.
Under the hood, a small local ide MCP server is what opens those diffs, reads your selection, and pulls language-server diagnostics.
3. The everyday workflow#
The loop is short:
- Open the file you're working in. Click the Spark icon (top-right of the editor) to open the panel.
Cmd+Esc/Ctrl+Esctoggles focus between editor and Claude. - Point at the code. Select the lines in question and press
Option+K/Alt+Kto attach them as a reference, or just@-mention a file. - Ask in plain language: "why does this throw on an empty array?" or "add pagination to this endpoint."
- Review the diff and accept or reject.
Cmd+Shift+Esc/Ctrl+Shift+Escopens a fresh conversation in a new tab when you want to keep tasks separate.
One honest heads-up for solo builders: on Pro, Max, and Team plans the panel starts in Auto mode, where a classifier approves most edits instead of you. That's fast, but Claude changes files without asking by default. Click the mode indicator at the bottom of the prompt box and switch to Manual when you want to eyeball every diff — for instance when Claude is touching config files VS Code executes automatically. (Keeping a long session's context clean is its own skill; see how to manage context in a long-running agent.)
4. When to stay in the terminal instead#
The extension exposes a subset of Claude Code. Drop to the CLI when you hit its edges:
- CLI-only commands and skills. Type
/in the panel to see what's available; it's a subset of the full command set. The!bash shortcut and tab completion are terminal-only. - Piping and automation. Headless runs like
tail -200 app.log | claude -p "flag anomalies"orclaude -pin CI belong in a shell, not a chat panel. - Background processes. The extension's visibility into long-running tasks is limited; the terminal shows more.
To run the CLI without leaving VS Code, open the integrated terminal (Ctrl+` / Cmd+`) and run claude. The catch worth repeating: installing the extension does not put claude on your PATH — the bundled copy is private to the panel. You need the standalone install (curl -fsSL https://claude.ai/install.sh | bash on macOS/Linux) for the terminal command. From an external terminal, run /ide inside Claude to connect back to VS Code for diff viewing.
Extension and CLI share the same history, so claude --resume picks up a panel conversation and vice versa. Use the panel to review and shape changes; use the terminal for scripting and scale. For picking the model underneath, our open-source LLM for coding roundup covers the local alternatives.
