Claude CodeLesson 6 of 25

Claude Code in VS Code

The Claude Code VS Code extension brings Claude directly into your editor — with a graphical chat panel, inline diffs you can accept or reject, and full access to the CLI from the integrated terminal. It is the recommended way to use Claude Code if you work in VS Code.

✅

Before You Start

▸VS Code 1.98.0 or higher. Check via Help → About. Earlier versions are not supported.
▸An Anthropic account. You will sign in the first time you open the extension. No API key required — the extension handles auth.
▸The CLI is bundled. The extension ships with the Claude Code CLI inside it. No separate npm install is needed. You can still run claude in the integrated terminal for advanced features.

🧩

What the Extension Gives You

✦

Spark icon — open Claude anywhere

Access Claude from the Editor Toolbar (top-right when a file is open), the Activity Bar, or the Status Bar (✱ Claude Code) at the bottom of the window.

📋

Side-by-side diff review

When Claude wants to edit a file it shows a diff and asks permission. You can accept, reject, or edit the proposed change before accepting.

@-mention files and folders

Type @ in the prompt box to reference a file or folder. Press Option+K / Alt+K to insert a mention with exact line numbers like @UserCard.tsx#5-10.

🔀

Permission modes

Switch between Default (ask before each edit), Plan (review the plan first), and Auto-accept (edits apply without asking) directly from the prompt box.

⏪

Checkpoints and rewind

Hover over any message to rewind. Fork the conversation, revert file changes, or do both — all without losing history.

🪟

Multiple conversations

Open additional Claude tabs or windows from the Command Palette to run parallel tasks. Each conversation has its own history and context.

What It Looks Like

The mockup shows the typical layout: file explorer left, editor centre with a green diff line (what Claude added), Claude panel right with an accept/reject prompt. The Spark icon (✦) appears in the Activity Bar and the editor toolbar.

my-app — Visual Studio Code

✦

Claude

Explorer

▼MY-APP

src/

UserCard.tsx

App.tsx

index.css

package.json

⬡ UserCard.tsx

✦

1 import React, { useState } from 'react';

3 export default function UserCard({ data }) {

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

5 return (

6 <div className="card">

7 {data.name}

8 </div>

9 );

10 }

TERMINALPROBLEMSOUTPUT

$ claude█

✦Claude CodeDefault

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?

Ask Claude… (type @ to mention)/

The green line is what Claude added. Click Accept and it is saved. Click Reject and it disappears.

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 after installation, 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 (only visible when a file is open).
▸Activity Bar — click the ✦ icon in the left sidebar. This is always visible.
▸Status Bar — click ✱ Claude Code in the bottom-right corner. Works even without a file open.

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

A sign-in screen appears the first time. Click Sign in and complete authorization in your browser. After signing in, 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

You have UserCard.tsx open. You want Claude to add a loading spinner when data is null. Here is the full flow.

1. Type your request in the Claude panel

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

The @UserCard.tsx @-mention tells Claude exactly which file to read.

2. Claude shows a diff and asks permission

Edit UserCard.tsx?

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

AcceptRejectTell Claude what to do instead

3. Click Accept — file saved instantly

Terminal — VS Code

✓ 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.

Default

Claude asks before each file edit or command. Best when you want full control over what changes.

Plan

Claude writes a full plan as a Markdown doc. You add inline comments, then approve before any changes are made.

Auto-accept

Claude applies edits without asking. Use for repetitive tasks you trust — rewind with checkpoints if needed.

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

Prompt Box Features

The Claude panel prompt box has several built-in shortcuts worth knowing from day one.

@Mention a file or folder — Claude reads it automatically. Fuzzy matching works: @auth matches auth.js, AuthService.ts, etc.

Option+K / Alt+KWith text selected in the editor, inserts an @-mention with exact line numbers like @UserCard.tsx#5-10.

/Opens the command menu: attach files, switch models, toggle extended thinking, check /usage, start a remote control session, manage MCP and plugins.

Shift+EnterAdd a new line without sending. Useful for longer, multi-part instructions.

@terminal:nameInclude output from a specific terminal by its title. Claude sees error messages or logs without copy-pasting.

Ctrl+OExpand or collapse all thinking blocks in the session (when extended thinking is on).

⏪

Checkpoints — Undo Anything

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

🌿

Fork conversation from here

Start a new branch from this message. All file changes so far are kept.

⏮

Rewind code to here

Revert file changes back to this point. Full conversation history is kept.

🔀

Fork conversation and rewind code

Start a new branch and revert files to this point — 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

Tip: 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.

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