Setup
Claude in VS Code: Pair Programming
Chapter 1 · Setup — Installing Claude Code and Your First Session
Claude Code is Anthropic's official CLI for Claude — and it integrates directly into VS Code as an extension. Once connected, Claude can read your open files, understand your project context, and work alongside you inside the editor rather than in a separate browser tab. This chapter covers installation, sign-in, and the key ways you interact with Claude from inside VS Code.
What You're Installing
There are two distinct things, and it's worth being clear about both:
- Claude Code CLI — the command-line tool that runs Claude. This is the engine. It can be used standalone in a terminal, or surfaced through the VS Code extension.
- Claude Code VS Code extension — the editor integration. It adds a Claude panel, inline code actions, and keyboard shortcuts. Underneath, it talks to the same CLI.
You need both. The extension alone does nothing without the CLI installed. Most installation flows handle this automatically — but it's useful to know the two layers exist.
Installation
Install Node.js (if not already installed)
Claude Code CLI requires Node.js 18 or later. Check with
Claude Code CLI requires Node.js 18 or later. Check with
node --version. If you need it, download from nodejs.org — the LTS version is fine.
Install the Claude Code CLI
Open a terminal and run:
This installs the
Open a terminal and run:
npm install -g @anthropic-ai/claude-codeThis installs the
claude command globally. Verify with claude --version.
Install the VS Code extension
In VS Code: open the Extensions panel (Ctrl+Shift+X), search for Claude Code, and install the extension published by Anthropic. You'll see the Claude icon appear in the Activity Bar on the left.
In VS Code: open the Extensions panel (Ctrl+Shift+X), search for Claude Code, and install the extension published by Anthropic. You'll see the Claude icon appear in the Activity Bar on the left.
Sign in to Anthropic
Click the Claude icon in the Activity Bar (or press Ctrl+Shift+P → Claude: Sign In). A browser window opens for OAuth sign-in with your Anthropic account. Once authenticated, return to VS Code — the panel activates.
Click the Claude icon in the Activity Bar (or press Ctrl+Shift+P → Claude: Sign In). A browser window opens for OAuth sign-in with your Anthropic account. Once authenticated, return to VS Code — the panel activates.
Open a project folder
Claude Code is much more useful with a folder open (Ctrl+K Ctrl+O) than with a single file. When a folder is open, Claude can see all files in the project and understand the overall structure — not just the active tab.
Claude Code is much more useful with a folder open (Ctrl+K Ctrl+O) than with a single file. When a folder is open, Claude can see all files in the project and understand the overall structure — not just the active tab.
Verify the connection
Type a message in the Claude panel: "What files are in this project?" — Claude should respond with a summary of the folder contents. If it can, the setup is working correctly.
Type a message in the Claude panel: "What files are in this project?" — Claude should respond with a summary of the folder contents. If it can, the setup is working correctly.
Subscription vs API key
Claude Code can be connected via a Claude.ai subscription (Pro or above) or a direct API key from console.anthropic.com. The subscription route is simpler for individual use. The API key route gives more control over model selection and spend limits — useful if you're building or running Claude in multiple tools.
The VS Code Interface — What's Where
Activity Bar icon
The Claude logo in the left sidebar. Click it to open the Claude panel. This is your primary entry point.
The icon shows a badge when Claude is processing a request.
Chat panel
A full conversation interface — type prompts, see responses with syntax-highlighted code blocks, click to insert code directly into the editor.
The panel is persistent within a session but resets when VS Code restarts, unless you're using a Project.
Inline code lens
Appears above functions and classes — small links like "Claude: Explain" or "Claude: Generate tests." Click to send that code to Claude without copying and pasting.
Only appears when the extension is active. Can be toggled in extension settings.
Quick fix integration
When VS Code flags an error with a lightbulb, "Ask Claude" appears as a quick-fix option. Sends the error + surrounding code to Claude automatically.
Works with TypeScript, Python, JavaScript, and any language with a language server.
Command palette
All Claude commands are accessible via Ctrl+Shift+P → type "Claude". Includes sign in/out, open panel, clear chat, and any custom commands.
Useful for actions you do infrequently — no need to remember a keyboard shortcut.
Terminal integration
The VS Code integrated terminal can run
claude CLI commands directly. Useful for running slash commands or scripted tasks that go beyond the chat panel.The terminal and the panel share the same Claude installation but run independent sessions.
Key Keyboard Shortcuts
Ctrl + Shift + C
Open Claude panel
Toggle the Claude chat sidebar. Works from anywhere in the editor.
Ctrl + Shift + P → Claude
Command palette
Access all Claude commands — sign in, clear chat, explain selection, generate tests.
Select text → right-click
Context menu actions
"Ask Claude", "Explain with Claude", "Fix with Claude" appear on right-click when text is selected.
Ctrl + I
Inline edit (Copilot-style)
Opens a prompt bar inline in the editor. Type an instruction; Claude rewrites the selected code in place.
Ctrl + Enter
Send message
Submits the current message in the chat panel. Enter alone adds a newline.
Esc
Cancel / stop
Interrupts Claude mid-response. Useful if Claude goes off in the wrong direction.
Customise shortcuts
All Claude Code shortcuts can be remapped. Open Keyboard Shortcuts (Ctrl+K Ctrl+S), search for "Claude", and reassign any binding that conflicts with your existing setup. On macOS, Ctrl is typically Cmd.
Two Ways to Work with Claude in VS Code
Chat panel
- Full conversation — multi-turn, with history
- Good for questions, explanations, and planning
- Claude can reference multiple files at once
- Responses include code blocks you can insert
- Best for: "explain how this module works" or "help me design this feature"
Inline edit (Ctrl+I)
- Single instruction, applied directly to selected code
- No conversation history — one-shot per invocation
- Result appears as a diff you can accept or reject
- Best for: "rename this variable", "add error handling", "convert to async"
- Fastest path for small, precise changes
In practice you'll use both: the chat panel for anything that needs thought or context, and the inline editor for quick targeted changes. The two modes complement each other — use chat to plan and understand, use inline to execute.
Your First Real Interaction
With the extension installed and a project folder open, try this sequence to get a feel for the tool:
- Open a source file you know well.
- In the Claude panel, type: "Give me a one-paragraph summary of what this file does." — Claude reads the open file and responds.
- Select a function in the editor, right-click, and choose Explain with Claude. Read the explanation.
- Select the same function, press Ctrl+I, and type: "Add a docstring." Accept the diff.
- In the chat panel, ask: "What files in this project relate to authentication?" — Claude searches across the project, not just the open file.
These five steps cover the core interaction patterns. Everything in the following chapters builds on them.
Context is automatic in VS Code
Unlike the web interface, the VS Code extension automatically includes your active file in Claude's context — you don't have to paste code. Claude can also see other open files and read any file in the project when needed. This is the biggest practical advantage of working inside the editor rather than in a browser tab.