Install the official Claude Code extension from the VS Code Extensions view (search for Claude Code), open it with the Spark icon and sign in with a paid Claude plan or Console account; no API key is needed. Use the extension when you want visual diffs, automatic selection context and plan review. Install the standalone CLI too, because the extension does not put claude on your PATH, and switch to the terminal for the full command set, the ! shortcut and scripted runs.
To use Claude Code in VS Code, install Anthropic's official Claude Code extension from the Extensions view, click the Spark icon and sign in with your Claude plan. The extension gives you visual diffs, automatic selection context and plan review; the terminal CLI still wins for the full command set and scripted work, so most people end up installing both.
Requirements, settings and feature lists below were checked in October 2026 against Anthropic's Claude Code VS Code documentation. The extension ships often and its version number tracks the bundled Claude Code version, so check that page if a menu looks different.
This tutorial is part of the Claude coding guide, which covers the model, the CLI and the API. If you have not installed the CLI yet, the step-by-step Claude Code install guide covers Mac, Windows and Linux. By the end of this page you will have the extension running, the settings that matter changed, and a clear rule for when to leave the panel and open a terminal.
What you need before you start
- VS Code 1.94.0 or later (Help, then About shows your version)
- A paid Claude plan (Pro, Max, Team or Enterprise) or a Claude Console account; no API key required
- A trusted workspace: the extension does not run in VS Code Restricted Mode
- A file open in the editor, because the Spark icon in the editor toolbar only appears when one is
- Optional: the standalone CLI, if you also want to type claude in the integrated terminal
- Optional: other AI extensions paused while you set up, since Anthropic lists them as a possible conflict
Bedrock or Google Cloud users can run the extension against those providers instead of an Anthropic sign-in; Anthropic documents that path separately under third-party providers, and it uses the disableLoginPrompt setting to skip the sign-in screen.
Install the Claude Code VS Code extension
- 1Open the Extensions view
Ctrl+Shift+X on Windows and Linux, Cmd+Shift+X on Mac. Search "Claude Code" and install the one published by Anthropic.
- 2Reload if it does not appear
Run "Developer: Reload Window" from the Command Palette. Expected result: a Spark icon in the editor toolbar and in the Activity Bar.
- 3Open the panel
Click the Spark icon in the editor toolbar, the Spark in the Activity Bar, or "Claude Code" in the Status Bar.
- 4Sign in
Click Sign in and finish in the browser. Expected result: a Learn Claude Code checklist you can work through or dismiss.
- 5Send a first prompt with context
Select a few lines, press Alt+K (Option+K on Mac) to insert an @file#lines reference, and ask what the code does.
- 6Make one small edit in Manual mode
Ask for a tiny change. Expected result: a side-by-side diff with Accept and Reject, before anything is written.
In Cursor and other VS Code forks the process is the same: search for "Claude Code" in that editor's Extensions view. Anthropic also publishes the extension on the Open VSX registry for forks that use it. If an editor cannot install it at all, the CLI in that editor's terminal is the fallback.
The settings worth changing on a fresh install
Open Settings (Ctrl+, or Cmd+,), go to Extensions, then Claude Code. Most defaults are sensible. These are the ones worth a deliberate decision, with the default as Anthropic documents it:
| Setting | Default | When to change it |
|---|---|---|
| claudeCode.initialPermissionMode | unset | Set to default (Manual) or plan if you want to review every edit; user settings only |
| claudeCode.preferredLocation | panel | Set to sidebar to keep Claude docked on the right while you code |
| claudeCode.attachOpenFile | true | Turn off if you want Claude to see only what you select, not the whole open file |
| claudeCode.respectGitIgnore | true | Leave on: it keeps ignored files out of search and selection context |
| claudeCode.useCtrlEnterToSend | false | Turn on if Enter-to-send keeps firing half-written prompts |
| claudeCode.useTerminal | false | Turn on only if you prefer the CLI look inside VS Code |
| claudeCode.allowDangerouslySkipPermissions | false | Leave off outside a sandbox with no internet access |
Two things trip people up. First, initialPermissionMode is read from your user settings only; a value in a workspace settings file is ignored. Second, the extension has two layers of settings. The table above controls the VS Code side. Permission rules, hooks, environment variables and MCP servers live in ~/.claude/settings.json (or the project's .claude/settings.json), which the extension and the CLI share. Adding the schema line "$schema": "https://json.schemastore.org/claude-code-settings.json" to that file gives you autocomplete in VS Code.
A sensible security baseline from the same docs: with auto-edit on, Claude can change files such as .vscode/settings.json or tasks.json that VS Code may run automatically. On a repo you do not trust, use Manual mode and VS Code's Restricted Mode. To keep a file such as .env out of context entirely, add a Read deny rule for its path in your Claude Code settings.
Diff view, selection context and plan review
These three features are the reason to use the panel at all, so it is worth knowing exactly how they behave.
Diff review. The permission mode sits at the bottom of the prompt box. In Manual mode, every file edit opens as a side-by-side comparison and waits for you. You can accept or reject the whole file, use the per-change Accept and Reject buttons, or edit the proposed text yourself first; Claude is told you changed it. Diffs with more than 100 changes skip the per-change buttons. In Auto or Edit automatically mode, Claude edits most files without asking, which is faster but means you review afterwards in source control.
Selection context. Whatever you highlight in the editor is attached to your next prompt, and the footer shows how many lines are selected. Claude also sees which file is open even with nothing selected, unless you turn off attachOpenFile. Files matched by files.exclude, search.exclude or .gitignore are withheld from the panel: Claude gets the path, not the selected text.
Plan review. In Plan mode (or by typing /plan plus a task) Claude writes the plan as a Markdown document in the editor. You can add inline comments before it starts. For anything bigger than a one-file fix, this is the cheapest place to catch a wrong approach.
- 01Select the code
Highlight the function or file you mean, so the context is exact
- 02Plan mode
Ask for a plan and comment on it in the editor
- 03Manual mode
Approve the plan and review each diff as it arrives
- 04Check Problems
Claude can read VS Code diagnostics; ask it to fix what it broke
- 05Rewind if needed
Hover a message to rewind code, fork the chat, or both
Checkpoints are what make the last step safe. Hovering any message gives three options: fork the conversation from there, rewind the code to that point while keeping the chat, or both.
When to use the panel and when to open the terminal
Anthropic's own comparison is short: the CLI has every command and skill, the ! bash shortcut and tab completion; the extension has a subset of commands. Both support MCP servers and checkpoints, and both share the same conversation history. In practice the split looks like this:
| Task | Better in | Why |
|---|---|---|
| Review each edit as a diff | Extension (Manual mode) | Side-by-side diff with per-change accept and reject |
| Ask about the code you selected | Extension | Selection is attached automatically; Alt+K inserts an @file#lines reference |
| Comment on a plan before work starts | Extension (Plan mode) | The plan opens as a Markdown document you can annotate |
| Run every slash command and skill | CLI | The extension exposes a subset of commands |
| Quick shell commands with ! | CLI | The ! bash shortcut is CLI-only |
| Scripted or headless runs | CLI | Run claude from scripts, CI or an external terminal |
You do not have to choose once. Run claude in the integrated terminal (Ctrl+` or Cmd+`) and the CLI connects to VS Code through a small local server the extension runs, so diffs still open in the native viewer and your selection is still shared. From an external terminal, run /ide to connect. To pick up a panel conversation in the terminal, run claude --resume and choose it from the list. If you would rather have the CLI interface inside the panel itself, turn on useTerminal.
Comparing editors before you commit? Our Cursor tutorial shows the other common setup, and Claude pricing explained covers which plan includes Claude Code usage. If you plan to call Claude from your own app as well, start with getting a Claude API key.
- You use skills or commands the panel does not list
- You lean on ! for quick shell commands
- You run Claude Code from scripts or CI
- You work over SSH or in a non-VS Code editor
- You want to review every edit as a diff
- You often ask about a specific selection
- You want to annotate plans before work starts
- You run several conversations in tabs side by side
Shortcuts and habits that save time
The shortcuts Anthropic documents for the panel, as of October 2026:
- Ctrl+Esc / Cmd+Esc: toggle focus between the editor and Claude. On recent macOS versions the system Game Overlay may grab Cmd+Esc; Anthropic's troubleshooting page explains how to free it or rebind it.
- Alt+K / Option+K: insert an @-mention for the current file and selected lines.
- Ctrl+Shift+Esc / Cmd+Shift+Esc: open a new conversation as an editor tab.
- Shift+Enter: new line without sending.
- @terminal:name: pull a terminal's output into the prompt instead of copy-pasting errors.
Keep project instructions in a CLAUDE.md at the repo root; the panel's Customize menu has an Instructions entry that opens or creates it. Short, specific rules there save more time than any setting on this page. For MCP, type /mcp in the panel to add, enable or authenticate servers, or use claude mcp add in the terminal; both write to the same configuration.
Once the editor setup is done, the bottleneck becomes what you build with it. The AI SaaS Builder program walks through taking an app from idea to paying users with Claude Code doing much of the implementation, including the project structure and instructions that keep an agent on track.
Troubleshooting
- No Spark icon: open a file (a folder alone is not enough), confirm VS Code is 1.94.0 or newer, reload the window, and check the workspace is trusted. The Status Bar entry works with no file open.
- Sign-in loops: "Not logged in" should reopen the sign-in screen; if it does not, run Developer: Reload Window.
- Claude never responds: start a new conversation, then try
claudein a terminal, which shows more detailed errors. - Extension looks out of date: the extension version equals the bundled Claude Code version, so a feature that needs a given Claude Code release needs that extension version too.
Claude Code in VS Code: FAQ
Is there an official Claude Code extension for VS Code?
Yes. Anthropic publishes the Claude Code extension (anthropic.claude-code) on the VS Code Marketplace and on Open VSX. It needs VS Code 1.94.0 or later and a paid Claude plan (Pro, Max, Team or Enterprise) or a Claude Console account. Anthropic's docs call it the recommended way to use Claude Code inside VS Code.
Does the Claude Code VS Code extension need an API key?
No. You sign in with your Claude subscription or Console account the first time you open the panel. An API key is optional, and if you set ANTHROPIC_API_KEY in your shell, launch VS Code from a terminal with code . so it inherits the variable. Bedrock and Google Cloud users follow the third-party provider setup instead.
Why does the claude command not work in the VS Code terminal after installing the extension?
The extension bundles a private copy of the CLI for its chat panel but does not add claude to your PATH. To run claude in the integrated terminal, install the standalone CLI separately. After that, commands such as claude mcp add and claude --resume work in any terminal, and the CLI connects to VS Code for diffs automatically.
Does Claude Code work in Cursor?
Yes. Anthropic's docs list a direct install link for Cursor, and the extension also installs in other VS Code forks through the Open VSX registry. If a fork cannot install the extension, install the CLI and run claude in that editor's integrated terminal, which works in any terminal.
What can the CLI do that the VS Code extension cannot?
As of October 2026, Anthropic's comparison table lists the full set of commands and skills, the ! bash shortcut and tab completion as CLI-only; the extension exposes a subset of commands. Both support MCP servers and checkpoints, and they share conversation history, so you can move between them with claude --resume.
Can I see Claude's changes as a diff before they are applied?
Yes, in Manual permission mode. The extension opens a side-by-side diff of each proposed edit and asks for permission. You can accept or reject the whole file, or one change at a time with the per-change buttons, and you can edit the proposal before accepting. In Auto or Edit automatically mode, Claude applies most edits without asking.
Your editor is ready. Now ship something with it.
AI SaaS Builder, included in All Access, shows how to plan, build and launch a product with AI coding agents, alongside the other three programs, live coaching and the private community in one subscription.
Keep learning, free
Ask setup questions in the free Discord, and follow the free Telegram channel for new AI coding guides as they land.