Claude Code in VS Code: the complete extension guide

The Claude Code VS Code extension is the recommended way to use Claude Code inside VS Code, Cursor, and compatible forks. Instead of a terminal-only chat, you get a native panel with side-by-side diffs, plan review, session history, and checkpoints — while the same conversation history is shared with the CLI.

What the extension gives you

Native chat panel

A graphical panel docked in the sidebar, a tab, or a separate window — instead of a terminal-only interface.

Review before you accept

Every edit shows a side-by-side diff and asks for permission first. Edit the proposed diff directly and Claude is told you changed it.

@-mention with line ranges

Reference a file or folder by name, or press a shortcut to insert the exact lines you have selected, e.g. @app.ts#5-10.

Session history & multiple tabs

Every conversation is saved and searchable. Open several conversations in separate tabs to work on unrelated tasks in parallel.

Plugins, MCP and Chrome, all in the UI

Install plugins, manage MCP servers, and drive a real Chrome tab to debug a running app — all without leaving the editor.

Install it

Requires VS Code 1.94.0 or higher and any paid Claude subscription (Pro, Max, Team or Enterprise) — no API key required. Press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux), search "Claude Code", and click Install. It also installs in Cursor, Devin Desktop, Kiro and other VS Code forks — search the editor's Extensions view or the Open VSX registry. If the icon doesn't appear after install, run "Developer: Reload Window" from the Command Palette.

Sign in and open the panel

The first time you open the panel a sign-in screen appears — click Sign in and finish authorization in your browser. The quickest way to open the panel is the Spark icon in the editor toolbar (appears once a file is open), the Activity Bar's sessions list, or the ✱ Claude Code entry in the Status Bar, which works even with no file open.

Permission modes in the prompt box

Click the mode indicator at the bottom of the prompt box to switch, or set a default with claudeCode.initialPermissionMode in VS Code settings.

Manual

Claude asks permission before file edits and most shell commands. The safest default.

Plan

Claude describes what it will do first. VS Code opens the plan as a Markdown document you can comment on before Claude starts.

Edit automatically

Claude makes edits without asking — fastest, but review your diffs afterward.

Reference files with @-mentions

Type @ followed by a file or folder name — fuzzy matching finds it even from a partial name, for example @auth matches auth.js or AuthService.ts, and a trailing slash targets a folder. Claude automatically sees your selected text; press Option+K (Mac) or Alt+K (Windows/Linux) to also insert a precise reference like @app.ts#5-10. You can drag files into the prompt box while holding Shift to attach them.

Checkpoints: rewind Claude's edits

Hover any message to reveal the rewind button, then choose one of three options: fork the conversation from that point while keeping the current code, rewind the code to that point while keeping the full chat history, or do both at once. This is the safety net that makes it comfortable to let Claude move fast — a bad edit is always one click from undone.

Extension vs. CLI: what's different

Installing the extension doesn't put claude on your shell PATH — that needs the standalone CLI install. Once installed, run claude in the integrated terminal (Ctrl+` / Cmd+`) for CLI-only features, and switch back to the panel with claude --resume, since both share the same conversation history.

Commands & skills

CLI: all — VS Code: a subset (type / to see what's available)

MCP server config

CLI: add/remove servers directly — VS Code: add via CLI, manage existing ones with /mcp

Checkpoints

Both — rewind works the same way in each

! bash shortcut

CLI only

Tab completion

CLI only

Keyboard shortcuts worth memorizing

Cmd+Esc / Ctrl+Esc

Toggle focus between the editor and the Claude panel

Cmd+Shift+Esc / Ctrl+Shift+Esc

Open a new conversation as an editor tab

Option+K / Alt+K

Insert an @-mention reference for the current file and selection

Cmd+Shift+T / Ctrl+Shift+T

Reopen the most recently closed Claude session tab

Cmd+N / Ctrl+N

Start a new conversation (must be enabled in settings)

Settings worth knowing

Extension settings live under Cmd+, (Mac) / Ctrl+, (Windows/Linux) → Extensions → Claude Code. Shared Claude Code settings — allowed commands, hooks, MCP servers — live in ~/.claude/settings.json and apply to both the extension and the CLI.

useTerminal(false)

Launch Claude in terminal mode instead of the graphical panel

initialPermissionMode(default)

Approval prompts for new conversations: default, plan, acceptEdits or bypassPermissions

preferredLocation(panel)

Where Claude opens: sidebar (right) or panel (new tab)

autosave(true)

Auto-save files before Claude reads or writes them

hideOnboarding(false)

Hide the onboarding checklist

respectGitIgnore(true)

Exclude .gitignore patterns from file searches

Connect MCP servers without leaving the editor

Open the integrated terminal and run claude mcp add to register a server — for example GitHub's remote MCP server authenticated with a personal access token. Back in the chat panel, type /mcp to see connection status, enable or disable a server, reconnect, or manage OAuth. A server showing failed usually means bad or missing credentials — the add command doesn't validate them up front.

claude mcp add --transport http github https://api.githubcopilot.com/mcp/ \
  --header "Authorization: Bearer YOUR_GITHUB_PAT"

Work with git: commits, PRs and worktrees

Ask Claude in plain language to stage changes, write a commit message, or open a pull request, and it generates descriptions based on the actual diff — including context about testing or implementation decisions when relevant. Common prompts: "commit my changes with a descriptive message", "create a pr for this feature", "summarize the changes I've made to the auth module". For parallel work, start Claude in an isolated git worktree with claude --worktree feature-auth (or -w) — each worktree keeps independent files and its own branch while sharing git history, so two Claude sessions never step on each other's changes.

claude --worktree feature-auth

Using Amazon Bedrock, Google Cloud or Microsoft Foundry

By default the extension talks directly to Anthropic's API. If your organization routes Claude through Amazon Bedrock, Google Cloud's Agent Platform, or Microsoft Foundry instead, open the Disable Login Prompt setting (claudeCode.disableLoginPrompt) so the extension skips the normal sign-in screen, then configure the provider in ~/.claude/settings.json — the same file the CLI reads, so the two stay in sync automatically.

Security and privacy basics

Your code is used to provide assistance, not to train models. Because auto-edit permissions let Claude modify VS Code configuration files that the editor can execute automatically (like tasks.json), the extension recommends enabling VS Code's Restricted Mode for untrusted workspaces, using manual approval instead of auto-accept when working with code you don't fully trust, and reviewing diffs before accepting them. Under the hood, the extension also runs a small local MCP server (named ide, hidden from /mcp) that the CLI uses to open native diffs and read your selection — it binds to a random loopback port with a per-activation auth token, so only processes on your own machine can reach it.

Fix common issues

Extension won't install

Confirm VS Code is 1.94.0 or later, check the editor has permission to install extensions, or install directly from the VS Code Marketplace.

The Spark icon is missing

It only appears with a file open — a folder alone isn't enough. Otherwise use the ✱ Claude Code entry in the Status Bar, which works with no file open.

Cmd+Esc does nothing on macOS

On macOS Tahoe+, the system Game Overlay shortcut intercepts it. Clear it under System Settings → Keyboard → Keyboard Shortcuts → Game Controllers, or rebind the extension's shortcut.

Claude never responds

Check your connection, start a fresh conversation, or run `claude` in the terminal to see a more detailed error.

Related from the Academy

For a Japanese-language walkthrough with more screenshots and step-by-step checkpoints, see the ConfigDeck Academy article on the VS Code extension. Read the VS Code extension guide →

Ship faster in VS Code

Browse Claude Code configs — skills, subagents and MCP servers — that install straight into your .claude/ folder from ConfigDeck.

Browse the marketplace →

FAQ

Do I need the CLI installed to use the VS Code extension?

No for the chat panel — the extension bundles its own copy of the CLI. You only need the standalone CLI install if you also want to type `claude` in the integrated terminal.

Which editors support the extension?

VS Code 1.94+, Cursor, and other VS Code forks such as Devin Desktop or Kiro — install it from each editor's Extensions view or the Open VSX registry.

What are checkpoints?

A rewind feature: hover a message to fork the conversation, revert file changes to that point, or both — without losing your chat history.

Can Claude see my selected code automatically?

Yes. Selected text is sent as context automatically; press Option+K / Alt+K to also insert a file#line @-mention.

Does the extension support MCP servers?

Partially — add servers with `claude mcp add` in the integrated terminal, then manage and reconnect them from `/mcp` in the chat panel.