How to Use Claude Code in VS Code — Complete Installation Guide

You use Claude Code on the terminal and love the productivity. But every time you have to switch between the editor and the command line, you waste precious seconds — and lose flow. Now imagine Claude Code running inside VS Code, alongside your code, with direct access to open files, the error panel and git history. No alt-tab. No copying and pasting.

The official Claude Code extension for Visual Studio Code does just that. And in this complete guide, you will learn everything: from installation to advanced techniques that few developers know about. We'll cover every detail so you can leave here using Claude Code in VS Code like a pro.

If you are looking forhow to use Claude Code in VS Codein the most efficient way possible, this is the definitive tutorial. Let's get started.

1. What is the Claude Code extension for VS Code

Anthropic has released the official Claude Code extension for VS Code, bringing the full AI agent into the editor. We're not talking about a simple autocomplete like Copilot — it's the entire Claude Code, with all its reading, writing, command execution and reasoning capabilities, natively integrated into Visual Studio Code.

To understand what the extension offers, see the comparison with other AI tools in VS Code:

Feature	Claude Code VS Code	GitHub Copilot	Cursor
Inline autocomplete	Yes (via inline chat)	Sim	Sim
Side chat	Sim	Sim	Sim
Executing commands in the terminal	Yes (self-employed)	Limited	Sim
Standalone multi-file editing	Sim	Nao	Sim
Reading the entire project	Yes (up to 1M tokens)	Limited	Sim
Custom skills/commands	Yes (.claude/commands/)	Nao	Rules
Git integration	Yes (commit, PR, review)	Limited	Sim
Approval of actions with diff	Yes (accept/reject)	Nao	Sim
1M Token Context	Sim	Nao	Nao

The Claude Code extension stands out especially in three areas:autonomy(performs complex tasks alone),context(read the entire project with 1M window tokens) andcustomization(customized skills for any domain).

What the extension offers in practice

• Side chat panel— chat with Claude Code without leaving the editor
• Workspace access— Claude reads all files in the open project automatically
• Direct editing with diff— changes are applied to files with visual diff that you approve or reject
• integrated terminal— runs commands in the VS Code terminal (npm, git, tests)
• Editor context— references the active file, text selection, errors from the Problems panel
• Skills and slash commands— all skills in the .claude/commands/ folder work normally
• Inline suggestions— select code and ask for contextual edits

2. How to install Claude Code in VS Code

Installing Claude Code in VS Code is simple, but there are some prerequisites that you need to meet first. Let's go through the complete step by step.

Mandatory prerequisites

Requirement	Minimum version	How to check
VS Code	1.96+	code --version
Node.js	18+	node --version
Claude Code CLI	Latest version	claude --version
Anthropic Account	Max plan or API key	console.anthropic.com

Step 1: install the Claude Code CLI (if you don't already have it)

If you don't already have Claude Code installed globally, start here:

Step 2: Install the extension in VS Code

There are three ways to install the extension. Choose the one you prefer:

Step 3: authenticate

After installing, VS Code shows the Claude Code icon in the left sidebar. When clicked, the extension asks for authentication:

• MaxPlan:click on "Sign in with Anthropic" — opens the browser to log in with your account. After authenticating, you automatically return to VS Code.
• API Key:click "Use API Key" — enter your key directly. Ideal for anyone using the pay-as-you-go API.
• Existing authentication:if you have already authenticated Claude Code in the terminal (claude), the extension can automatically reuse the session.

Step 4: check if it is working

If Claude responded with correct information about your project, the installation is complete. If there are errors, the most common causes are: outdated Node.js, CLI not installed, or invalid API key.

Troubleshooting common installation problems

Problem	Cause	Solution
"Claude Code not found"	CLI not installed	npm install -g @anthropic-ai/claude-code
"Authentication failed"	Expired token	Rode claudeon the terminal to re-authenticate
Extension does not appear	Outdated VS Code	Update to v1.96+
"Node.js not found"	Node is not in the PATH	Reinstall Node.js or add to PATH
Panel locks when opening	Conflict with another extension	Disable competing AI extensions and restart

3. Initial configuration: API key, model and permissions

With the extension installed and authenticated, it's time to configure it for your workflow. The extension has settings accessible inSettings > Extensions > Claude Codeor directly onsettings.json.

Main settings

Settings	What it does	Default value	Recommendation
claude-code.model	Model to use	Automatic (best available)	Leave it at default
claude-code.autoApprove	Automatically approve actions	off	Start off, turn on after getting used to it
claude-code.showDiffBeforeApply	Show diff before applying	true	Keep it on
claude-code.terminalProfile	Which terminal to use	Default	Use the system default
claude-code.maxFileSize	Maximum file size	10MB	Increase to 20MB if working with CSVs
claude-code.contextWindow	Context window	Maximum available	Leave it at most

Recommended configuration in settings.json

Permission levels

Claude Code in VS Code operates with three permission levels, just like in the terminal:

• Reading:read files, analyze code, search the project. Always allowed.
• Writing:creates and edits files. Show diff for approval (unless autoApprove is on).
• Execution:runs commands in the terminal (npm, git, scripts). It asks for approval by default.

You can control these permissions inCLAUDE.mdproject and extension settings. The recommendation for beginners is to keep everything with manual approval until you feel comfortable with Claude's behavior.

CLAUDE.md works identically

The fileCLAUDE.mdin the root of the project it works the same way in the extension. Custom instructions, conventions, restrictions and commands are respected. If you already have CLAUDE.md configured for the terminal, you don't need to change anything at all.

4. Interface: side panel, integrated terminal and inline suggestions

The extension adds several elements to VS Code. Let's detail each one so you can get the most out of it.

Side Panel (Chat Panel)

The main panel where you talk to Claude Code. Access withCtrl+L (ou Cmd+Lon Mac). It works like the terminal, but with a complete visual interface:

• Text field for typing messages
• Answers formatted with syntax highlighting
• Actions (create/edit files, run commands) appear with "Accept" / "Reject" buttons
• Scrolling conversation history
• Automatic reference to the file that is open in the editor
• Indicator of tokens consumed in the session

Integrated terminal

You can also use Claude Code via the CLI within the integrated VS Code terminal. Open the terminal (Ctrl+`) and typeclaude. It's exactly the same as running in the external terminal, but without leaving the editor.

The difference between using the integrated terminal and the side panel: in the terminal you have the pure CLI experience. In the side panel you have visual diffs, approval buttons and automatic reference to the active file. Use whatever works best for each task.

Inline suggestions (Chat Inline)

The most powerful feature for quick edits. Select a code snippet in the editor, pressCtrl+Iand a chat field appears directly in the editor, next to the selected code.

Examples of using inline chat:

• "Add error handling to this function"
• "Convert to async/await"
• "Add TypeScript typing"
• "Refactor using the Strategy pattern"
• "Explain what this code does"
• "Write a unit test for this function"

Claude applies changes as inline diffs — green for additions, red for deletions. You accept or reject each change individually.

Status bar

In the bottom bar of VS Code, an indicator shows the status of Claude Code in real time: connected (green), processing (yellow/animation), or disconnected (red). Click to see details such as tokens consumed, active model and session time.

Problems panel + Claude Code

One of the most useful integrations: Claude Code can access the dashboardProblemsfrom VS Code (Ctrl+Shift+M). This means that errors from TypeScript, ESLint, and other extensions are available as context. You can order:

5. Essential Keyboard Shortcuts

Mastering shortcuts is what separates those who use Claude Code in VS Code efficiently from those who waste time navigating menus. Here are all the shortcuts you need to memorize:

Top Shortcuts

Shortcut (Windows/Linux)	Shortcut (Mac)	Acao
Ctrl+L	Cmd+L	Open/focus the side chat panel
Ctrl+I	Cmd+I	Inline chat (about selected code)
Ctrl+Shift+I	Cmd+Shift+I	Send text selection to chat
Ctrl+Shift+P> "Claude"	Cmd+Shift+P> "Claude"	See all extension commands
Escape	Escape	Cancel Claude's current operation
Ctrl+Enter	Cmd+Enter	Send message in chat (when multiline)
Ctrl+Shift+M	Cmd+Shift+M	Open Problems panel (use with Claude)

Useful navigation shortcuts with Claude Code

Shortcut	Acao	Why is it useful with Claude
Ctrl+`	Open integrated terminal	Use Claude Code CLI within VS Code
Ctrl+Shift+X	Open extensions panel	Check version of the Claude Code extension
Ctrl+K Ctrl+S	Open Keyboard Shortcuts	Customize Claude Code Shortcuts
Ctrl+,	Open Settings	Adjust extension settings
Ctrl+Shift+G	Open Source Control	See git changes after Claude edit

Customize shortcuts

If the default shortcuts conflict with your extensions, customize themKeyboard Shortcuts(Ctrl+K Ctrl+S). Search for "claude" to see and edit all shortcuts for the extension. You can exchangeCtrl+Lin any combination you prefer.

6. How to use skills within VS Code

Skills are Claude Code's most powerful feature — and they work identically in VS Code. A skill and an instruction file in.claude/commands/which turns Claude into an expert in any domain: SEO, copywriting, code review, deployment, data analysis and much more.

How skills work in VS Code

In the VS Code extension, you invoke skills from the chat panel using/nome-da-skill. The skill carries the instructions and Claude starts to follow that specialized behavior.

Structure of a skill

Where the skills are

Location	Scope	Path
Project	Just for this repo	.claude/commands/
User	All projects	~/.claude/commands/

748+ skills ready to install

Creating skills from scratch works, but it takes time. Minhaskills.io's package of 748+ professional skills offers ready-made skills for 7 categories: Digital Marketing, SEO & GEO, Copywriting, Development, Social Media, Monetization, and Workflows & Automation. You can install it in 2 minutes by copying the folders to.claude/commands/and they are all available in both the terminal and VS Code.

Checking available skills

In the VS Code chat panel, type/and the extension shows the list of all skills available with autocomplete. You can browse the list and select the skill you need.

7. Advanced tips: multi-file, git and debugging

With the basics mastered, let's move on to the advanced techniques that transform you from a casual user to a power user of Claude Code in VS Code.

Tip 1: Mention files with @

In the chat panel, use@followed by the name of the file to include as explicit context:

Tip 2: Multi-file refactoring

Claude Code in VS Code does global refactorings that "Find & Replace" can't — because it understands semantics, not just text:

Claude finds all the affected files, shows diffs for each one, and you batch approve them. Secure global refactoring in seconds.

Tip 3: complete git integration

Claude Code in VS Code has full access to git. Use to automate versioning tasks:

• Smartcommit:"analyze the changes and create a commit with a descriptive message"
• Code review:"review the diff between main and this branch"
• Conflict resolution:"resolve merge conflicts while maintaining the current branch logic"
• Create PR:"create a pull request with a title and description based on the commits"
• Selective cherry-pick:"only apply changes from commit X that affect the auth module"

After Claude makes changes via git, VS Code's Source Control panel (Ctrl+Shift+G) automatically updates, showing all modified files.

Tip 4: Assisted debugging

Combine the VS Code debugger with Claude Code for a powerful debugging experience:

1. Put a breakpoint in the suspicious code
2. Run the debugger (F5)
3. When you stop at the breakpoint, open Claude's panel (Ctrl+L)
4. Ask: "I'm stuck at this breakpoint, the variables are [copy from the Variables panel]. What's causing the bug?"
5. Claude analyzes the context and suggests the correction

Tip 5: Multi-root workspaces

If you use workspaces with multiple folders (monorepos, frontend + backend), Claude Code has access to all folders in the workspace. You can ask for tasks that cross boundaries:

• "Update the interface on the backend and the corresponding component on the frontend"
• "The /api/users endpoint returns UserResponse. Ensure the type in the frontend (packages/web) reflects the same structure"

Tip 6: Use with existing extensions

The Claude Code respects its extensions. Files created or edited by Claude are formatted automatically if you have Prettier or ESLint configured to format on save. TypeScript errors appear in the Problems panel after edits. Everything integrated.

Tip 7: history and continuity

The chat panel keeps the conversation history. If you close VS Code and reopen, you can continue where you left off using/resumein chat. Claude recovers the context of the previous session.

8. Claude Code VS Code vs terminal — when to use each

With two ways to use Claude Code, the question is: when to use each one? Here is a practical guide based on real scenarios.

Scenario	Best option	Why
Quick code editing	VS Code (Ctrl+I)	Inline chat is the fastest workflow for one-off edits
Multi-file refactoring	Both	VS Code shows visual diffs, terminal shows full output
Data analysis/CSV	Terminal	Extensive output looks better on the terminal without visual limits
Visual debugging	VS Code	Inline diffs + Problems panel + integrated debugger
Automation with /loop	Terminal	Long-lasting loop runs better on a dedicated terminal
Code review	VS Code	Side-by-side visual diffs make review easier
Generate project from scratch	Terminal	More control over creating directory structure
Write tests	VS Code	Active file as context + inline suggestions
Deployment and CI/CD	Terminal	Long commands and extensive logs
Documentation	VS Code	Edit README/docs side by side with code
Git operations	Both	VS Code for visual, terminal for batch operations
Specialized skills	Both	Skills work identically in both

The pragmatic answer

Use both.The extension for daily development — edits, testing, debugging, code review. The terminal for long tasks — automation, deployment, data analysis, /loop. You can have both running simultaneously without conflict. Skills, configurations and authentication are shared.

Performance: extension vs terminal

Metric	VS Code Extension	CLI terminal
Response speed	Identical	Identical
Token consumption	Identical	Identical
RAM Usage	~100-200MB more (VS Code overhead)	Lighter
Context window	Up to 1M tokens	Up to 1M tokens
Edit latency	Visual diff adds ~1s	Direct application

There is no functional difference between using Claude Code in VS Code or in the terminal. Processing takes place on the same Anthropic servers. The only difference is the presentation layer — visual diffs, approval buttons and integration with the editor.