Claude Code in VS Code: How to Set up and Use (2026)
You already use Claude Code in the terminal and like it. But switching between the editor and terminal all the time breaks your workflow. What if Claude Code could run inside VS Code, alongside your code, with direct access to open files?
The Claude Code extension for VS Code does just that. Same power as the terminal, integrated into the editor you already use. In this tutorial, you will learn how to install, configure, and use Claude Code in VS Code to maximize your productivity.
1. The Claude Code extension for VS Code
Anthropic has released the official Claude Code extension for VS Code, integrating the AI agent directly into the editor. The extension is not an autocomplete plugin -- it is the complete Claude Code, with all its capabilities, running within VS Code.
What the extension offers:
- Side chat panel-- chat with Claude Code without leaving the editor
- Workspace access-- Claude reads all open project files
- Direct editing-- changes are applied to files with visual diff (you approve or reject)
- Integrated terminal-- run commands in the VS Code terminal
- Editor context-- may reference active file, text selection, editor errors
- Skills and slash commands-- all skills work normally
Important:the extension uses the same backend as the Claude Code terminal. Your plan, credits, settings and skills are shared. It's not a setote product -- it's the same Claude Code with a different interface.
2. Step-by-step installation
Prerequisites
- VS Code version 1.96 or higher
- Node.js 18+ installed
- Claude Code CLI installed (
npm install -g @anthropic-ai/claude-code) - Active account at Anthropic (Max plan or API key)
Step 1: install the extension
1. Abra VS Code
2. Ctrl+Shift+X (abrir Extensions)
3. Busque "Claude Code"
4. Clique "Install" na extensao da Anthropic
# Opcao 2: pela linha de comando
$ code --install-extension anthropic.claude-code
Step 2: authenticate
After installing, VS Code shows the Claude Code icon in the sidebar. When you click, it asks for authentication:
- Max Plan:Open the browser to log in with your Anthropic account
- API Key:you enter the key directly in the extension settings
If you have already authenticated Claude Code on the terminal, the extension can reuse the existing authentication automatically.
Step 3: check
Claude Code: Voce esta no projeto "meu-app-react" com 147
arquivos. Stack detectada: React 19, TypeScript, Vite, Vitest.
If Claude responded with information about his project, everything is working.
3. Configuration and authentication
The extension has specific settings accessible inSettings > Extensions > Claude Code:
| Settings | What it does | Recommendation |
|---|---|---|
claude-code.model | Model to use | Leave it at default (use the best available) |
claude-code.autoApprove | Automatically approve actions | Start with "off", turn it on after getting used to it |
claude-code.terminalProfile | Which terminal to use for commands | Use the system default |
claude-code.maxFileSize | Maximum file size to read | 10MB (default) |
VS Code settings.json
CLAUDE.md works the same
The fileCLAUDE.mdin the root of the project it works identically in the extension. The instructions, conventions and restrictions you set are respected. If you already have CLAUDE.md configured for the terminal, you don't need to change anything.
4. Getting to know the interface
The extension adds three elements to VS Code:
Side panel (Chat)
The main panel where you talk to Claude Code. It works like the terminal, but with a visual interface. You type messages, Claude responds, and actions (create/edit files, run commands) appear with approve/reject buttons.
Status bar
In the bottom bar of VS Code, an indicator shows the status of Claude Code: connected, processing, or waiting. Click to see details such as tokens consumed in the session.
Inline actions
When Claude suggests edits to a file, they appear as inline diffs -- you see exactly what will change before accepting. Green for additions, red for removals. "Accept" and "Reject" buttons for each change.
5. Essential Keyboard Shortcuts
| Shortcut | Acao |
|---|---|
Ctrl+Shift+P> "Claude" | See all Claude Code commands |
Ctrl+L | Open/focus chat panel |
Ctrl+I | Online chat (to the editor, about the selected code) |
Ctrl+Shift+I | Send text selection to Claude |
Escape | Cancel the current operation |
Productivity tip: use Ctrl+Ifrequently. Select a code snippet, pressCtrl+Iand ask Claude to explain, refactor, add types or write tests. It's the fastest workflow for one-off edits.
Customize shortcuts
In VS Code, openKeyboard Shortcuts(Ctrl+K Ctrl+S) and search for "claude" to see and costmize all the extension's shortcuts.
6. Integrated terminal vs extension panel
You have two ways to use Claude Code in VS Code: through the integrated terminal and through the extension panel. Both work, but there are practical differences.
VS Code built-in terminal
Open the VS Code terminal (Ctrl+`) and typeclaude. It's exactly the same as using it in the external terminal, but inside VS Code. Useful if you prefer the pure CLI interface.
Claude Code v1.x | Modelo: claude-opus-4 | Contexto: 1M tokens
> crie um componente Button com variantes primary e secondary
Extension panel
The side panel (Ctrl+L) offers a more visual experience:
- Visual diffs for each file edit
- Approve/reject buttons for each action
- Scrolling conversation history
- Automatic reference to active file
- Visual progress feedback
Want to master this faster?
Everything you are learning here becomes 10x more powerful with ready-made skills. Instead of typing commands manually, skills do the heavy lifting for you. 748+ professional skills, installs in 2 minutes.
Quero as Skills — $97. Productivity workflows
Workflow 1: edit code with context
- Open the file you want to edit
- Select the relevant code snippet
- press
Ctrl+I(online chat) - Describe the change: "add error handling", "convert to async/await", "add TypeScript typing"
- Claude shows the inline diff -- accept or reject
This workflow is faster than copying code to the chat and pasting it back. Claude sees exactly which section you selected and applies the change in the right place.
Workflow 2: generate tests from the editor
- Open the component/function you want to test
- In the chat panel (
Ctrl+L), type: "create tests for active file" - Claude analyzes the open file and generates tests
- Tests appear as new file -- accept to create
- Claude can run
npm testautomatically to check
Workflow 3: debug with editor errors
- VS Code shows a red error on some line (TypeScript error, lint error)
- Select the row with error
Ctrl+I: "fix this error"- Claude reads the VS Code diagnostic error and applies the fix
Workflow 4: refactoring in multiple files
Atualize todos os imports e referencias.
Claude finds all files that referenceUserData, shows the diffs for each one, and you approve it in batch. Global refactoring in seconds.
8. Advanced tips
Mention files in chat
In the chat panel, use@followed by the name of the file to include its contents as context:
e me diga o que mudou e se a v2 introduziu algum bug
Use Problems panel errors
VS Code has a "Problems" panel (Ctrl+Shift+M) that lists errors and warnings. You can ask Claude:
Problems. Faca as correcoes uma por uma e me mostre cada diff.
Multi-root workspaces
If you use workspaces with multiple folders in VS Code, Claude Code has access to them all. Useful for monorepos or projects with setote frontend + backend.
Integrate with existing extensions
Claude Code works alongside its other extensions. It respects the settings of ESLint, Prettier, TypeScript and others. If Prettier formats when saving, the files that Claude creates are also formatted automatically.
9. Terminal vs extension: when to use each
| Scenario | Best option | Why |
|---|---|---|
| Quick code editing | Extension | Ctrl+I inline is faster |
| Complex multi-file tasks | Terminal or extension | Both work equally |
| Data analysis/CSV | Terminal | Extensive output looks better on the terminal |
| Visual debugging | Extension | Diff online are clearer |
| Automation with /loop | Terminal | Loop runs better on a dedicated terminal |
| Code review | Extension | Visual diffs make review easier |
| Generate project from scratch | Terminal | More control over structure creation |
| One-off refactoring | Extension | Select + Ctrl+I and the ideal workflow |
The pragmatic answer:use both. The extension for quick and contextual edits within the editor. The terminal for long tasks, automation and analysis. You can have both running simultaneously without conflict.
Combined use in practice:use the extension for daily development (edits, tests, debug). Use the terminal for infrastructure tasks (deploy, migration, automation with /loop). The skills work on both, so you don't need to double setup.
Next step: install skills and see the difference
You already know the basics. Now imagine Claude Code knowing how to do all this himself — SEO, copywriting, code review, deployment, data analysis. That's what skills do. Lifetime access, updates included.
Ver o Mega Bundle — $9FAQ
The main functionality is identical -- the same Claude Code runs on both. The difference is the interface. In the terminal, you have a purely command-line experience. In the VS Code extension, you have visual integration: Claude appears in a side panel, can reference open files, and edits are applied directly to the editor files with visual diff. The terminal is faster for those who prefer CLI; the extension is more visual and integrated into the editor's workflow.
No. The VS Code extension is free. You use the same plan as Claude Code (Max or Anthropic's API). If you already have access to Claude Code on the terminal, you can use the extension at no additional cost. Token consumption is the same, regardless of whether you use a terminal or extension.
Yes. Skills (files in.claude/commands/) work in both the terminal and the VS Code extension. You configure the skills once and they are available in both environments. In the extension, you can invoke skills directly from the chat panel using/nome-da-skill. The package ofskills dev from minhakills.ioworks in both environments without any additional configuration.