Claude Code VS Code Extension: Setup and Workflow

The Claude Code VS Code extension puts Anthropic's coding agent inside your editor: a sidebar chat panel, inline diff review before any file changes, @-mentions with line ranges, and editable plans. Install it from the VS Code Marketplace, sign in with a paid Claude plan (Pro or higher) or a Console account, and delegate work without leaving the editor.

That's the short answer. Here's the longer one, from experience: we run this site with Claude Code daily — the terminal CLI for long autonomous runs, the extension whenever we want to watch every edit land in a real diff viewer. New to the agent itself? Start with our pillar guide, What Is Claude Code?, then come back for the editor setup.

What the Claude Code VS Code extension adds over the CLI

The terminal CLI is Claude Code — the extension doesn't replace it. It wraps the same engine, the same models, and the same configuration in a native panel, then adds the visual layer a terminal can't offer. Anthropic's official VS Code documentation now calls it the recommended way to run Claude Code in VS Code, and five features earn that label:

1. A sidebar agent panel. Chat with the agent in a dockable panel — drag it to the secondary sidebar, the left sidebar, or open it as an editor tab. Multiple conversations run in parallel tabs, each with its own context and history.
2. Inline diff review. When Claude wants to edit a file, the extension opens a side-by-side comparison before anything touches disk. Accept, reject, or edit the proposal directly in the diff view — the extension tells Claude when you've modified it, so it never assumes the file matches its original suggestion.
3. Plans you can annotate. In Plan mode, the extension opens Claude's plan as a full markdown document. Add inline comments on the parts you'd do differently before the agent writes a single line.
4. Editor context for free. Claude automatically sees your selected text — the prompt box footer counts the highlighted lines. Press Alt+K (Option+K on Mac) to drop an @-mention like @auth.ts#5-10 straight into your prompt.
5. Searchable session history. Every conversation gets an AI-generated title and resumes with full history. A Remote tab even pulls in cloud sessions you started on claude.ai.

One detail trips up nearly everyone: the extension bundles its own private copy of the CLI for the chat panel, but it does not put claude on your PATH. To run the CLI in the integrated terminal, install it separately.

Installing the Claude Code extension in VS Code

Setting up the extension took us under two minutes:

1. Check your editor version. The extension needs VS Code 1.98.0 or higher (Help → About).
2. Install from the marketplace. Open the Extensions view with Ctrl+Shift+X (Cmd+Shift+X on Mac), search "Claude Code", and install the Anthropic-published listing — the same one hosted on the Visual Studio Marketplace. Guides interchangeably call it the Claude Code VSCode extension; either way, don't confuse it with "Claude Dev," a community project now named Cline.
3. Open the panel. Click the Spark icon in the editor toolbar — it appears once a file is open — or hit the Command Palette (Ctrl+Shift+P) and type "Claude Code".
4. Sign in. A browser window handles authorization. Any paid Claude subscription works: Pro at $20/month, Max at $100 or $200/month, Team, or Enterprise. A Claude Console account works too, and you don't need an API key. The Free plan does not include Claude Code, full stop.

If the Spark icon doesn't show after installing, run "Developer: Reload Window" from the Command Palette — in our experience that fixes it nine times out of ten.

The core workflow: delegate, review, steer

Running Claude Code in VS Code settles into a three-beat loop once the panel is docked.

Delegate in Plan mode. Click the mode indicator at the bottom of the prompt box and switch to Plan. Describe the task — "add rate limiting to the contact form API" — and Claude researches the codebase, then hands back a plan as an editable document. Comment, adjust, approve.

Review every diff. With default permissions, Claude asks before each edit, and the change opens in VS Code's native diff viewer. This is the extension's single biggest win over the terminal: you read green and red lines in the editor you already trust instead of a re-printed patch in the scrollback. We reject maybe one diff in ten, and every rejection carries a note telling Claude what to do instead.

Steer with context. Highlight the exact lines you're discussing before prompting — the selection travels with the message. Reference command output with @terminal:name rather than pasting logs. And when a session goes sideways, hover over an earlier message and use checkpoints to rewind the code, fork the conversation, or both at once.

Four shortcuts carry most of our VS Code Claude Code workflow:

Claude Code VS Code extension vs CLI vs desktop app

Same agent, three front ends. Here's how we split our own time between them:

The CLI remains the superset — every command, hook, and flag ships there first, and our Claude Code CLI documentation guide maps that surface. The Claude Code desktop app sits at the other end: less depth per session, more sessions at once. The extension is the middle path, and nothing is siloed — run claude --resume in a terminal to continue any conversation the extension started, because both read the same history, the same CLAUDE.md, the same hooks, and the same MCP servers.

Yes, it works in Cursor and other VS Code forks

Anthropic ships a one-click install path for Cursor, and the Claude Code VS Code extension also loads in forks like Devin Desktop and Kiro — search the fork's Extensions view or pull it from the Open VSX registry. We keep it installed inside Cursor on one machine: Cursor's own agent and Claude Code coexist without conflict, and comparing them side by side is exactly how we wrote Cursor vs Claude Code. If a fork refuses the extension outright, the fallback never fails: open that editor's integrated terminal and run the CLI there.

Settings worth changing on day one

The defaults are sensible, but a few edits made the Claude Code VS Code extension ours — all under Extensions → Claude Code in VS Code settings:

Two more habits worth stealing. First, keep shared configuration in ~/.claude/settings.json, not in VS Code settings — the extension and CLI both read it, so permissions and hooks stay identical across surfaces. Second, resist bypassPermissions outside a sandbox; the diff-review step is the reason to use the extension at all.

Claude pricing at a glance

For the full breakdown of every plan, see our how much Claude costs guide.