Claude Code is Anthropic's official AI coding agent, used by developers at companies from startups to Fortune 500. Learn more →

How to Use Claude Code in VS Code

VS Code users have two ways to use Claude Code: the official extension for integrated workflows, or the terminal for full CLI power. Here's how to set up both.

You can use Claude Code in VS Code two ways: install the official VS Code extension for an integrated visual experience with inline diffs and checkpoints, or run the CLI directly in VS Code's built-in terminal. The extension is the recommended approach for most users, but both methods work well — and you can use them together.

This guide covers both setup options step by step, plus keyboard shortcuts, plan mode, and workflow tips that make Claude Code and VS Code a genuinely productive combination.

What Is Claude Code?

Claude Code is Anthropic's AI coding assistant that runs in your terminal. Unlike autocomplete tools that suggest the next few characters, Claude Code understands your entire codebase and can make complex, multi-file changes based on natural language instructions. It is powered by Claude Sonnet 4.5 by default, with the option to switch to Claude Opus 4.6 or Claude Haiku 4.5.

You tell it what you want in plain English. It reads your code, plans the changes, and implements them—asking for permission along the way.

In VS Code, you can use Claude Code through:

• The integrated terminal — Full CLI experience, no extension needed
• The official VS Code extension — Native graphical interface with inline diffs, @-mentions, plan review, checkpoints, and keyboard shortcuts (this is the recommended approach)
• Both together — Use the extension for quick tasks, terminal for advanced CLI-only features

Option 1: Using Claude Code from VS Code's Terminal

The simplest approach. If you've already installed Claude Code CLI, just open VS Code's terminal and run it.

cd /path/to/your/project
claude

That's it. You now have Claude Code running alongside your editor.

Option 2: Installing the VS Code Extension

The official extension provides a more integrated experience with visual panels and editor shortcuts.

Extension Features

The VS Code extension adds:

• Draggable panel — Chat interface you can position in the sidebar, editor area, or secondary sidebar. Drag the panel to wherever you prefer it.
• Inline diff previews — Side-by-side comparison of original and proposed changes with accept/reject buttons
• @-mention files with line ranges — Type @ followed by a file name, or press Option+K (Mac) / Alt+K (Windows/Linux) to insert a reference like @auth.ts#5-10
• Plan mode — Claude describes what it will do and waits for approval before making changes
• Auto-accept mode — Claude makes edits without asking, for fast iteration
• Checkpoints — Track Claude's file edits and rewind to any previous state with fork, rewind, or fork-and-rewind options
• Multiple conversations — Open additional tabs or windows for parallel tasks, each with independent history and context
• Conversation history — Browse and search past conversations by keyword or time period
• Status bar integration — See current model, session info, and context usage
• Plugin management — Install and manage plugins via /plugins with a graphical interface
• Browser integration — Type @browser to connect to Chrome for testing web apps (requires Claude in Chrome extension)

Keyboard Shortcuts in VS Code

Master these shortcuts to move faster:

I documented my full VS Code + Claude Code configuration in a free guide if you want to replicate the exact setup.

VS Code Terminal Shortcuts

Claude Code Shortcuts (Inside Terminal CLI)

Extension Shortcuts

Workflow Tips for VS Code + Claude Code

VS Code Extension vs. CLI: What's Different

The extension and CLI share the same conversation history and settings, but some features are only available in one or the other.

To continue an extension conversation in the CLI, run claude --resume in the terminal.

Comparing Claude Code to Other VS Code AI Tools

Common Mistakes

1. Running Claude Code in a tiny terminal: Give the terminal enough height to see responses properly. Resize by dragging the terminal border or use Cmd/Ctrl+J to toggle panel.
2. Not using the right working directory: Claude Code reads from the current directory. Make sure your terminal is in the project root before starting.
3. Forgetting VS Code has its own git UI: After Claude makes changes, use VS Code's Source Control panel to review diffs. It's often clearer than terminal git.
4. Not saving files before asking Claude to read them: The extension has an autosave feature enabled by default, but verify this in settings. If using the CLI in the terminal, save with Cmd/Ctrl+S before referencing changed files.
5. Terminal font too small: Claude Code output can be dense. Increase terminal font size in VS Code settings for readability.
6. Missing the Spark icon: The Spark icon only appears in the Editor Toolbar when you have a file open. If you do not see it, check your VS Code version (1.98.0+ required), restart VS Code, or try the Status Bar button at the bottom-right instead.

Setting Up Your Ideal VS Code Layout

Here's a recommended layout for Claude Code work:

+------------------+------------------+
|                  |                  |
|   Editor         |   Editor         |
|   (main file)    |   (related file) |
|                  |                  |
+------------------+------------------+
|                                     |
|   Terminal (Claude Code)            |
|                                     |
+-------------------------------------+

To set this up:

1. Open your main file
2. Press Cmd/Ctrl+\ to split the editor
3. Open a related file in the second pane
4. Press Ctrl+` to open terminal at bottom
5. Resize the terminal to about 30-40% of window height
6. Run claude in the terminal

FAQ

Does Claude Code work with VS Code Remote (SSH/Containers)?

Yes. If you have Claude Code installed on the remote machine, you can run it from VS Code's remote terminal. The extension also works in remote sessions.

Can I use Claude Code with multiple VS Code windows?

Yes. Each VS Code window can have its own Claude Code session in its terminal. Sessions are independent.

Does the extension work offline?

No. Claude Code requires an internet connection to communicate with Anthropic's API.

Can Claude Code edit files I have open in VS Code?

Yes. Claude Code modifies files on disk. VS Code will detect the changes and update the editor. Save your work before letting Claude edit to avoid conflicts.

Which is better: terminal or extension?

The extension is the recommended approach for most users. It provides inline diffs, checkpoints, plan mode, and @-mention file references in a visual interface. The CLI gives access to every command and feature, plus tab completion and the ! bash shortcut. They share conversation history, so you can switch freely. Many developers use both.

What are checkpoints and how do I use them?

Checkpoints track Claude's file edits so you can rewind to any previous state. Hover over any message in the extension to see the rewind button with three options: fork conversation from that point, rewind code to that point, or both. This is useful when Claude goes down the wrong path.

What is plan mode?

Plan mode is a permission setting where Claude describes what it will do and waits for your approval before making any changes. Click the mode indicator at the bottom of the prompt box to switch between normal mode, plan mode, and auto-accept mode. You can set the default in VS Code settings.

Related Guides

• How to Install Claude Code — complete installation guide
• Slash Commands in Claude Code — all the shortcuts
• Claude Code vs Cursor — detailed comparison
• How to Change Models in Claude Code — Opus vs Sonnet vs Haiku