VS Code Extension

The Claude Code VS Code extension brings the full Claude Code agentic loop into a native graphical panel. It works in VS Code and Cursor.

Prerequisites

VS Code 1.98.0 or higher (Help → About to check)
An Anthropic account — you sign in on first open

Install

Open the Extensions view (Cmd+Shift+X on Mac, Ctrl+Shift+X on Windows/Linux), search Claude Code, and click Install.

After installation, if the extension does not appear, run Developer: Reload Window from the Command Palette (Cmd+Shift+P / Ctrl+Shift+P).

Direct links if you prefer:

Open Claude Code

The Spark icon (✦) marks every Claude Code entry point in VS Code:

Entry point	How to open
Editor Toolbar	Spark icon at top-right — only visible when a file is open
Activity Bar	Spark icon in the left sidebar — always visible; opens sessions list
Command Palette	`Cmd/Ctrl+Shift+P` → type “Claude Code: Open in New Tab”
Status Bar	Click ✱ Claude Code in the bottom-right corner — works even with no file open

On first open, a Learn Claude Code onboarding checklist appears. Work through it or dismiss with X. Reopen it later by unchecking Hide Onboarding in VS Code settings under Extensions → Claude Code.

Key Features

Inline Diff Review

When Claude proposes a file edit, VS Code shows a side-by-side diff of original vs. proposed changes and asks for permission before writing. You can:

Accept the full change
Reject it entirely
Type a follow-up telling Claude what to adjust instead

This is the primary reason to use the extension over the terminal — every edit is reviewable before it lands.

Permission modes control how aggressively Claude asks:

Default — prompts before each tool use
Plan mode — Claude describes its full plan as a markdown document; you add inline comments before it starts
Auto-accept — edits apply without prompting (use carefully)

Switch modes by clicking the mode indicator at the bottom of the prompt box. Set the default in VS Code settings: claudeCode.initialPermissionMode.

`@`-mention Files and Folders

Type @ in the prompt box to reference a file, folder, or line range. Claude reads that content directly — no copy-pasting.

Explain the logic in @src/utils/auth.ts
What files are under @src/components/
Refactor lines 45-80 in @app/api/users/route.ts#45-80

Claude Code uses fuzzy matching, so partial names work: @auth matches AuthService.ts, auth.js, auth/ folder, and so on.

Keyboard shortcut: with the editor focused, press Option+K (Mac) / Alt+K (Windows/Linux) to insert an @-mention reference for the current file and selection automatically.

Selected text is also visible to Claude by default. The prompt box footer shows how many lines are selected. Click the eye icon to toggle this on or off.

Plan Mode

Plan mode is the safest way to handle complex or risky tasks. Claude enters a read-only analysis phase, writes a full markdown plan, and waits for your approval before touching any files.

Click the mode indicator → select Plan
Describe the task
VS Code opens the plan as a full markdown document
Add inline comments where you want changes
Approve — Claude exits plan mode and begins implementation

To require plan approval globally, set claudeCode.initialPermissionMode to "plan" in VS Code settings.

Conversation History

Click the dropdown at the top of the Claude Code panel to browse past sessions. Sessions are searchable by keyword and grouped by date (Today, Yesterday, Last 7 days). Click any session to resume with full message history.

New sessions receive AI-generated titles from your first message. Hover over a session to rename or remove it.

To continue a VS Code session in the terminal: open the integrated terminal and run claude --resume. An interactive picker lets you select the session.

Checkpoints and Rewind

Every message is checkpointed. Hover over any message to reveal the rewind button, then choose:

Fork conversation from here — new branch, code unchanged
Rewind code to here — reverts file changes, keeps conversation history
Fork conversation and rewind code — new branch + revert files

This makes it safe to experiment: if Claude’s approach goes sideways, rewind rather than undo manually.

Multiple Conversations

Run parallel conversations via Open in New Tab or Open in New Window from the Command Palette. Each tab maintains its own history and context. A colored dot on the Spark icon shows status: blue = permission request pending, orange = finished while tab was hidden.

Keyboard Shortcuts

Action	Mac	Windows/Linux
Toggle focus editor ↔ Claude	`Cmd+Esc`	`Ctrl+Esc`
Open new conversation tab	`Cmd+Shift+Esc`	`Ctrl+Shift+Esc`
New conversation (Claude focused)	`Cmd+N`	`Ctrl+N`
Insert `@`-mention for selection	`Option+K`	`Alt+K`

Focus matters: Cmd+N only starts a new conversation when the Claude panel is focused; when the editor is focused it creates a new file as usual.

Settings Reference

Open VS Code settings (Cmd+, / Ctrl+,) → Extensions → Claude Code.

Setting	Default	Notes
`initialPermissionMode`	`default`	`default`, `plan`, `acceptEdits`, `bypassPermissions`
`useTerminal`	`false`	Switch to CLI-style interface instead of graphical panel
`preferredLocation`	`panel`	`sidebar` (right) or `panel` (new tab)
`autosave`	`true`	Auto-save files before Claude reads or writes them
`useCtrlEnterToSend`	`false`	Use Ctrl/Cmd+Enter instead of Enter to send

Settings in ~/.claude/settings.json (hooks, MCP servers, allowed commands) are shared between the extension and CLI.

Extension vs CLI: What the Extension Does Not Have

Some features are CLI-only. Open the integrated terminal (Ctrl+` / Cmd+`) and run claude to access them.

Feature	CLI	Extension
Headless `-p` mode	✅	❌
`!bash` shortcut	✅	❌
Tab completion	✅	❌
Pipe input (`git diff \| claude -p`)	✅	❌
All slash commands	✅	Subset

The extension includes the full Claude Code CLI bundle — running claude in VS Code’s integrated terminal gives you the complete CLI experience while IDE integration features (diffs, diagnostics) remain active.

Troubleshooting

Spark icon not visible — the editor toolbar icon only appears when a file is open. Use the Status Bar icon (bottom-right) as a fallback; it is always present.

Extension does not respond — start a new conversation to rule out a stale session. Run claude in the integrated terminal for more detailed error output.

After install, extension not found — run Developer: Reload Window from the Command Palette.