How to Use Claude Code in VS Code: Complete Setup Guide
By Braincuber Team
Published on April 17, 2026
What You Will Learn:
- How to install the Claude Code VS Code extension step by step
- How to use plan mode to review changes before they are written
- How to navigate multi-file editing with VS Code diff review
- How to debug code by sharing errors and terminal output
- How to perform coordinated refactoring across your entire codebase
- How Claude Code in VS Code compares to the terminal and GitHub Copilot
The AI coding assistant space has split into two categories. On one side are autocomplete engines that respond to your keystrokes. On the other are systems that reason about your codebase, plan changes across files, run tests, and hand you back a diff to review. Claude Code is firmly in the second group.
Anthropic describes Claude Code as an agentic coding tool that reads your codebase, edits files, runs commands, and integrates with your development tools. The VS Code extension brings that workflow directly into your IDE, replacing the terminal back-and-forth with inline diffs and plan review so you can see what the agent actually changed.
Three Ways to Use Claude in VS Code
"Claude in VS Code" can mean three different things: the native Claude Code extension (what this guide covers), Claude models available through the GitHub Copilot model picker, or the claude CLI running in VS Code's integrated terminal. This tutorial focuses exclusively on the native extension published by Anthropic.
How the Claude Code VS Code Extension Works
The extension is a graphical panel layered on top of the Claude Code CLI. The CLI comes bundled inside when you install it, so there is nothing separate to manage.
When the extension activates, it runs a local MCP (Model Context Protocol) server named ide that the CLI connects to automatically. That connection is what lets the agent open diffs in VS Code's native diff viewer, read your current selection, and execute Jupyter notebook cells with a confirmation step.
Editor Toolbar
The Spark icon appears in the Editor Toolbar at the top-right when a file is open.
Activity Bar
The Spark icon is also in the Activity Bar on the left sidebar for quick access.
Status Bar
The Status Bar at the bottom-right shows the Spark icon, and works even without a file open.
Bundled CLI
The Claude Code CLI is bundled inside the extension. No separate installation required.
How to Set Up Claude Code in VS Code
You need VS Code 1.98.0 or higher and an Anthropic account. No separate Node.js installation is needed with the native installer.
| Requirement | Detail |
|---|---|
| VS Code Version | 1.98.0 or higher |
| Anthropic Account | Required (Pro plan or higher) |
| Pricing | Pro ($20/mo) or Max 5x ($100/mo) |
| Node.js | Bundled with extension (not needed separately) |
| Git for Windows | Required for CLI features on Windows |
Open the Extensions View
Press Cmd+Shift+X on Mac or Ctrl+Shift+X on Windows and Linux to open the Extensions view in VS Code.
Search and Install
Search for "Claude Code" and install the extension published by Anthropic. The Spark icon will appear in the Editor Toolbar once installed.
Authenticate
The first launch opens a browser sign-in. If you are already logged into Anthropic in that browser, authentication is quick. After sign-in, the Spark icon appears.
Troubleshoot the Spark Icon
If the Spark icon does not appear, confirm you have a file open (not just a folder). If it still does not appear, run "Developer: Reload Window" from the Command Palette, or temporarily disable other AI extensions like Cline or Continue since they can conflict.
How Project Memory Works with CLAUDE.md
After installation, create a CLAUDE.md file in your project root. Claude reads this plain markdown file at the start of every session, so you are not re-explaining your architecture or coding standards each time.
Run /init in the prompt box and Claude will generate a starting CLAUDE.md by analyzing your codebase. It picks up build commands, test instructions, and conventions it can infer. What it will not find on its own are things like which patterns to avoid or any architectural decisions that live only in someone's head.
Claude Code Does Not Work in Restricted Mode
Claude Code does not work in VS Code Restricted Mode. If your workspace is set to restricted, switch it to trusted to enable the extension.
What You Can Do with Claude Code in VS Code
The extension covers most of what Claude Code can do. The permission mode you are running shapes how each feature behaves.
| Permission Mode | Behavior | Best For |
|---|---|---|
| Default | Asks before every action | New users, cautious workflows |
| Plan | Reads codebase, asks questions, writes a full plan before changes | Multi-file changes |
| acceptEdits | Writes without pausing per edit | Trusted directions, iterative work |
| Auto | No prompts, uses background classifier. Requires Sonnet 4.6 or Opus 4.6. Available on Team, Enterprise, and API plans only. | Advanced users on eligible plans |
Code Generation and Explanation
Describe a feature in plain language and Claude plans the implementation across however many files it touches. For understanding unfamiliar code, type @ followed by a filename or folder path. Claude uses fuzzy matching, so @auth finds AuthService.ts, auth.js, and anything else close to that name.
Multi-File Editing with Diff Review
Every proposed change shows as a side-by-side comparison in VS Code's diff viewer before Claude writes anything. Red means deleted, green means added. You accept or reject per file. You cannot approve individual hunks within a file yet (that feature has been requested but is not implemented as of April 2026), so for partial acceptance you accept all and manually revert what you do not want.
Test Generation
Ask Claude to write tests for a module, run them, and fix failures, all in one session. The extension coordinates the write-run-fix cycle without you switching between files and terminals manually.
Debugging
Paste an error message or describe the symptom. The extension runs an IDE MCP server that exposes mcp__ide__getDiagnostics, which means Claude can read your VS Code Problems panel directly. The red squiggles are already visible to it without copy-pasting. Use @terminal:name to pull terminal output into the prompt the same way.
Refactoring, Git Workflows, and Code Review
Claude handles coordinated changes across files, writes commit messages and PR descriptions, and the /code-review command audits your code for issues. Add a REVIEW.md file to the project root to customize what it looks for.
Claude Code in VS Code for Multi-File Changes
Multi-file work is where the editor integration matters most. Reviewing changes in a terminal means scrolling through colored text. In VS Code, each file gets its own diff tab.
For a refactor touching fifteen files, stepping through them one at a time inside the editor makes the difference between actually catching a mistake and rubber-stamping a diff you are too tired to read properly.
Claude works at project level. Rename a function and it finds every call site automatically.
Switch to Plan Mode
Use plan mode for larger changes. Claude reads the codebase, asks clarifying questions, and writes a full implementation plan as a markdown document that VS Code opens for you to review.
Review the Written Plan
Claude also runs exploration commands first and saves the full plan to a file. Add your comments before anything gets written. The written plan is useful even when you end up changing most of it.
Use Targeted Context Mentions
For targeted context, use @-mentions with line ranges: @app.ts#5-10 focuses Claude on a specific region. Holding Shift while dragging files into the prompt box adds them as attachments. Option+K on Mac (or Alt+K on Windows and Linux) inserts an @-mention of your current file and selection directly.
Use Checkpoints to Rewind
Checkpoints track Claude's file edits throughout the session. Hover over any message in the conversation to reveal the rewind button. Options: fork the conversation while keeping code changes, rewind the code while keeping conversation history, or do both. Checkpoints persist for 30 days. Note: checkpoints do not track bash commands (rm, mv, cp) -- Git is still the right safety net for anything destructive.
Claude Code in VS Code for Debugging and Refactoring
Both workflows follow the same steps: give Claude context, review the proposed change, verify the result. The tricky part in each is gathering the right context.
Debugging
Share the error by pasting it directly, referencing terminal output with @terminal:name, or letting Claude pull from the Problems panel via mcp__ide__getDiagnostics. Claude traces the root cause, proposes a fix as a diff, and you run your tests to verify.
No Native Debugger Integration
Claude Code does not integrate with VS Code's native debugger: no breakpoints, no step-through, no live variables. The error-pasting and diagnostics route handles most cases. For live web debugging, @browser connects Claude to Chrome via the Claude in Chrome extension (version 1.0.36 or higher).
Refactoring
Claude handles coordinated file changes well: renaming a function across a large codebase, migrating from one library to another. The diff review step is what keeps it from being reckless.
The CLAUDE.md file matters here more than anywhere else in this tutorial. Without project-specific conventions loaded, Claude defaults to whatever patterns it infers from the codebase, which may not match what you actually want.
Context compaction is the practical limit on long sessions. When the context window fills, Claude auto-compacts by summarizing older conversation. After that, it can lose track of earlier decisions. Running /compact manually before starting a new phase gives more predictable results than waiting for auto-compaction to kick in mid-task.
Claude Code in VS Code vs. the Terminal Workflow
Anthropic's documentation calls the VS Code extension "the recommended way to use Claude Code in VS Code." The extension adds things the terminal cannot: the side-by-side diff viewer, plan review in a markdown document you can edit, multiple conversations in separate tabs, and @browser for live web debugging.
| Feature | VS Code Extension | Terminal CLI |
|---|---|---|
| Diff Viewer | Side-by-side in native VS Code diff viewer | Colored text output |
| Plan Mode | Opens as editable markdown document | Text output in terminal |
| Multiple Conversations | Separate tabs | Multiple terminal windows |
| @browser | Available | Not available |
Bash ! shortcut | Not available | Available |
| Tab completion | Not available | Available |
| Pipe-based workflows | Not available | Available |
| New MCP server configuration | Manage existing only | Full configuration |
The two are not mutually exclusive. Running claude in VS Code's integrated terminal still gets you IDE integration: diff viewing, selection context sharing, and diagnostic sharing all work from there. Sessions started in the extension can be continued in the terminal with claude --resume.
Most developers land on both: VS Code for multi-file work and careful review, the terminal for quick tasks and automation.
Claude Code in VS Code vs. GitHub Copilot
The native extension and Copilot share a model but not a product, and the two work quite differently.
Through Copilot, the Claude model runs inside GitHub's chat and completion paradigm: no local OS sandbox, no custom MCP integrations, no native terminal commands. Through the Claude Code extension, the same model runs with up to a 1M token context window, executes tasks across files, and has access to checkpoints, plan mode, and MCP servers.
The tools are built for different jobs. Copilot offers inline autocomplete as its core feature. Claude Code does not do autocomplete at all. Copilot's agent mode has grown considerably, but in community benchmarks it tends to lag on tasks spanning many files. Neither is inherently better.
| Aspect | Claude Code Extension | GitHub Copilot |
|---|---|---|
| Context Window | Up to 1M tokens | Varies by plan |
| Inline Autocomplete | Not available | Core feature |
| Multi-file autonomous tasks | Full support | Limited |
| MCP server integrations | Supported | Not available |
| Checkpoints / History | Available (30 days) | Session-based |
| Pricing | $20/mo (Pro) | $10/mo (Pro) |
A common pattern among developers who use both is $10 for Copilot (autocomplete while typing) and $20 for Claude Code (deliberate, larger-scale tasks). The two products cover different parts of the workflow without much overlap.
Security and Privacy Considerations
Anthropic does not use your code to train Claude models. Free, Pro, and Max users can opt out of data logging in account settings. Team, Enterprise, and API plans are excluded by default.
A fixed set of paths is always protected regardless of mode: .git, .vscode, .idea, .husky, and .claude (with exceptions for its own working subdirectories), plus .gitconfig, .gitmodules, and several shell and tool config files.
Sandboxing isolates bash commands to your working directory and blocks unauthorized network access. It is off by default; enable it with /sandbox.
Local transcripts are stored in plaintext under ~/.claude/projects/ for 30 days. Enterprise setups on Amazon Bedrock, Google Vertex AI, or Microsoft Foundry follow those providers' data terms. Auto mode is not available on those providers; it requires the Anthropic API directly.
Check Git Diffs Before Committing
In auto-accept mode, Claude writes without pausing and can touch settings.json and tasks.json. Always check git diffs before committing when using higher autonomy modes.
Limitations and Trade-offs
| Limitation | Detail |
|---|---|
| Extension is a CLI subset | Tab completion, ! bash shortcut, pipe workflows, and dontAsk mode are CLI-only. |
| Per-file, not per-hunk approval | You accept or reject entire files. There is no way to accept only specific changes within a file. |
| Rate limits | Pro users commonly hit limits. For all-day use, Max 5x or Max 20x is more realistic. |
| No native debugger | Claude Code cannot set breakpoints or step through live code. |
| Windows file locking | File locking between VS Code's explorer and Claude's writes causes more failures on Windows than macOS or Linux. Collapsing the explorer pane before large sessions tends to prevent it. |
5 Short FAQs
Frequently Asked Questions
Do I need to install the CLI separately before using the VS Code extension?
No. The extension includes the CLI and installs it for you automatically. You do not need to run a separate install command first.
Can I use Claude Code in VS Code on the Free plan?
No. Claude Code requires at least a Pro subscription ($20/mo). The Free plan does not include Claude Code access at all.
Is Auto mode available to me as a Pro or Max subscriber?
Not yet. As of April 2026, Auto mode is a research preview restricted to Team, Enterprise, and API plans. Pro and Max users are not eligible. On Team and Enterprise plans, an admin must also enable it in Claude Code admin settings.
Does Claude Code in VS Code have inline autocomplete like GitHub Copilot?
No. Claude Code does not do keystroke-level autocomplete. It is task-oriented: you describe what you want, it plans and executes across files, and you review the result.
What happens to my code? Does Anthropic train on it?
Anthropic does not use your code to train Claude models. Consumer accounts (Free, Pro, Max) can also opt out of data logging entirely in account settings.
Need Help Setting Up AI-Powered Development Tools?
Our AI integration experts can help you set up Claude Code, configure your development environment, and train your team on agentic coding workflows.