Claude Code no VS Code: guia de instalação da extensão e do painel
Instale a extensão oficial do Claude Code no Visual Studio Code, faça login, escolha modos de permissão, planeje e revise diffs no painel, e rode a mesma CLI no terminal integrado — cada passo verificado contra a documentação oficial.
A versão curta
- Instale "Claude Code", da Anthropic, pela visualização de Extensões (Cmd+Shift+X) — o id da extensão é anthropic.claude-code. É preciso VS Code 1.94.0 ou superior, e a extensão também está publicada no Cursor e no Open VSX.
- O painel traz sua própria cópia da CLI: ele não põe o claude no seu PATH. Para usar a CLI de verdade no terminal integrado do VS Code, faça também a instalação standalone — os dois compartilham o histórico de conversa.
- Os modos de permissão ficam na base da caixa de prompt: Plan para planejamento somente leitura, Manual para aprovação a cada edição, Auto para autonomia revisada por um classificador. Alterne com Shift+Tab.
- Menções com @ puxam arquivos para o contexto (Option+K insere uma referência de faixa de linhas), os diffs aparecem lado a lado com botões Accept/Reject por alteração, e /usage, /model e /mcp funcionam direto no painel.
Claude Code Full Course — Autonomous Goals, MCP, and VS Code Setup
Canal: freeCodeCamp.org1:21:37
VS Code — official documentation
Fonte oficial: code.claude.com/docs
Claude Code for VS Code — marketplace listing
Fonte oficial: marketplace.visualstudio.com
Os passos foram verificados contra a documentação oficial do VS Code; o curso completo do freeCodeCamp acima é a fonte visual das capturas.
As capturas de tela pertencem aos seus criadores, com links diretos para os timestamps exatos. Nenhum quadro com rosto é usado.
Configurar o Claude Code no VS Code, passo a passo
Parte 1 — Instalar e conectar
- 1
Instale a extensão pelo marketplace
Abra a visualização de Extensões (Cmd+Shift+X no Mac, Ctrl+Shift+X no Windows/Linux), busque "Claude Code" e instale a publicada pela Anthropic (id: anthropic.claude-code). Você precisa de VS Code 1.94.0 ou mais recente e de um plano Claude pago ou uma conta Console. Se não aparecer, rode "Developer: Reload Window".
- 2
Ache o ícone de faísca
Depois de instalar, um ícone de faísca do Claude Code aparece na barra de ferramentas das abas do editor (com um arquivo aberto) e na Barra de Atividades. Clique para abrir o painel — ou abra a Paleta de Comandos (Cmd+Shift+P), digite "Claude Code" e escolha "Open in New Tab". A entrada "✻ Claude Code" na barra de status funciona mesmo sem arquivo aberto.
O ícone de faísca do Claude Code vive na barra de ferramentas das abas — um clique abre o painel ao lado do seu arquivo.Ver em 43:00 - 3
Login: plano, Console ou chave de API
Rode /login dentro do painel e escolha seu caminho: uma assinatura Claude (Pro, Max, Team, Enterprise), uma conta Console ou uma chave de API. O navegador abre uma vez para autorizar, e o painel já te recebe com seu modelo e plano — nenhuma conta separada para a extensão.
- 4
Conheça o painel
A sessão do Claude Code renderiza dentro do próprio VS Code — como painel, na barra lateral ou no terminal integrado, você escolhe (setting preferredLocation). O banner de boas-vindas mostra o modelo ativo, seu plano e o que precisa de atenção, como servidores MCP aguardando autenticação.
Primeiro contato: o banner de boas-vindas do Claude Code no painel do terminal, com o plan mode alternando no Shift+Tab e um lembrete de autenticação do /mcp.Ver em 17:00
Parte 2 — Trabalhar no painel
- 5
Escolha seu modo de permissão
O indicador de modo fica na base da caixa de prompt. Plan mantém o Claude somente leitura até você aprovar um plano; Manual pergunta antes de edições de arquivos e da maioria dos comandos de shell; Auto deixa um classificador de segurança revisar as ações em segundo plano. Alterne com Shift+Tab e defina o padrão no setting initialPermissionMode.
- 6
Planeje primeiro, responda perguntas inline
Para mudanças maiores, comece no modo Plan: o Claude pesquisa e apresenta um plano que você comenta como um documento markdown. Nesta gravação ele vai além — faz uma pergunta de múltipla escolha sobre a stack técnica e pré-visualiza a árvore de arquivos que pretende criar antes de escrever uma linha.
Plan mode em ação: uma pergunta interativa com opções selecionáveis e uma prévia dos arquivos que o Claude quer criar.Ver em 19:00 - 7
Aponte o Claude para os arquivos certos
Digite @ para mencionar arquivos com busca fuzzy, ou pressione Option+K (Alt+K) para inserir uma referência como @app.ts#5-10 para linhas específicas. Tudo que você seleciona no editor fica automaticamente visível para o Claude, e o attachOpenFile anexa seu arquivo aberto aos prompts por padrão.
- 8
Revise diffs, aceite por alteração
No modo Manual, cada edição abre um diff lado a lado com botões "Accept this change" e "Reject this change" em cada bloco — dá para manter um hunk e rejeitar o vizinho. "Claude Code: Accept Change at Cursor" e seu irmão Reject estão na Paleta de Comandos.
- 9
Assista o raciocínio
Ative o extended thinking pelo menu do / e o raciocínio do Claude aparece como blocos recolhidos acima da resposta. Pressione Ctrl+O para expandir todos quando quiser auditar como uma decisão foi tomada — útil em sessões de revisão de código.
Parte 3 — Ajustar
- 10
Troque de modelo no meio da sessão
Clique no nome do modelo no painel ou rode /model para trocar — Opus Plan para arquitetura, Sonnet para velocidade do dia a dia, Haiku para edições rápidas. O nível de Effort e o toggle Ultracode ficam no mesmo seletor, em linha com o comportamento do terminal.
- 11
Mantenha as configurações do projeto no .claude/settings.json
Tudo do guia de configurações vale aqui: o painel lê ~/.claude/settings.json mais o .claude/settings.json do projeto, onde moram chaves de time inteiro como enabledPlugins. Os extras específicos do VS Code (initialPermissionMode, preferredLocation, autosave) vêm junto no mesmo schema.
Configurações de projeto no VS Code: .claude/settings.json com a chave enabledPlugins ativando um plugin oficial para o time todo.Ver em 42:25
Painel da extensão vs terminal integrado vs terminal externo
O Claude Code chega até você por três superfícies do VS Code. Elas compartilham histórico e login — mas não são a mesma ferramenta:
- 1O painel gráfico — diffs clicáveis, accept/reject por alteração, dropdowns de modelo e modo. Melhor para revisar edições e manter o fluxo do mouse.
- 2A CLI do terminal integrado — o conjunto completo de comandos: atalho ! bash, Tab completion, todos os slash commands e skills. Melhor para quem digita mais rápido do que clica.
- 3Um terminal externo mais /ide — rode o claude fora do VS Code e ele se conecta sozinho ao editor para diffs e diagnósticos; num terminal que não conecta, digite /ide dentro do Claude Code para anexar.
- 4A extensão embute a própria CLI, então instalá-la NÃO põe o claude no seu PATH — faça a instalação standalone se quiser também a experiência no terminal.
- 5O histórico de conversa é compartilhado entre todas: claude --resume de qualquer superfície continua uma conversa do painel, e o /ide conecta o contexto das sessões.
Regra de bolso: revise no painel, pilote pelo terminal. A maioria acaba usando os dois na mesma sessão — é para isso que eles foram desenhados.
A extensão não funciona? Primeiros socorros
Cinco correções cobrem a maioria dos problemas da extensão do Claude Code no VS Code:
- 1A extensão não aparece na busca. Confira a versão do VS Code (1.94.0+) e rode "Developer: Reload Window". A extensão também está no Open VSX e no registro do Cursor caso o marketplace da Microsoft não esteja disponível no seu build.
- 2claude não encontrado no terminal integrado. A extensão embute a própria CLI sem tocar no PATH — rode o script de instalação standalone, ou siga usando o painel.
- 3Banner "2 MCP servers need authentication". Rode /mcp no painel e aprove cada servidor pendente — servidores de .mcp.json de projeto exigem OAuth explícito por conta.
- 4Diffs não aparecem. Depende do modo: o modo Plan não produz edições para diffar, e modos tipo bypass podem pular o prompt. Troque para Manual (Shift+Tab) para revisar por alteração.
- 5A extensão se reinstala após desinstalar. A CLI instala a extensão de IDE automaticamente ao iniciar — desative "Auto-install IDE extension" no /config ou defina a variável de ambiente CLAUDE_CODE_IDE_SKIP_AUTO_INSTALL.
Ainda travado? Rode claude doctor num terminal e /status no painel — entre os dois, eles nomeiam a peça quebrada numa tela só.