Claude Code in VS Code

VS Code is one of the most popular code editors in the world, and Claude Code integrates directly into it. Instead of switching between a terminal and your editor, you can talk to Claude, review diffs, mention files, and approve plans without ever leaving your IDE.

This lesson walks you through installing, configuring, and mastering Claude Code inside Visual Studio Code.

---

1. Installing the Extension

From the Marketplace

1. Open VS Code.
2. Press Ctrl+Shift+X (or Cmd+Shift+X on macOS) to open the Extensions panel.
3. Search for "Claude Code".
4. Click Install on the official Anthropic extension.
5. Once installed, you will see a Claude icon in the Activity Bar (left sidebar).

From the Command Line

If you prefer the terminal:

After installation, restart VS Code to ensure the extension loads fully.

Verifying the Installation

• Click the Claude icon in the Activity Bar. A panel should open.
• If you see a prompt asking for authentication, sign in with your Anthropic account or paste your API key.
• You should see a chat input at the bottom of the panel.

---

2. Opening the Claude Panel

There are several ways to open the Claude Code panel:

The panel opens as a sidebar by default. You can drag it to the bottom panel or pop it out as a separate window if you prefer more space.

Panel Layout

The panel has three main areas:

1. Conversation history at the top — shows your messages and Claude's responses.
2. Plan view in the middle — appears when Claude proposes a multi-step plan.
3. Input box at the bottom — where you type your prompts.

---

3. Inline Diffs: Accept and Reject Changes

One of the most powerful features of Claude Code in VS Code is inline diffs. When Claude suggests changes to your code, those changes do not get applied automatically. Instead, they appear as diffs directly in your editor.

How Inline Diffs Work

1. You ask Claude to modify a file, for example: "Add error handling to the fetchUser function."
2. Claude generates the new code and presents it as an inline diff in the editor tab where the file is open.
3. You see green (added) and red (removed) highlights, just like a Git diff.
4. At the top of each diff hunk, you see two buttons:
   • Accept (checkmark icon) — applies this change.
   • Reject (X icon) — discards this change.

Accepting and Rejecting

• Accept All: Click "Accept All Changes" in the toolbar to apply every diff in the current file at once.
• Reject All: Click "Reject All Changes" to discard everything.
• Partial Accept: You can accept some hunks and reject others. This is useful when Claude's suggestion is mostly right but has one part you want to adjust manually.

Example Workflow

You: "Add input validation to the createUser function in src/services/user.ts" Claude proposes changes: - Adds a validateEmail() check -> You accept this - Adds a validatePassword() check -> You accept this - Changes the return type -> You reject this (you prefer the original)

Tips for Inline Diffs

• Review each hunk carefully before accepting. Claude is good, but context matters.
• If you reject a change, you can ask Claude to try again with more specific instructions.
• Inline diffs respect your editor's theme — dark themes show green/red highlights clearly.

---

4. @-Mentioning Files

Instead of copying and pasting file contents into your prompt, you can @-mention files directly. This tells Claude to read the file and include its contents as context.

Syntax

In the Claude panel input box, type:

@src/services/user.ts Can you add pagination to the getUsers function?

Claude will read the file at src/services/user.ts and use its contents when generating a response.

Mentioning Multiple Files

@src/models/User.ts @src/services/user.ts Refactor getUsers to return the User type defined in the model file.

What Can You @-mention?

Autocomplete

When you type @, VS Code shows an autocomplete dropdown with files and folders from your workspace. You can type to filter, then press Enter or Tab to select.

Benefits of @-mentions

• No copy-paste needed.
• Claude sees the full file, not a partial snippet you might accidentally truncate.
• The file reference is tracked, so Claude can propose inline diffs to exactly the right file.

---

5. Reviewing Plans

When you ask Claude to do something complex (e.g., "Refactor the auth module to use JWT"), Claude may propose a plan before writing code.

What Is a Plan?

A plan is a step-by-step breakdown of what Claude intends to do:

Plan: 1. Update src/auth/token.ts — replace session tokens with JWT generation 2. Update src/auth/middleware.ts — add JWT verification 3. Update src/auth/types.ts — add JwtPayload interface 4. Update tests/auth.test.ts — add JWT-specific test cases 5. Update package.json — add jsonwebtoken dependency

Interacting with Plans

• Approve the plan: Click "Approve" or type "go ahead" to let Claude execute all steps.
• Modify the plan: Type feedback like "Skip step 5, I already have the dependency" and Claude will adjust.
• Reject the plan: Type "No, let's take a different approach" and Claude will ask for clarification.

Why Plans Matter

• They give you visibility into what Claude is about to do.
• You can catch mistakes before any code is written.
• Complex tasks are broken into manageable, reviewable chunks.

---

6. Conversation History

Your conversations with Claude are saved and can be revisited.

Viewing History

• Click the clock icon in the Claude panel toolbar.
• A list of past conversations appears, sorted by date.
• Click any conversation to reopen it and continue where you left off.

Managing History

• Rename: Right-click a conversation and select "Rename" to give it a meaningful name like "Auth refactor" or "Bug fix #342."
• Delete: Right-click and select "Delete" to remove conversations you no longer need.
• Export: Some versions support exporting conversation history as JSON or Markdown for documentation purposes.

Context Across Conversations

Each conversation has its own context. If you start a new conversation, Claude does not remember what you discussed in a previous one unless you explicitly provide context (via @-mentions or by pasting information).

---

7. Settings and Configuration

Accessing Settings

• Open VS Code Settings (Ctrl+, or Cmd+,).
• Search for "Claude" to see all Claude Code extension settings.
• Alternatively, click the gear icon in the Claude panel.

Key Settings

Workspace-Level Settings

You can configure Claude differently per project by adding settings to .vscode/settings.json:

---

8. Keyboard Shortcuts

Default Shortcuts

Customizing Shortcuts

1. Open Keyboard Shortcuts: Ctrl+K Ctrl+S.
2. Search for "Claude."
3. Click the pencil icon next to any command to rebind it.

---

9. Terminal vs VS Code: When to Use Which

Both the terminal-based Claude Code and the VS Code extension are powerful, but they shine in different scenarios.

Recommendation

Use the VS Code extension as your primary interface when you are actively editing code. Use the terminal for quick questions, automation scripts, and when working on remote servers without VS Code.

---

10. Pro Tips

Tip 1: Split Your Editor

Open the Claude panel on one side and your code on the other. This gives you a "pair programming" layout where you can see Claude's suggestions alongside your existing code.

Tip 2: Use @-mentions for Context

Instead of explaining what a function does, just @-mention it. Claude can read the code and understand it faster than you can describe it.

Tip 3: Review Plans Before Complex Tasks

Always enable showPlanBeforeExecuting. For complex tasks, the plan review step saves you from having to undo a cascade of wrong changes.

Tip 4: Combine with Git

After accepting Claude's diffs, immediately stage and commit with a meaningful message. This lets you easily revert if something goes wrong later.

Tip 5: Use Conversation Names

Name your conversations by task ("Fix login bug", "Add caching layer"). This makes it easy to return to a conversation later if you need to continue or reference the discussion.

Tip 6: Keyboard-First Workflow

Learn the keyboard shortcuts. Opening the panel, sending messages, and accepting/rejecting diffs without touching the mouse makes you significantly faster.

Tip 7: Workspace Trust

VS Code has a Workspace Trust feature. Make sure your workspace is trusted; otherwise, the Claude extension may be restricted.

---

Summary

The Claude Code VS Code extension transforms your editor into an AI-powered development environment. Key features:

• Inline diffs let you review, accept, or reject changes visually.
• @-mentions give Claude context without copy-paste.
• Plan review ensures Claude does what you expect before writing code.
• Conversation history keeps your work organized.
• Customizable settings and shortcuts let you tailor the experience.

Whether you are fixing a bug, refactoring a module, or building a new feature, Claude Code in VS Code keeps you in flow without switching tools.