Claude Code VS Code Extension: Setup & Integration Guide

Problem: Want Claude Code's terminal power inside VS Code?

Here's your 2-minute quick win: Open VS Code, go to Extensions (Ctrl+Shift+X), and search "Claude Code". Install the official Anthropic extension (2M+ installs, verified publisher).

Click the Spark icon in your sidebar, and Claude Code runs directly in your IDE. No terminal switching. No context loss. Over 2 million developers already use it.

Why Use Claude Code in VS Code

The Claude Code VS Code extension brings terminal AI power into your IDE:

• Autonomous exploration: Claude reads, writes, and navigates your codebase independently
• Real-time diffs: See changes as inline diffs with accept/reject buttons
• Subagents: Run parallel AI tasks for complex multi-file operations
• Custom slash commands: Access CLI commands directly in the extension
• MCP support: Use MCP servers for browser automation and search
• Extended thinking: Toggle Claude's reasoning visibility for deep thinking
• Plan mode: Review and edit Claude's plans before accepting changes

Your first project becomes faster when Claude edits files directly in your workspace.

Installing the Claude Code Extension

Via VS Code Marketplace (recommended):

1. Open VS Code
2. Click Extensions (Ctrl+Shift+X)
3. Search "Claude Code"
4. Install the official Anthropic extension (verified publisher badge)

Requirements: VS Code 1.98.0+ and one of these:

• Claude Pro or Max subscription
• Team or Enterprise plan
• API key (pay-as-you-go)

Check your setup with our installation guide. The extension also works with Cursor, Windsurf, and VSCodium.

Setting Up Your First Session

Click the Spark icon in the VS Code sidebar to open Claude Code. Start a new conversation with Cmd+N (Mac) or Ctrl+N (Windows).

Ask Claude something practical:

Create a React component with useState hook for a counter

Watch the real-time diff appear. Drag the sidebar wider to see inline diffs:

1. Highlighted changes showing what Claude wants to add
2. Accept/Reject buttons at the diff level
3. File preview before committing

Accept the changes. Code appears in your workspace immediately.

Want modifications? Just ask:

Add a reset button to the counter

Claude updates the same file with another diff. You maintain full control. Learn more in our configuration basics guide.

Configuration Options

Extended Thinking Mode

Toggle Claude's reasoning visibility with the Extended Thinking button (bottom-right of prompt input). See Claude's thought process before changes - invaluable for debugging complex logic.

Auto-Accept Mode

Enable auto-accept to automatically apply Claude's changes. Best for trusted workflows where you want to watch implementation without interruption.

File Attachments

Drag files into the chat or use @-mentions:

@readme.md explain this project structure
@src/components/Header.tsx refactor to TypeScript generics

Claude already knows your workspace context. No manual setup needed.

Multiple Sessions

Run separate Claude sessions per workspace folder - perfect for microservices. Each session maintains its own context. Learn about agent workflows for advanced patterns.

When Things Go Wrong

See our troubleshooting guide for more fixes.

Enterprise: Third-Party Providers

Using Amazon Bedrock or Google Vertex AI? Add to your settings.json:

{
  "env": {
    "CLAUDE_CODE_USE_BEDROCK": "1",
    "AWS_REGION": "us-east-2"
  }
}

Disable login prompts with "claudeCode.disableLoginPrompt": true.

You Can Now Code with Claude in VS Code

• You connected terminal AI power to your IDE
• Try next: MCP extensions for browser automation
• Go deeper: Agent workflows for multi-step tasks
• Compare: Claude Code vs Cursor

The extension updates regularly. Currently in beta - report issues on GitHub.