Claude Code in VS Code: Extension, Terminal, and the Optimal Workflow

Overview

Most developers discover Claude Code in one of two ways: they install the VS Code extension expecting something like Copilot, or they run the CLI in their terminal and wonder why there's also an extension. The confusion is reasonable. Claude Code is an agent that runs in your terminal, and the extension is a graphical layer on top of it.

The distinction matters. Copilot and Cursor operate inside the editor, completing code at the cursor. Claude Code operates on your entire repository. It reads files, runs shell commands, creates branches, and spawns subagents for parallel work. The VS Code extension gives that terminal agent a visual interface: inline diffs you can accept or reject, checkpoints to rewind mistakes, and @-mentions to reference specific files.

As of February 2026, VS Code itself is positioning as the home for multi-agent development. You can now run Claude, Codex, and Copilot agents side by side, managing them all from one place. Claude Code leads the VS Code Marketplace's agentic AI category.

Installation

Step 1: Install the CLI

The extension requires the CLI. If you already have it, skip to step 2.

npm install -g @anthropic-ai/claude-code

# Verify installation
claude --version

Step 2: Install the VS Code Extension

Open VS Code and press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux). Search "Claude Code" and install the one from publisher anthropic. Requires VS Code 1.98.0 or higher.

code --install-extension anthropic.claude-code

Step 3: Authenticate

Click the spark icon in your editor toolbar (top-right when a file is open) or run "Claude Code: Open" from the Command Palette (Cmd+Shift+P). The extension will prompt you to sign in with your Anthropic account on first use.

Alternative: CLI Only (No Extension)

You can use Claude Code in VS Code without the extension. Open the integrated terminal (Ctrl+`) and run claude. You get the full agent experience, just without visual diffs and checkpoints. Some developers prefer this for its simplicity.

CLI vs Extension: What You Get With Each

The CLI and extension use the same model, the same authentication, and the same CLAUDE.md project files. The differences are in the interface, not the intelligence.

Extension Walkthrough

Opening Claude Code

Three ways to start:

• Spark icon in the editor toolbar (top-right corner, appears when a file is open)
• Command Palette (Cmd+Shift+P), type "Claude Code", select "Open in New Tab"
• Status bar: click the Claude Code icon in the bottom-right corner

The Three Modes

Cycle between modes with Shift+Tab:

• Edit mode (default): Claude proposes changes, you approve or reject each one. Best for when you want control over every edit.
• Auto-Accept mode: Claude makes edits without asking. Best for scaffolding, prototyping, or tasks where you trust the direction.
• Plan mode: Claude reads and analyzes your codebase but cannot modify anything. No file edits, no terminal commands. Best for architecture exploration, understanding unfamiliar code, or reviewing what Claude would do before it does it.

Inline Diffs

When Claude proposes a file edit, VS Code opens a side-by-side diff view. Green highlights show additions, red shows deletions. You can accept all changes, reject all, or edit Claude's proposal before accepting. This is the primary advantage over the CLI, where diffs are text-only.

Checkpoints

The extension automatically creates checkpoints as Claude makes changes. If Claude goes in a wrong direction, double-press Esc to rewind both the conversation and the code to the previous checkpoint. This is safer than manually reverting git commits.

@-Mentions

Type @ in the chat input to reference files, folders, or specific line ranges. Select text in the editor, then press Option+K / Alt+K to auto-insert the file path and line numbers. This gives Claude targeted context instead of scanning the entire repo.

Keyboard Shortcuts

VS Code Settings for Claude Code

These settings are not required, but they make the Claude Code workflow smoother. Add them to your VS Code settings.json (Cmd+,, then click the file icon in the top-right).

{
  // Auto-save so Claude always reads your latest changes
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // Show inline diffs in a side-by-side view (not inline)
  "diffEditor.renderSideBySide": true,

  // Increase terminal scrollback for long Claude sessions
  "terminal.integrated.scrollback": 10000,

  // Disable bracket pair colorization noise
  "editor.bracketPairColorization.enabled": false,

  // Wider minimap click area for navigating Claude's edits
  "editor.minimap.maxColumn": 80
}

CLAUDE.md Project Configuration

Claude Code reads CLAUDE.md files at the repository root, ~/.claude/CLAUDE.md globally, and .claude/settings.json for per-project settings. These files control how Claude behaves in your project: which commands to run, which files to ignore, coding conventions to follow.

# Project: my-app
## Commands
- bun run dev        # Start dev server
- bun run build      # Production build
- bun run lint       # Lint check
- bun run typecheck  # Type check

## Conventions
- Use server components by default
- Prefer Tailwind over CSS modules
- Run typecheck before committing

MCP Servers That Enhance VS Code + Claude Code

MCP (Model Context Protocol) servers give Claude Code access to external tools and data. They work identically in the CLI and extension. Configure them in .claude/settings.json or via claude mcp add.

# Add a GitHub MCP server
claude mcp add github -- npx -y @modelcontextprotocol/server-github

# Add a filesystem server for cross-project access
claude mcp add fs -- npx -y @anthropic-ai/mcp-server-filesystem /path/to/projects

# List configured servers
claude mcp list

Claude Code vs Cursor vs Copilot in VS Code

Three AI tools, three different architectures. This comparison focuses on how they integrate with VS Code, not raw model quality.

Best Workflow By Role

FAQ

Does Claude Code have a VS Code extension?

Yes. Anthropic ships an official extension called "Claude Code" on the VS Code Marketplace with 2M+ installs. It provides inline diffs, checkpoint rewind, @-mention file references, and plan editing. Search "Claude Code" in the Extensions panel (Cmd+Shift+X) and install the one from publisher anthropic.

Is Claude Code an extension or a CLI tool?

Both. It started as a CLI tool (npm install -g @anthropic-ai/claude-code). The VS Code extension wraps the CLI with a graphical layer. The extension needs the CLI installed to function. Think of it as a frontend for the terminal agent.

Can I use Claude Code in VS Code without the extension?

Yes. Open VS Code's integrated terminal (Ctrl+`) and run claude. You get the full agent experience without visual diffs and checkpoints. Some developers prefer this for simplicity and keyboard-driven workflows.

What is the difference between CLI and extension?

Same model, same auth, same CLAUDE.md files. The extension adds: visual side-by-side diffs, automatic checkpoints with one-click rewind, @-mention file references, multiple conversation tabs, and a mode switcher. The CLI adds: message editing with conversation rewind, --dangerously-skip-permissions for trusted workflows, headless execution for CI, and the Claude Code SDK.

Does Claude Code work in Cursor or Windsurf?

The CLI works in any terminal, including Cursor's and Windsurf's. The official extension is compatible with Cursor. Windsurf support is unofficial but reported working by community members. You can run Claude Code as a second agent alongside Cursor's built-in AI.

What keyboard shortcut opens Claude Code in VS Code?

Cmd+Esc (Mac) or Ctrl+Esc (Windows/Linux) toggles focus between your editor and Claude. To open a new conversation: Cmd+N / Ctrl+N. To open from scratch: Cmd+Shift+P, type "Claude Code", select "Open in New Tab".

How does Claude Code compare to GitHub Copilot?

Different tools for different jobs. Copilot provides inline completions as you type. Claude Code is an agent that operates on your full repository: reads files, runs commands, creates branches, spawns subagents. They work well together in the same VS Code window. Copilot handles the small stuff, Claude handles the large stuff.

What MCP servers should I add for VS Code?

Start with GitHub (claude mcp add github) for PR management, then add database servers if you work with Postgres or SQLite. Browser automation (Playwright) is useful for frontend testing. File system servers help when you need cross-project access. Add servers incrementally based on what you actually need, not upfront.

How much does Claude Code cost?

The extension is free. Claude Code requires an Anthropic subscription: Pro at $20/month, Max at $100 or $200/month (5x or 20x usage), Team at $30/user/month, or Enterprise. Pay-as-you-go API credits also work. There is no free tier for Claude Code.

Can I run Claude Code and Copilot together?

Yes. They do not conflict. Copilot provides inline completions (ghost text as you type). Claude Code runs in its own panel and handles agentic tasks (multi-file edits, shell commands, code generation). Many developers use both daily.