Claude Code no VS Code: Como Configurar e Usar (2026)
Voce ja usa o Claude Code no terminal e gosta. Mas trocar entre o editor e o terminal o tempo todo quebra seu fluxo de trabalho. E se o Claude Code pudesse rodar dentro do VS Code, ao lado do seu codigo, com acesso direto aos arquivos abertos?
A extensao do Claude Code para VS Code faz exatamente isso. Mesma potencia do terminal, integrada ao editor que voce ja usa. Neste tutorial, voce vai aprender a instalar, configurar e usar o Claude Code no VS Code para maximizar sua produtividade.
1. A extensao Claude Code para VS Code
A Anthropic lancou a extensao oficial do Claude Code para VS Code, integrando o agente de IA diretamente no editor. A extensao nao e um plugin de autocomplete -- e o Claude Code completo, com todas as suas capacidades, rodando dentro do VS Code.
O que a extensao oferece:
- Painel de chat lateral -- converse com o Claude Code sem sair do editor
- Acesso ao workspace -- o Claude le todos os arquivos do projeto aberto
- Edicao direta -- mudancas sao aplicadas nos arquivos com diff visual (voce aprova ou rejeita)
- Terminal integrado -- executa comandos no terminal do VS Code
- Contexto do editor -- pode referenciar o arquivo ativo, selecao de texto, erros do editor
- Skills e slash commands -- todas as skills funcionam normalmente
Importante: a extensao usa o mesmo backend do Claude Code terminal. Seu plano, creditos, configuracoes e skills sao compartilhados. Nao e um produto separado -- e o mesmo Claude Code com uma interface diferente.
2. Instalacao passo a passo
Pre-requisitos
- VS Code versao 1.96 ou superior
- Node.js 18+ instalado
- Claude Code CLI instalado (
npm install -g @anthropic-ai/claude-code) - Conta ativa na Anthropic (plano Max ou API key)
Passo 1: instalar a extensao
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
Passo 2: autenticar
Apos instalar, o VS Code mostra o icone do Claude Code na barra lateral. Ao clicar, ele pede autenticacao:
- Plano Max: abre o navegador para login com sua conta Anthropic
- API Key: voce insere a key diretamente nas configuracoes da extensao
Se voce ja autenticou o Claude Code no terminal, a extensao pode reutilizar a autenticacao existente automaticamente.
Passo 3: verificar
Claude Code: Voce esta no projeto "meu-app-react" com 147
arquivos. Stack detectada: React 19, TypeScript, Vite, Vitest.
Se o Claude respondeu com informacoes do seu projeto, esta tudo funcionando.
3. Configuracao e autenticacao
A extensao tem configuracoes especificas acessiveis em Settings > Extensions > Claude Code:
| Configuracao | O que faz | Recomendacao |
|---|---|---|
claude-code.model | Modelo a ser usado | Deixe no padrao (usa o melhor disponivel) |
claude-code.autoApprove | Aprovar acoes automaticamente | Comece com "off", ligue apos se acostumar |
claude-code.terminalProfile | Qual terminal usar para comandos | Use o padrao do sistema |
claude-code.maxFileSize | Tamanho maximo de arquivo para ler | 10MB (padrao) |
settings.json do VS Code
// .vscode/settings.json
{
"claude-code.autoApprove": false,
"claude-code.showDiffBeforeApply": true,
"claude-code.terminalProfile": "default"
}CLAUDE.md funciona igual
O arquivo CLAUDE.md na raiz do projeto funciona identicamente na extensao. As instrucoes, convencoes e restricoes que voce definiu sao respeitadas. Se voce ja tem um CLAUDE.md configurado para o terminal, nao precisa mudar nada.
4. Conhecendo a interface
A extensao adiciona tres elementos ao VS Code:
Painel lateral (Chat)
O painel principal onde voce conversa com o Claude Code. Funciona como o terminal, mas com interface visual. Voce digita mensagens, o Claude responde, e as acoes (criar/editar arquivos, rodar comandos) aparecem com botoes de aprovar/rejeitar.
Status bar
Na barra inferior do VS Code, um indicador mostra o status do Claude Code: conectado, processando, ou aguardando. Clique para ver detalhes como tokens consumidos na sessao.
Inline actions
Quando o Claude sugere edicoes em um arquivo, elas aparecem como diffs inline -- voce ve exatamente o que vai mudar antes de aceitar. Verde para adicoes, vermelho para remocoes. Botoes "Accept" e "Reject" para cada mudanca.
5. Atalhos de teclado essenciais
| Atalho | Acao |
|---|---|
Ctrl+Shift+P > "Claude" | Ver todos os comandos do Claude Code |
Ctrl+L | Abrir/focar o painel de chat |
Ctrl+I | Chat inline (no editor, sobre o codigo selecionado) |
Ctrl+Shift+I | Enviar selecao de texto para o Claude |
Escape | Cancelar a operacao atual |
Dica de produtividade: use Ctrl+I com frequencia. Selecione um trecho de codigo, pressione Ctrl+I e peca ao Claude para explicar, refatorar, adicionar tipos ou escrever testes. E o workflow mais rapido para edicoes pontuais.
Personalizar atalhos
No VS Code, abra Keyboard Shortcuts (Ctrl+K Ctrl+S) e busque "claude" para ver e personalizar todos os atalhos da extensao.
6. Terminal integrado vs painel da extensao
Voce tem duas formas de usar Claude Code no VS Code: pelo terminal integrado e pelo painel da extensao. Ambos funcionam, mas tem diferencas praticas.
Terminal integrado do VS Code
Abra o terminal do VS Code (Ctrl+`) e digite claude. E exatamente o mesmo que usar no terminal externo, mas dentro do VS Code. Util se voce prefere a interface CLI pura.
Claude Code v1.x | Modelo: claude-opus-4 | Contexto: 1M tokens
> crie um componente Button com variantes primary e secondary
Painel da extensao
O painel lateral (Ctrl+L) oferece uma experiencia mais visual:
- Diffs visuais para cada edicao de arquivo
- Botoes de aprovar/rejeitar para cada acao
- Historico de conversa com scroll
- Referencia automatica ao arquivo ativo
- Feedback visual de progresso
O Claude encontra todos os arquivos que referenciam UserData, mostra os diffs para cada um, e voce aprova em lote. Refatoracao global em segundos.
8. Dicas avancadas
Mencionar arquivos no chat
No painel de chat, use @ seguido do nome do arquivo para incluir seu conteudo como contexto:
e me diga o que mudou e se a v2 introduziu algum bug
Usar erros do Problems panel
O VS Code tem o painel "Problems" (Ctrl+Shift+M) que lista erros e warnings. Voce pode pedir ao Claude:
Problems. Faca as correcoes uma por uma e me mostre cada diff.
Multi-root workspaces
Se voce usa workspaces com multiplas pastas no VS Code, o Claude Code tem acesso a todas. Util para monorepos ou projetos com frontend + backend separados.
Integrar com extensoes existentes
O Claude Code funciona junto com suas outras extensoes. Ele respeita as configuracoes do ESLint, Prettier, TypeScript e outros. Se o Prettier formata ao salvar, os arquivos que o Claude cria tambem sao formatados automaticamente.
9. Terminal vs extensao: quando usar cada um
| Cenario | Melhor opcao | Por que |
|---|---|---|
| Edicao rapida de codigo | Extensao | Ctrl+I inline e mais rapido |
| Tarefas complexas multi-arquivo | Terminal ou extensao | Ambos funcionam igualmente |
| Analise de dados/CSV | Terminal | Output extenso fica melhor no terminal |
| Debug visual | Extensao | Diffs inline sao mais claros |
| Automacao com /loop | Terminal | Loop roda melhor em terminal dedicado |
| Code review | Extensao | Diffs visuais facilitam revisao |
| Gerar projeto do zero | Terminal | Mais controle sobre criacao de estrutura |
| Refatoracao pontual | Extensao | Selecionar + Ctrl+I e o workflow ideal |
A resposta pragmatica: use ambos. A extensao para edicoes rapidas e contextuais dentro do editor. O terminal para tarefas longas, automacao e analise. Voce pode ter os dois rodando simultaneamente sem conflito.
Uso combinado na pratica: use a extensao para desenvolvimento diario (edicoes, testes, debug). Use o terminal para tarefas de infraestrutura (deploy, migracao, automacao com /loop). As skills funcionam em ambos, entao voce nao precisa duplicar configuracao.
Proximo passo: instale skills e veja a diferenca
Voce ja sabe o basico. Agora imagine o Claude Code sabendo fazer tudo isso sozinho — SEO, copywriting, code review, deploy, analise de dados. E isso que as skills fazem. Acesso vitalicio, atualizacoes incluidas.
Ver o Mega Bundle — R$19Perguntas frequentes
A funcionalidade principal e identica -- o mesmo Claude Code roda em ambos. A diferenca e a interface. No terminal, voce tem uma experiencia puramente de linha de comando. Na extensao do VS Code, voce tem integracao visual: o Claude aparece em um painel lateral, pode referenciar arquivos abertos, e as edicoes sao aplicadas diretamente nos arquivos do editor com diff visual. O terminal e mais rapido para quem prefere CLI; a extensao e mais visual e integrada ao workflow do editor.
Nao. A extensao do VS Code e gratuita. Voce usa o mesmo plano do Claude Code (Max ou a API da Anthropic). Se voce ja tem acesso ao Claude Code no terminal, pode usar a extensao sem custo adicional. O consumo de tokens e o mesmo, independente de usar terminal ou extensao.
Sim. Skills (arquivos em .claude/commands/) funcionam tanto no terminal quanto na extensao do VS Code. Voce configura as skills uma vez e elas ficam disponiveis em ambos os ambientes. Na extensao, voce pode invocar skills diretamente do painel de chat usando /nome-da-skill. O pacote de skills dev do minhaskills.io funciona em ambos os ambientes sem nenhuma configuracao adicional.