Claude CodeLesson 6 of 25

Claude Code in VS Code

The Claude Code VS Code extension brings Claude into your editor with a graphical chat panel, inline diffs you can accept or reject, and full CLI access from the integrated terminal.

Before you start

VS Code 1.98.0 or higher. Check via Help → About.
An Anthropic account. Sign in the first time you open the extension. No API key required.
The CLI is bundled. No separate npm install needed. You can still run claude in the integrated terminal.

What the extension gives you

Feature	What it does
Spark icon (✦)	Open Claude from the Editor Toolbar, Activity Bar, or Status Bar (✱ Claude Code).
Diff review	Claude shows a diff and asks permission before each edit. Accept, reject, or edit first.
@-mentions	Type @ to reference files or folders. Alt+K / Option+K inserts exact line ranges.
Permission modes	Switch between Default, Plan, and Auto-accept from the prompt box.
Checkpoints	Hover any message to rewind code, fork the conversation, or both.
Multiple sessions	Open additional Claude tabs or windows for parallel tasks.

my-app — Visual Studio Code

✦

EXPLORER

UserCard.tsx

App.tsx

UserCard.tsx

✦

+ if (!data) return <Spinner />;

return (<div className="card">{data.name}</div>);

Claude Code

Add a loading spinner to @UserCard.tsx when data is null

I'll add a <Spinner /> guard at line 4 of UserCard.tsx.

Edit UserCard.tsx?

AcceptReject

Ask Claude (type @ to mention)↑

Editor centre, Claude panel right — green lines are proposed additions

Installing the extension

Three steps. Takes under two minutes.

Install from the Marketplace

Press Ctrl+Shift+X (or ⌘+Shift+X on Mac), search for Claude Code by Anthropic, and click Install. If the extension does not appear, run Developer: Reload Window from the Command Palette.

Open the Claude panel

Three ways to open it:

Editor Toolbar — click the ✦ Spark icon at the top-right of the editor.
Activity Bar — click the ✦ icon in the left sidebar.
Status Bar — click ✱ Claude Code in the bottom-right corner.

Use the Command Palette (Ctrl+Shift+P) and type Claude Code: Open in New Tab to open Claude as a full editor tab.

Sign in

A sign-in screen appears the first time. Click Sign in and complete authorization in your browser. An onboarding checklist appears — click Show me for each item or dismiss with ×. To reopen it later, go to Extensions → Claude Code settings and uncheck Hide Onboarding.

A simple example

With UserCard.tsx open, ask Claude to add a loading spinner when data is null.

1. Type your request

> Add a loading spinner to @UserCard.tsx — show it when data is null

2. Review the diff and accept

Edit UserCard.tsx?

Add if (!data) return <Spinner />; at line 4.

AcceptReject

Terminal — after accept

✓ UserCard.tsx updated — 1 line added

Edit the diff before accepting. If you change the proposed code in the diff view, Claude is told you modified it — so it does not assume the file matches its original proposal.

Permission modes

Click the mode indicator at the bottom of the Claude prompt box to switch modes.

Mode	Behaviour	Best for
Default	Claude asks before each file edit or command.	Day-to-day coding when you want full control.
Plan	Claude writes a Markdown plan. You comment inline, then approve before changes.	Larger refactors where you want to review the approach first.
Auto-accept	Claude applies edits without asking.	Repetitive tasks you trust — use checkpoints as a safety net.

Set a default mode in VS Code settings under Extensions → Claude Code → Initial Permission Mode, or set claudeCode.initialPermissionMode.

Prompt box shortcuts

Shortcut	What it does
@	Mention a file or folder — Claude reads it automatically.
Alt+K / Option+K	With text selected, insert @-mention with exact line numbers.
/	Open the command menu: attach files, switch models, /usage, MCP, plugins.
Shift+Enter	Add a new line without sending.
@terminal:name	Include output from a specific terminal by its title.
Ctrl+O	Expand or collapse all thinking blocks (when extended thinking is on).

Checkpoints — undo anything

Hover over any message in the Claude panel to reveal the rewind button.

Option	Effect
Fork conversation from here	Start a new branch from this message. File changes are kept.
Rewind code to here	Revert file changes back to this point. Conversation history is kept.
Fork conversation and rewind code	Start a new branch and revert files — the safest reset option.

Using Auto-accept mode? Checkpoints are your safety net. Let Claude run and rewind if the result is not what you wanted.

Keyboard shortcuts

Action	Mac	Windows / Linux
Open Command Palette	`⌘+Shift+P`	`Ctrl+Shift+P`
Toggle focus editor ↔ Claude	`⌘+Esc`	`Ctrl+Esc`
Open Claude in new tab	`⌘+Shift+Esc`	`Ctrl+Shift+Esc`
New conversation (Claude focused) *	`⌘+N`	`Ctrl+N`
Insert @-mention with line numbers	`Option+K`	`Alt+K`
Open Extensions panel	`⌘+Shift+X`	`Ctrl+Shift+X`
Open integrated terminal	⌘+`	Ctrl+`
Open Settings	`⌘+,`	`Ctrl+,`

* Requires enableNewConversationShortcut: true in Claude Code extension settings.

Extension vs CLI

Both share the same conversation history. Continue an extension session in the terminal with claude --resume.

Feature	Extension (panel)	CLI (terminal)
Diff review with Accept / Reject	✓	✓
Checkpoints and rewind	✓	✓
All / commands and skills	Subset	All
MCP server config	Manage via /mcp	Full config
Tab completion	—	✓
! bash shortcut	—	✓
Multiple parallel sessions	✓ (tabs / windows)	Multiple terminals

Prefer the extension for day-to-day coding where you want the diff UI and @-mentions. Drop into the terminal when you need a CLI-only feature or want to run a long background task.

Before you continue

Install from the VS Code Marketplace — the CLI is bundled inside the extension.
Open Claude via the ✦ Spark icon in the toolbar, Activity Bar, or Status Bar.
Use @-mentions and Default mode until you are comfortable with Auto-accept.
Checkpoints let you rewind any edit without losing conversation history.
Next: extend your browser with the Claude Chrome extension.

What's Next

Claude Code is running inside VS Code. Next: extend your browser with the Claude Chrome extension for web-based workflows.

← PREVIOUS

Explore Claude Directory

Chrome Extension