Claude Code for VS Code

✓ Official

Anthropic's official IDE extension: a sidebar panel with inline diffs — Claude Code visually inside VS Code instead of just in the terminal.

Claude Code for VS Code is Anthropic's official extension that brings the Claude Code CLI as a graphical panel directly into the editor. After signing in (Pro, Max, Team, or Enterprise account, no API key needed), a local MCP server called "ide" runs in the background: it binds to 127.0.0.1 on a random port, secures every connection with a freshly generated auth token, and provides the CLI with two tools — one reads diagnostics from VS Code's Problems panel, the other executes code in an active Jupyter kernel (always with a confirmation dialog). On top of that, Claude automatically sees your text selection and the path of the open file as context.

When Claude proposes a change, a side-by-side diff view opens that you can accept, reject, or edit further directly. Three permission modes control how much freedom Claude gets: Manual (asks before every change), Plan (shows the plan first as a markdown document for commenting), and Edit automatically. The panel can be freely dragged into the sidebar, an editor tab, or its own window, multiple parallel conversations are possible, and via /mcp you manage external MCP servers you previously added through the CLI with claude mcp add. With the Claude-in-Chrome extension installed, the panel can additionally control the browser (@browser ...). Per the VS Code Marketplace, it now has over 20 million installs.

🔧 SETUP

Check the VS Code version (at least 1.98.0 required)
Install the extension: Ctrl+Shift+X (Cmd+Shift+X on Mac) opens the Extensions view, search for "Claude Code" and click Install — or go directly via the link vscode:extension/anthropic.claude-code
The first time you open the panel, click "Sign in" and complete authorization in the browser (Pro/Max/Team/Enterprise account is enough, no API key needed)
Open the panel via the Spark icon in the editor toolbar (appears when a file is open) and send a prompt
Optional: add MCP servers in the integrated terminal with `claude mcp add`, then manage them with `/mcp` in the panel

✅ WHEN TO USE IT?

Quick bugfixes in your usual editor

You select a broken function, press Alt+K, describe the bug — Claude automatically sees your selection and proposes an inline diff change you can directly accept or reject.

Building a frontend and cross-checking it in the browser

With the Claude-in-Chrome extension installed, you type `@browser go to localhost:3000 and check the console for errors` in the panel — Claude tests its own change live right away, without you leaving the editor.

⛔ WHEN NOT TO?

CLI-only features are missing

Per the docs, the `!` bash shortcut, tab completion, and not all slash commands are available only in the terminal CLI, not fully in the VS Code panel.

Better: For the full feature set, additionally install the Claude Code CLI separately and start it in the integrated terminal with `claude`.

No automatic PATH entry

The extension bundles its own copy of the CLI for the panel but doesn't put `claude` on the terminal PATH.

Better: Perform the standalone CLI installation separately if `claude` should be directly callable in the terminal.