VS Code Extension

The VS Code extension provides a native graphical interface for Claude Code directly in your editor — inline diffs, @-mentions, plan review, conversation history, and multiple sessions.

Installation

Ctrl+Shift+X → search "Claude Code" → Install

Or install directly: vscode:extension/anthropic.claude-code

Also works with: Cursor, Devin Desktop, Kiro, and other VS Code forks.

Requirements: VS Code 1.98.0+, any paid Claude subscription or Console account.

Opening Claude

Editor Toolbar: Spark icon (⚡) at top-right of editor (when a file is open)
Activity Bar: Spark icon in left sidebar → sessions list
Status Bar: click ✱ Claude Code at bottom-right
Command Palette: Ctrl+Shift+P → “Claude Code” → “Open in New Tab”

Key Features

@-mentions

Reference files and folders in your prompt:

@auth           # fuzzy-matches auth.js, AuthService.ts, etc.
@src/components/
@app.ts#5-10    # specific line range

Shortcut: Select text in editor → Alt+K to insert an @-mention with file path + line numbers.

Inline Diff Review

When Claude wants to edit a file, it shows a side-by-side diff and asks permission. You can:

Accept the change
Reject it
Edit the proposed content in the diff view before accepting

Plan Mode

Before implementing, Claude describes what it will do and waits for your approval. VS Code opens the plan as a full markdown document where you can add inline comments.

Toggle: click the mode indicator at the bottom of the prompt box.

Multiple Sessions

Ctrl+Shift+Esc → Open in new tab
Command Palette → “Open in New Window”
Blue dot on spark icon = permission request pending
Orange dot = Claude finished while tab was hidden

Resume Past Sessions

Click Session history at top of Claude panel. Search by keyword or browse by date. Also supports resuming cloud sessions from claude.ai (requires claude.ai subscription login, not Console).

Checkpoints (Rewind)

Hover over any message → rewind button → choose:

Fork conversation from here — new branch, keep all code changes
Rewind code to here — revert files, keep full conversation
Fork + rewind — new branch AND revert files

Permission Modes

Mode	Behavior
`default`	Claude asks permission before each action
`plan`	Claude plans first, waits for approval
`acceptEdits`	Claude makes edits without asking
`bypassPermissions`	No prompts (sandbox only)

Set default in VS Code settings: claudeCode.initialPermissionMode

Keyboard Shortcuts

Action	Shortcut
Toggle focus editor ↔ Claude	`Cmd/Ctrl+Esc`
Open in new tab	`Cmd/Ctrl+Shift+Esc`
Insert @-mention reference	`Alt/Option+K`
New conversation	`Cmd/Ctrl+N` (enable with setting)
Reopen closed session tab	`Cmd/Ctrl+Shift+T`

macOS Tahoe: If Cmd+Esc does nothing, disable System Settings → Keyboard → Game Controllers → Game Overlay.

Browser Integration (Chrome)

Connect to Chrome browser for testing web apps:

@browser go to localhost:3000 and check the console for errors

Requires Claude in Chrome extension v1.0.36+.

MCP Servers in VS Code

Add servers via the integrated terminal:

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

Manage in the chat panel with /mcp.

Extension Settings

Setting	Default	Description
`useTerminal`	`false`	Use CLI-style terminal instead of graphical panel
`initialPermissionMode`	`default`	Starting permission mode
`preferredLocation`	`panel`	`sidebar` (right) or `panel` (new tab)
`autosave`	`true`	Auto-save before Claude reads/writes
`useCtrlEnterToSend`	`false`	Ctrl+Enter instead of Enter to submit
`enableNewConversationShortcut`	`false`	Enable Ctrl+N for new conversation

VS Code Extension vs. CLI

Feature	CLI	VS Code Extension
All commands and skills	Yes	Subset (type `/` to see)
MCP server config	Full	Add via CLI; manage with `/mcp`
Checkpoints	Yes	Yes
`!` bash shortcut	Yes	No
Tab completion	Yes	No
Visual diff review	No	Yes
Multiple tabs	No	Yes

Enterprise / Third-Party Providers

To use Bedrock, Vertex AI, or Azure:

Open VS Code settings → Extensions → Claude Code → check Disable Login Prompt
Configure in ~/.claude/settings.json (follows setup guides for each provider)

Launch a VS Code Tab from Scripts

vscode://anthropic.claude-code/open
vscode://anthropic.claude-code/open?prompt=review%20my%20changes
vscode://anthropic.claude-code/open?session=SESSION_ID

Open from shell:

# Windows PowerShell
Start-Process "vscode://anthropic.claude-code/open"

# macOS
open "vscode://anthropic.claude-code/open"

Plugins in VS Code

Type /plugins in the prompt box → graphical plugin manager with Install/enable/disable controls.

Troubleshooting

Spark icon not visible: Open a file first (icon requires a file open). Check VS Code version ≥ 1.98.0. Disable conflicting AI extensions.

cmd not found in terminal: The extension doesn’t add claude to PATH — install the standalone CLI separately.

Claude not responding: Check internet connection, try a new conversation, or run claude in the terminal for better error messages.

🧠 Quick Recall

Trick: “Same engine + three IDE superpowers: inline diffs, @-mentions, selection context.”

👨‍🏫 Teach It

Show: fix a bug without leaving VS Code once.
They’ll trip on: running the CLI in the integrated terminal unconnected — /ide links them.

Learning path: ⬅ 36-code-review.md · Index · ➡ 38-desktop-web-remote.md

Written by Fenil Patel