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
Quer dominar isso mais rapido?
Tudo que voce esta aprendendo aqui fica 10x mais poderoso com skills prontas. Em vez de digitar comandos manualmente, as skills fazem o trabalho pesado por voce. 748+ skills profissionais, instala em 2 minutos.
Quero as Skills — R$197. Workflows de produtividade
Workflow 1: editar codigo com contexto
- Abra o arquivo que quer editar
- Selecione o trecho de codigo relevante
- Pressione
Ctrl+I(chat inline) - Descreva a mudanca: "adicione tratamento de erro", "converta para async/await", "adicione tipagem TypeScript"
- O Claude mostra o diff inline -- aceite ou rejeite
Esse workflow e mais rapido que copiar codigo para o chat e colar de volta. O Claude ve exatamente qual trecho voce selecionou e aplica a mudanca no lugar certo.
Workflow 2: gerar testes a partir do editor
- Abra o componente/funcao que quer testar
- No painel de chat (
Ctrl+L), digite: "crie testes para o arquivo ativo" - O Claude analisa o arquivo aberto e gera testes
- Os testes aparecem como novo arquivo -- aceite para criar
- O Claude pode rodar
npm testautomaticamente para verificar
Workflow 3: debug com erros do editor
- O VS Code mostra um erro vermelho em alguma linha (TypeScript error, lint error)
- Selecione a linha com erro
Ctrl+I: "corrija este erro"- O Claude le o erro do diagnostico do VS Code e aplica a correcao
Workflow 4: refatoracao em multiplos arquivos
Atualize todos os imports e referencias.
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.