Claude Code VS Code Extension Now GA: Complete Setup Guide

The VS Code extension for Claude Code officially launched as generally available today. This brings Claude's AI coding assistance directly into your editor with a native graphical interface.

If you've been using the CLI version of Claude Code, the VS Code extension offers the same capabilities with easier access and better IDE integration. Here's what you need to know.

## What the VS Code Extension Does

The VS Code extension provides a graphical interface for Claude Code embedded in your editor. Instead of switching between terminal and code, you work with Claude in a panel alongside your files.

Key capabilities:
- Chat interface for coding questions and assistance
- @-mentions to reference specific files or folders
- Side-by-side diff view for proposed changes
- Permission modes to control how Claude makes edits
- Slash commands for quick actions
- MCP server integration (same as CLI)

This is now the recommended way to use Claude Code in VS Code.

## How to Install

Requirements:
- VS Code 1.98.0 or higher
- Anthropic account (Claude Pro or Team plan)
- For third-party providers: Amazon Bedrock, Google Vertex AI, or Microsoft Foundry

**Installation steps:**

1. Open VS Code
2. Press `Cmd+Shift+X` (Mac) or `Ctrl+Shift+X` (Windows/Linux) to open Extensions
3. Search for "Claude Code"
4. Click **Install**
5. Sign in with your Anthropic account when prompted

Alternatively, install directly:
- [VS Code direct link](vscode:extension/anthropic.claude-code)
- [Cursor direct link](cursor:extension/anthropic.claude-code)
- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code)

After installation, you'll see a spark icon (✱) in your editor toolbar when a file is open.

## Getting Started

**Open Claude panel:**
- Click the spark icon in Editor Toolbar (top-right)
- Click "✱ Claude Code" in Status Bar (bottom-right)
- Command Palette: `Cmd+Shift+P` → "Claude Code"

**Send your first prompt:**
- Select code in your editor (Claude sees it automatically)
- Type your question in the Claude panel
- Claude responds with explanations or proposed changes
- Review the side-by-side diff
- Accept, reject, or provide feedback

**Reposition the panel:**

Drag the Claude panel to:
- Left sidebar (for persistent access)
- Main editor area (for larger workspace)
- New window (for multi-monitor setups)

## Key Features

### @-Mentions for File Context

Reference files or folders directly in your prompts:

```
> Explain the logic in @auth
> What's in @src/components/
> How does @database.ts#45-67 work?
```

Claude uses fuzzy matching, so `@auth` finds `auth.js`, `AuthService.ts`, `authentication.py`, etc.

**Shortcuts:**
- `Option+K` (Mac) / `Alt+K` (Windows/Linux): Insert @-mention with current file path and line numbers
- Hold `Shift` while dragging files into prompt box to attach them

### Permission Modes

Control how Claude makes changes:

**Normal mode:** Claude asks permission before each action
- Best for learning and cautious workflows
- Shows what will change before applying

**Plan mode:** Claude shows full plan before making any changes
- Good for complex refactoring
- Review entire approach upfront

**Auto-accept mode:** Claude makes edits without asking
- Fastest workflow for experienced users
- Still shows changes via version control

Set default in settings: `claudeCode.initialPermissionMode`

### Slash Commands

Type `/` in the prompt to access:
- Attach files
- Switch models
- Toggle extended thinking
- View account usage
- Access MCP servers
- Configure hooks, memory, permissions

### Extended Thinking

Toggle via command menu (`/`) to give Claude more time for complex problems:
- Architectural decisions
- Complex refactoring
- Debugging subtle issues
- Performance optimization

Useful when the problem requires deeper reasoning than quick code suggestions.

### Conversation History

Click the dropdown at top of panel to:
- Search conversations by keyword
- Browse by time (Today, Yesterday, Last 7 days)
- Resume past conversations with full context

Run multiple parallel conversations:
- **Open in New Tab**: Keep multiple conversations in editor tabs
- **Open in New Window**: Use separate windows for isolated contexts

Status indicators on spark icon:
- Blue dot: Permission request pending
- Orange dot: Claude finished while tab was hidden

## VS Code Extension vs CLI Comparison

Both use the same underlying Claude Code capabilities, but the experience differs:

| Feature | CLI | VS Code Extension |
|---------|-----|-------------------|
| **Interface** | Terminal-based | Graphical panel |
| **Installation** | `npm install -g @anthropic/claude-code` | VS Code Extensions marketplace |
| **File references** | Drag files or type paths | @-mentions with fuzzy matching |
| **Diff viewing** | Terminal or opens editor | Side-by-side in VS Code |
| **Commands** | All bash-style commands | Subset via `/` menu |
| **MCP servers** | Configure via CLI | Uses CLI config, no extension config |
| **Checkpoints** | Yes | Coming soon |
| **Tab completion** | Yes | No |
| **`!` bash shortcut** | Yes | No |
| **Multi-tasking** | Separate terminal sessions | Multiple tabs/windows |
| **Best for** | Terminal workflows, scripts | IDE-centric development |

### When to Use the Extension

Use the VS Code extension when:
- You work primarily in VS Code
- You want visual diff views
- You prefer graphical interface over terminal
- You're editing code more than running scripts
- You want Claude integrated with debugging and source control UI

### When to Use the CLI

Use the CLI when:
- You prefer terminal workflows
- You're working with scripts and automation
- You need checkpoint functionality
- You want full bash integration with `!` commands
- You're SSH'd into remote servers
- You need tab completion for file paths

### Can You Use Both?

Yes. The CLI and extension share:
- Same MCP server configuration
- Same settings file (`~/.claude/settings.json`)
- Same API credentials
- Separate conversation histories

You can configure MCP servers via CLI:
```bash
claude mcp add --transport http github https://api.githubcopilot.com/mcp/
```

Then use those servers in both CLI and extension.

## Git Integration

Both CLI and extension work with git:

```
> commit my changes with a descriptive message
> create a pr for this feature
> summarize the changes in src/
```

The extension shows git status, diffs, and changes in VS Code's built-in Source Control panel.

**Git worktrees for parallel work:**
```bash
git worktree add ../project-feature-a -b feature-a
code ../project-feature-a
```

Each worktree can run separate Claude conversations for isolated features.

## Terminal Integration

You can run the CLI inside VS Code's integrated terminal:

1. Open terminal: `` Ctrl+` `` (Windows/Linux) or `` Cmd+` `` (Mac)
2. Run `claude` command
3. CLI auto-integrates with IDE for diff viewing

Reference terminal output in extension prompts:
```
> Check the error in @terminal:npm-test
```

Claude sees terminal output without copy-pasting.

## Settings and Configuration

Open settings: `Cmd+,` (Mac) or `Ctrl+,` (Windows/Linux) → Extensions → Claude Code

Useful settings:

| Setting | Default | Description |
|---------|---------|-------------|
| `selectedModel` | `default` | Model for new conversations |
| `useTerminal` | `false` | Launch in terminal mode instead of GUI |
| `initialPermissionMode` | `default` | `default`, `plan`, `acceptEdits`, or `bypassPermissions` |
| `preferredLocation` | `panel` | `sidebar` or `panel` |
| `autosave` | `true` | Auto-save files before Claude reads/writes |
| `useCtrlEnterToSend` | `false` | Use Ctrl/Cmd+Enter to send prompts |
| `respectGitIgnore` | `true` | Exclude .gitignore patterns |

These settings sync with CLI configuration where applicable.

## Keyboard Shortcuts

| Action | Shortcut |
|--------|----------|
| Focus Input | `Cmd+Esc` / `Ctrl+Esc` |
| Insert @-Mention | `Option+K` / `Alt+K` |
| New Conversation | `Cmd+N` / `Ctrl+N` (requires Claude focused) |
| Open in New Tab | `Cmd+Shift+Esc` / `Ctrl+Shift+Esc` |
| Toggle Terminal | `` Cmd+` `` / `` Ctrl+` `` |
| Multi-line Input | `Shift+Enter` |

Customize in: Preferences → Keyboard Shortcuts → search "Claude Code"

## Security and Privacy

Your code stays private:
- Not used for model training
- Same privacy guarantees as CLI
- Enterprise customers: talk to Anthropic about on-premise options

**Best practices:**
- Use manual approval mode for sensitive codebases
- Review all changes before accepting
- Enable VS Code Restricted Mode for untrusted workspaces
- Don't commit `.claude/` directories to version control

## Troubleshooting

### Spark Icon Not Visible

- Open a file (icon requires open file)
- Verify VS Code 1.98.0+ (Help → About)
- Run "Developer: Reload Window" from Command Palette
- Disable conflicting extensions (Cline, Continue, etc.)
- Check workspace isn't in Restricted Mode

### Extension Won't Install

- Verify VS Code has extension permissions
- Try manual install from [Marketplace](https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code)
- Check corporate firewall/proxy settings

### Claude Never Responds

- Check internet connection
- Start new conversation
- Try CLI: Run `claude` in terminal for detailed errors
- File issue on [GitHub](https://github.com/anthropics/claude-code/issues)

### @-Mentions Don't Work

- Ensure file is in workspace folder
- Check `.gitignore` isn't excluding file (if `respectGitIgnore` is true)
- Try full path: `@src/components/Button.tsx`

## Quick Takeaway

The VS Code extension for Claude Code is now generally available and is the recommended way to use Claude in your editor. It offers the same capabilities as the CLI with easier access through a graphical interface and better IDE integration.

Install via VS Code Extensions marketplace, sign in with your Anthropic account, and start using @-mentions and permission modes for efficient AI-assisted coding.

If you prefer terminal workflows or need advanced features like checkpoints and bash integration, the CLI remains available and shares configuration with the extension. Most developers will benefit from using both - extension for active development, CLI for scripts and automation.

The general availability release brings stability, performance improvements, and official support for the extension. If you're using Claude Code for development work, install the VS Code extension today.