Como Usar Claude Code no VS Code — Guia Completo de Instalacao

Voce usa o Claude Code no terminal e adora a produtividade. Mas toda vez que precisa alternar entre o editor e a linha de comando, perde segundos preciosos — e perde o fluxo. Agora imagine o Claude Code rodando dentro do VS Code, ao lado do seu codigo, com acesso direto aos arquivos abertos, ao painel de erros e ao historico do git. Sem alt-tab. Sem copiar e colar.

A extensao oficial do Claude Code para Visual Studio Code faz exatamente isso. E neste guia completo, voce vai aprender tudo: desde a instalacao ate tecnicas avancadas que poucos desenvolvedores conhecem. Vamos cobrir cada detalhe para que voce saia daqui usando o Claude Code no VS Code como um profissional.

Se voce esta buscando como usar Claude Code no VS Code da forma mais eficiente possivel, este e o tutorial definitivo. Vamos comecar.

1. O que e a extensao Claude Code para VS Code

A Anthropic lancou a extensao oficial do Claude Code para VS Code, trazendo o agente de IA completo para dentro do editor. Nao estamos falando de um autocomplete simples como o Copilot — e o Claude Code inteiro, com todas as suas capacidades de leitura, escrita, execucao de comandos e raciocinio, integrado nativamente ao Visual Studio Code.

Para entender o que a extensao oferece, veja a comparacao com outras ferramentas de IA no VS Code:

Recurso	Claude Code VS Code	GitHub Copilot	Cursor
Autocomplete inline	Sim (via inline chat)	Sim	Sim
Chat lateral	Sim	Sim	Sim
Execucao de comandos no terminal	Sim (autonomo)	Limitado	Sim
Edicao multi-arquivo autonoma	Sim	Nao	Sim
Leitura do projeto inteiro	Sim (ate 1M tokens)	Limitado	Sim
Skills/comandos customizados	Sim (.claude/commands/)	Nao	Rules
Git integration	Sim (commit, PR, review)	Limitado	Sim
Aprovacao de acoes com diff	Sim (aceitar/rejeitar)	Nao	Sim
Contexto de 1M tokens	Sim	Nao	Nao

A extensao Claude Code se destaca especialmente em tres areas: autonomia (executa tarefas complexas sozinho), contexto (le o projeto inteiro com 1M tokens de janela) e customizacao (skills personalizadas para qualquer dominio).

O que a extensao oferece na pratica

• 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 automaticamente
• Edicao direta com diff — mudancas sao aplicadas nos arquivos com diff visual que voce aprova ou rejeita
• Terminal integrado — executa comandos no terminal do VS Code (npm, git, testes)
• Contexto do editor — referencia o arquivo ativo, selecao de texto, erros do painel Problems
• Skills e slash commands — todas as skills da pasta .claude/commands/ funcionam normalmente
• Inline suggestions — selecione codigo e peca edicoes contextuais

2. Como instalar Claude Code no VS Code

A instalacao do Claude Code no VS Code e simples, mas tem alguns pre-requisitos que voce precisa atender antes. Vamos ao passo a passo completo.

Pre-requisitos obrigatorios

Requisito	Versao minima	Como verificar
VS Code	1.96+	code --version
Node.js	18+	node --version
Claude Code CLI	Ultima versao	claude --version
Conta Anthropic	Plano Max ou API key	console.anthropic.com

Passo 1: instalar o Claude Code CLI (se ainda nao tem)

Se voce ainda nao tem o Claude Code instalado globalmente, comece por aqui:

Passo 2: instalar a extensao no VS Code

Existem tres formas de instalar a extensao. Escolha a que preferir:

Passo 3: autenticar

Apos instalar, o VS Code mostra o icone do Claude Code na barra lateral esquerda. Ao clicar, a extensao pede autenticacao:

• Plano Max: clique em "Sign in with Anthropic" — abre o navegador para login com sua conta. Apos autenticar, volta automaticamente para o VS Code.
• API Key: clique em "Use API Key" — insira sua chave diretamente. Ideal para quem usa a API pay-as-you-go.
• Autenticacao existente: se voce ja autenticou o Claude Code no terminal (claude), a extensao pode reutilizar a sessao automaticamente.

Passo 4: verificar se esta funcionando

Se o Claude respondeu com informacoes corretas do seu projeto, a instalacao esta completa. Se houver erros, as causas mais comuns sao: Node.js desatualizado, CLI nao instalado, ou API key invalida.

Solucao de problemas comuns na instalacao

Problema	Causa	Solucao
"Claude Code not found"	CLI nao instalado	npm install -g @anthropic-ai/claude-code
"Authentication failed"	Token expirado	Rode claude no terminal para reautenticar
Extensao nao aparece	VS Code desatualizado	Atualize para v1.96+
"Node.js not found"	Node nao esta no PATH	Reinstale Node.js ou adicione ao PATH
Painel trava ao abrir	Conflito com outra extensao	Desabilite extensoes de IA concorrentes e reinicie

3. Configuracao inicial: API key, modelo e permissoes

Com a extensao instalada e autenticada, e hora de configurar para o seu workflow. A extensao tem configuracoes acessiveis em Settings > Extensions > Claude Code ou diretamente no settings.json.

Configuracoes principais

Configuracao	O que faz	Valor padrao	Recomendacao
claude-code.model	Modelo a ser usado	Automatico (melhor disponivel)	Deixe no padrao
claude-code.autoApprove	Aprovar acoes automaticamente	off	Comece desligado, ligue apos se acostumar
claude-code.showDiffBeforeApply	Mostrar diff antes de aplicar	true	Mantenha ligado
claude-code.terminalProfile	Qual terminal usar	Default	Use o padrao do sistema
claude-code.maxFileSize	Tamanho maximo de arquivo	10MB	Aumente para 20MB se trabalha com CSVs
claude-code.contextWindow	Janela de contexto	Maximo disponivel	Deixe no maximo

Configuracao recomendada no settings.json

// .vscode/settings.json (por projeto)
{
  "claude-code.autoApprove": false,
  "claude-code.showDiffBeforeApply": true,
  "claude-code.terminalProfile": "default",
  "claude-code.maxFileSize": "20MB"
}

// Configuracao global (User Settings)
// Ctrl+Shift+P > "Preferences: Open User Settings (JSON)"
{
  "claude-code.model": "auto",
  "claude-code.showDiffBeforeApply": true
}

Niveis de permissao

O Claude Code no VS Code opera com tres niveis de permissao, assim como no terminal:

• Leitura: le arquivos, analisa codigo, busca no projeto. Sempre permitido.
• Escrita: cria e edita arquivos. Mostra diff para aprovacao (a menos que autoApprove esteja ligado).
• Execucao: roda comandos no terminal (npm, git, scripts). Pede aprovacao por padrao.

Voce pode controlar essas permissoes no CLAUDE.md do projeto e nas configuracoes da extensao. A recomendacao para iniciantes e manter tudo com aprovacao manual ate se sentir confortavel com o comportamento do Claude.

CLAUDE.md funciona identicamente

O arquivo CLAUDE.md na raiz do projeto funciona da mesma forma na extensao. Instrucoes, convencoes, restricoes e comandos personalizados sao respeitados. Se voce ja tem um CLAUDE.md configurado para o terminal, nao precisa mudar absolutamente nada.

# CLAUDE.md (funciona igual no terminal e na extensao)

## Regras do projeto
- Use TypeScript strict mode
- Testes com Vitest
- Commits em portugues
- Nunca modifique arquivos em /config/

## Comandos disponiveis
- /review — faz code review do branch atual
- /test — cria testes para o arquivo ativo
- /deploy — roda o pipeline de deploy

4. Interface: painel lateral, terminal integrado e inline suggestions

A extensao adiciona varios elementos ao VS Code. Vamos detalhar cada um para que voce aproveite ao maximo.

Painel lateral (Chat Panel)

O painel principal onde voce conversa com o Claude Code. Acesse com Ctrl+L (ou Cmd+L no Mac). Funciona como o terminal, mas com interface visual completa:

• Campo de texto para digitar mensagens
• Respostas formatadas com syntax highlighting
• Acoes (criar/editar arquivos, rodar comandos) aparecem com botoes "Accept" / "Reject"
• Historico de conversa com scroll
• Referencia automatica ao arquivo que esta aberto no editor
• Indicador de tokens consumidos na sessao

Terminal integrado

Voce tambem pode usar o Claude Code pela CLI dentro do terminal integrado do VS Code. Abra o terminal (Ctrl+`) e digite claude. E exatamente o mesmo que rodar no terminal externo, mas sem sair do editor.

A diferenca entre usar o terminal integrado e o painel lateral: no terminal voce tem a experiencia CLI pura. No painel lateral voce tem diffs visuais, botoes de aprovacao e referencia automatica ao arquivo ativo. Use o que funcionar melhor para cada tarefa.

Inline suggestions (Chat Inline)

A funcionalidade mais poderosa para edicoes rapidas. Selecione um trecho de codigo no editor, pressione Ctrl+I e um campo de chat aparece diretamente no editor, ao lado do codigo selecionado.

Exemplos de uso do inline chat:

• "Adicione tratamento de erro nesta funcao"
• "Converta para async/await"
• "Adicione tipagem TypeScript"
• "Refatore usando o pattern Strategy"
• "Explique o que este codigo faz"
• "Escreva um teste unitario para esta funcao"

O Claude aplica as mudancas como diffs inline — verde para adicoes, vermelho para remocoes. Voce aceita ou rejeita cada mudanca individualmente.

Status bar

Na barra inferior do VS Code, um indicador mostra o status do Claude Code em tempo real: conectado (verde), processando (amarelo/animacao), ou desconectado (vermelho). Clique para ver detalhes como tokens consumidos, modelo ativo e tempo da sessao.

Painel Problems + Claude Code

Uma das integracoes mais uteis: o Claude Code pode acessar o painel Problems do VS Code (Ctrl+Shift+M). Isso significa que erros de TypeScript, ESLint, e outras extensoes ficam disponiveis como contexto. Voce pode pedir:

5. Atalhos de teclado essenciais

Dominar os atalhos e o que separa quem usa o Claude Code no VS Code com eficiencia de quem perde tempo navegando menus. Aqui estao todos os atalhos que voce precisa memorizar:

Atalhos principais

Atalho (Windows/Linux)	Atalho (Mac)	Acao
Ctrl+L	Cmd+L	Abrir/focar o painel de chat lateral
Ctrl+I	Cmd+I	Chat inline (sobre codigo selecionado)
Ctrl+Shift+I	Cmd+Shift+I	Enviar selecao de texto para o chat
Ctrl+Shift+P > "Claude"	Cmd+Shift+P > "Claude"	Ver todos os comandos da extensao
Escape	Escape	Cancelar a operacao atual do Claude
Ctrl+Enter	Cmd+Enter	Enviar mensagem no chat (quando multiline)
Ctrl+Shift+M	Cmd+Shift+M	Abrir painel Problems (usar com Claude)

Atalhos de navegacao uteis com Claude Code

Atalho	Acao	Por que e util com Claude
Ctrl+`	Abrir terminal integrado	Usar Claude Code CLI dentro do VS Code
Ctrl+Shift+X	Abrir painel de extensoes	Verificar versao da extensao Claude Code
Ctrl+K Ctrl+S	Abrir Keyboard Shortcuts	Personalizar atalhos do Claude Code
Ctrl+,	Abrir Settings	Ajustar configuracoes da extensao
Ctrl+Shift+G	Abrir Source Control	Ver mudancas do git apos Claude editar

Personalizar atalhos

Se os atalhos padrao conflitam com suas extensoes, personalize em Keyboard Shortcuts (Ctrl+K Ctrl+S). Busque "claude" para ver e editar todos os atalhos da extensao. Voce pode trocar Ctrl+L por qualquer combinacao que preferir.

6. Como usar skills dentro do VS Code

Skills sao a funcionalidade mais poderosa do Claude Code — e funcionam identicamente no VS Code. Uma skill e um arquivo de instrucoes em .claude/commands/ que transforma o Claude em um especialista em qualquer dominio: SEO, copywriting, code review, deploy, analise de dados e muito mais.

Como skills funcionam no VS Code

Na extensao do VS Code, voce invoca skills pelo painel de chat usando /nome-da-skill. A skill carrega as instrucoes e o Claude passa a seguir aquele comportamento especializado.

Estrutura de uma skill

# .claude/commands/review.md

Voce e um code reviewer senior. Analise o diff do branch atual e:

1. Identifique bugs, vulnerabilidades e code smells
2. Verifique tipagem TypeScript
3. Valide tratamento de erros
4. Sugira melhorias de performance
5. Verifique se ha testes para as mudancas

Formato de saida:
- CRITICO: bugs que precisam ser corrigidos
- AVISO: melhorias recomendadas
- NOTA: sugestoes opcionais

Use git diff main...HEAD para ver as mudancas.

Onde as skills ficam

Local	Escopo	Caminho
Projeto	So para esse repo	.claude/commands/
Usuario	Todos os projetos	~/.claude/commands/

748+ skills prontas para instalar

Criar skills do zero funciona, mas leva tempo. O pacote de 748+ skills profissionais do minhaskills.io oferece skills prontas para 7 categorias: Marketing Digital, SEO & GEO, Copywriting, Desenvolvimento, Social Media, Monetizacao, e Workflows & Automacao. Voce instala em 2 minutos copiando as pastas para .claude/commands/ e todas ficam disponiveis tanto no terminal quanto no VS Code.

Verificando skills disponiveis

No painel de chat do VS Code, digite / e a extensao mostra a lista de todas as skills disponiveis com autocomplete. Voce pode navegar pela lista e selecionar a skill que precisa.

7. Dicas avancadas: multi-arquivo, git e debugging

Com o basico dominado, vamos as tecnicas avancadas que transformam voce de usuario casual em power user do Claude Code no VS Code.

Dica 1: mencionar arquivos com @

No painel de chat, use @ seguido do nome do arquivo para incluir como contexto explicito:

Dica 2: refatoracao multi-arquivo

O Claude Code no VS Code faz refatoracoes globais que o "Find & Replace" nao consegue — porque ele entende semantica, nao apenas texto:

O Claude encontra todos os arquivos afetados, mostra diffs para cada um, e voce aprova em lote. Refatoracao global segura em segundos.

Dica 3: git integration completa

O Claude Code no VS Code tem acesso total ao git. Use para automatizar tarefas de versionamento:

• Commit inteligente: "analise as mudancas e crie um commit com mensagem descritiva"
• Code review: "faca review do diff entre main e este branch"
• Resolucao de conflitos: "resolva os conflitos de merge mantendo a logica do branch atual"
• Criar PR: "crie um pull request com titulo e descricao baseados nos commits"
• Cherry-pick seletivo: "aplique apenas as mudancas do commit X que afetam o modulo de auth"

Apos o Claude fazer mudancas via git, o painel Source Control do VS Code (Ctrl+Shift+G) atualiza automaticamente, mostrando todos os arquivos modificados.

Dica 4: debugging assistido

Combine o debugger do VS Code com o Claude Code para uma experiencia de debugging poderosa:

1. Coloque um breakpoint no codigo suspeito
2. Rode o debugger (F5)
3. Quando parar no breakpoint, abra o painel do Claude (Ctrl+L)
4. Peca: "estou parado neste breakpoint, as variaveis sao [copie do painel Variables]. O que esta causando o bug?"
5. O Claude analisa o contexto e sugere a correcao

Dica 5: multi-root workspaces

Se voce usa workspaces com multiplas pastas (monorepos, frontend + backend), o Claude Code tem acesso a todas as pastas do workspace. Voce pode pedir tarefas que cruzam boundaries:

• "Atualize a interface no backend e o componente correspondente no frontend"
• "O endpoint /api/users retorna UserResponse. Garanta que o tipo no frontend (packages/web) reflete a mesma estrutura"

Dica 6: usar com extensoes existentes

O Claude Code respeita suas extensoes. Arquivos criados ou editados pelo Claude sao formatados automaticamente se voce tem Prettier ou ESLint configurados para formatar ao salvar. TypeScript errors aparecem no painel Problems apos as edicoes. Tudo integrado.

Dica 7: historico e continuidade

O painel de chat mantem o historico da conversa. Se voce fechar o VS Code e reabrir, pode continuar de onde parou usando /resume no chat. O Claude recupera o contexto da sessao anterior.

8. Claude Code VS Code vs terminal — quando usar cada um

Com duas formas de usar o Claude Code, a pergunta e: quando usar cada uma? Aqui esta um guia pratico baseado em cenarios reais.

Cenario	Melhor opcao	Por que
Edicao rapida de codigo	VS Code (Ctrl+I)	Inline chat e o workflow mais rapido para edicoes pontuais
Refatoracao multi-arquivo	Ambos	VS Code mostra diffs visuais, terminal mostra output completo
Analise de dados/CSV	Terminal	Output extenso fica melhor no terminal sem limites visuais
Debug visual	VS Code	Diffs inline + painel Problems + debugger integrado
Automacao com /loop	Terminal	Loop de longa duracao roda melhor em terminal dedicado
Code review	VS Code	Diffs visuais lado a lado facilitam revisao
Gerar projeto do zero	Terminal	Mais controle sobre criacao de estrutura de diretorios
Escrever testes	VS Code	Arquivo ativo como contexto + inline suggestions
Deploy e CI/CD	Terminal	Comandos longos e logs extensos
Documentacao	VS Code	Editar README/docs lado a lado com codigo
Git operations	Ambos	VS Code para visual, terminal para batch operations
Skills especializadas	Ambos	Skills funcionam identicamente em ambos

A resposta pragmatica

Use ambos. A extensao para desenvolvimento diario — edicoes, testes, debug, code review. O terminal para tarefas longas — automacao, deploy, analise de dados, /loop. Voce pode ter os dois rodando simultaneamente sem conflito. As skills, configuracoes e autenticacao sao compartilhadas.

Performance: extensao vs terminal

Metrica	VS Code Extension	Terminal CLI
Velocidade de resposta	Identica	Identica
Consumo de tokens	Identico	Identico
Uso de RAM	~100-200MB a mais (VS Code overhead)	Mais leve
Janela de contexto	Ate 1M tokens	Ate 1M tokens
Latencia de edicao	Diff visual adiciona ~1s	Aplicacao direta

Nao existe diferenca funcional entre usar Claude Code no VS Code ou no terminal. O processamento acontece nos mesmos servidores da Anthropic. A unica diferenca e a camada de apresentacao — diffs visuais, botoes de aprovacao e integracao com o editor.