The Claude Code VS Code extension turns your editor into a first-class interface for Claude — with inline diff review, @-mentions tied to your selection, a built-in MCP server that reads diagnostics, and a checkpoint system that lets you rewind any edit. This guide covers every feature worth knowing about.
Installation
Requirements: VS Code 1.98.0 or higher. Any paid Claude plan or Console account — no API key needed.
Install from the marketplace:
Or open Extensions (Cmd+Shift+X / Ctrl+Shift+X), search “Claude Code”, and install.
The extension bundles its own CLI for the chat panel. To use claude in the integrated terminal separately, install the standalone CLI — the extension does not add it to your PATH.
Opening the Panel
Three ways to reach Claude Code:
- Spark icon in the editor toolbar — appears top-right when a file is open. Fastest path.
- Status bar — click
✱ Claude Codeat the bottom-right. Works even without a file open. - Command Palette —
Cmd+Shift+P, type “Claude Code”, pick an option.
Drag the panel to the secondary sidebar (right side) to keep it visible while you code. The Activity Bar icon is always there; the editor toolbar icon only appears when a file is open.
@-Mentions and File References
Type @ in the prompt box to reference files and folders by name. Fuzzy matching works — partial names are enough:
@auth # matches auth.js, AuthService.ts, etc.
@src/components/ # include trailing slash for foldersSelection-aware context. When you select text in the editor, 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 explicit @-mention with file path and line numbers, like @app.ts#5-10.
Click the eye icon in the footer to toggle whether Claude sees your selection. Useful when a sensitive file like .env is open — add a Read deny rule for it to exclude it permanently.
Hold Shift while dragging files into the prompt box to add them as attachments.
The IDE MCP Server
When the extension is active, it runs a local MCP server at 127.0.0.1 on a random port. The CLI connects to it automatically and uses it for:
- Opening diffs in VS Code’s native diff viewer
- Reading your current selection for @-mentions
- Executing code cells in Jupyter notebooks
The server is named ide and is hidden from /mcp because there’s nothing to configure. If your organization uses PreToolUse hooks to allowlist MCP tools, you need to know about these two tools:
mcp__ide__getDiagnostics
Returns the errors and warnings from VS Code’s Problems panel. Optionally scoped to a single file. Read-only. This is how Claude can read TypeScript errors, ESLint warnings, and other diagnostics without you copying them into the prompt.
Usage example — Claude can directly see build errors:
> Fix the TypeScript errors in auth.tsClaude calls mcp__ide__getDiagnostics internally, reads the diagnostics, and applies the fix.
mcp__ide__executeCode
Runs Python code in the active Jupyter notebook’s kernel. Write action — always asks for confirmation.
Every call inserts the code as a new cell at the end of the active notebook, scrolls it into view, and shows a native Quick Pick asking you to Execute or Cancel. Nothing runs silently. The tool refuses if there’s no active notebook, the Jupyter extension isn’t installed, or the kernel isn’t Python.
/mcp Management in the Chat Panel
Type /mcp in the prompt box to open the MCP server management dialog. From here you can:
- View all configured MCP servers with their connection status
- Enable or disable servers with a single click
- Reconnect servers that have failed or need authentication
- Manage OAuth for servers that require it
To add a new MCP server, open the integrated terminal and use the CLI:
claude mcp add --transport http github https://api.githubcopilot.com/mcp/ \
--header "Authorization: Bearer YOUR_GITHUB_PAT"From mobile or web via Remote Control, /mcp reconnect (no server name) reconnects every failed server at once — different from the local CLI where a server name is required.
Plan Mode and Permission Modes
Click the mode indicator at the bottom of the prompt box to switch:
- Normal mode — Claude asks permission before each action
- Plan mode — Claude describes its plan as a markdown document; you review and comment inline before it begins
- Auto-accept — Claude makes edits without asking
VS Code automatically opens the plan as a full markdown document in plan mode. You can add inline comments to give feedback before Claude starts executing.
Set the default mode with claudeCode.initialPermissionMode in VS Code settings.
Checkpoints and Rewind
The extension supports checkpoints — Claude Code tracks every file edit and lets you rewind to any prior state.
Hover over any message in the conversation to reveal the rewind button. Three options:
- Fork conversation from here — start a new branch from this point, keep all code changes
- Rewind code to here — revert file changes to this point, keep the full conversation history
- Fork conversation and rewind code — both: new conversation branch and file revert
The full /rewind command (with all restore and summarize options) is also available from the CLI in the integrated terminal. See Checkpointing for details on all modes.
Keyboard Shortcuts
| Command | Shortcut (Mac) | Shortcut (Win/Linux) |
|---|---|---|
| Toggle focus editor ↔ Claude | Cmd+Esc | Ctrl+Esc |
| New conversation | Cmd+N | Ctrl+N |
| Open in new tab | Cmd+Shift+Esc | Ctrl+Shift+Esc |
| Reopen closed session | Cmd+Shift+T | Ctrl+Shift+T |
| Insert @-mention of selection | Option+K | Alt+K |
macOS Tahoe note: System Game Overlay binds Cmd+Esc by default on macOS Tahoe+. Clear it in System Settings → Keyboard → Keyboard Shortcuts → Game Controllers → uncheck Game Overlay.
Browser Automation with @browser
Type @browser in the prompt box to control Chrome directly from VS Code. Requires the Claude in Chrome extension v1.0.36+.
@browser go to localhost:3000 and check the console for errors
@browser fill out the signup form with test dataClaude opens new tabs and shares your browser’s login state, so it can access sites you’re already signed into. Full capability list in the chrome docs.
Multiple Conversations
Open additional conversations with Open in New Tab or Open in New Window from the Command Palette. Each maintains its own history and context.
Status dots on the spark icon: blue = permission request pending, orange = Claude finished while the tab was hidden.
Extension vs. CLI Feature Matrix
Some features require the standalone CLI in the integrated terminal:
| Feature | Extension | CLI |
|---|---|---|
| @-mentions | Yes | Yes |
| Inline diff review | Yes | Terminal-based |
| Checkpoints/rewind | Yes (3-option hover) | Yes (full /rewind) |
| IDE MCP server | Auto-active | Needs IDE connection |
/mcp management | Chat panel dialog | Interactive picker |
! bash shortcut | No | Yes |
| Tab completion | No | Yes |
| Remote Control | /rc in prompt | claude remote-control |
VS Code Settings Reference
Key settings under Extensions → Claude Code:
| Setting | Default | Description |
|---|---|---|
useTerminal | false | Use CLI-style terminal instead of graphical panel |
initialPermissionMode | default | Default permission mode for new conversations |
autosave | true | Auto-save files before Claude reads or writes them |
preferredLocation | panel | Where Claude opens: sidebar or panel |
useCtrlEnterToSend | false | Use Ctrl/Cmd+Enter instead of Enter to send |
respectGitIgnore | true | Exclude .gitignore patterns from file searches |
Add JSON Schema validation to settings.json for autocomplete:
{
"$schema": "https://json.schemastore.org/claude-code-settings.json"
}Launch from External Tools
The extension registers vscode://anthropic.claude-code/open — open a new Claude tab from a shell alias, browser bookmark, or any script:
# macOS
open "vscode://anthropic.claude-code/open"
# With a pre-filled prompt
open "vscode://anthropic.claude-code/open?prompt=review%20my%20changes"The session parameter resumes a specific session by ID instead of starting a new one.
Browse More Claude Code Patterns
Explore our full collection of Claude Code rules, configurations, and patterns in our gallery.