Claude Code no VS Code: como instalar e usar a ferramenta dentro do editor

Se você abre o VS Code de manhã e só fecha quando desliga o PC, essa é pra você 😀

A boa notícia é que dá pra colocar o Claude Code pra trabalhar sem sair do editor, usando a extensão oficial da Anthropic. Nada de ficar pulando entre janela do terminal e o código: ele vive dentro do VS Code, lê seus arquivos, propõe mudanças e mostra os diffs ali na sua frente. Neste post a gente vai do zero: o que você precisa antes, como instalar, como fazer o login, como abrir o painel gráfico e como rodar o CLI no terminal integrado. Bora ver na prática?

O que você precisa antes de começar

Pré-inscrição Formação Claude Code

Domine o Claude Code do básico ao avançado

Você vai aprender a criar sistemas completos com Claude Code, sem precisar ser programador. Inscreva-se para ter acesso a um desconto de lançamento e bônus especiais!

Quero minha vaga

Antes de sair instalando, se liga no que é pré-requisito de verdade:

• VS Code instalado na sua máquina (óbvio, mas tem que dizer)
• Conta Anthropic com assinatura paga: Pro, Max, Team ou Enterprise. Também rola com uma conta Claude Console
• Não precisa de API key: o login é direto pela sua conta, sem colar chave em lugar nenhum

E o Node.js? Aqui mora uma confusão comum. A extensão empacota a própria cópia do CLI dentro dela, então você não precisa instalar Node só pra usar a extensão no editor. O Node.js 22+ só entra na jogada se você quiser instalar o CLI standalone via npm, o que é outra história.

Então pra usar dentro do VS Code, a conta paga é o que importa. O resto a extensão resolve sozinha =)

Como instalar o Claude Code no VS Code

A instalação é next, next e finish, mas vou detalhar cada passo pra não ter erro:

1. Abra a Extensions view do VS Code. O atalho é Ctrl+Shift+X no Windows e Linux, ou Cmd+Shift+X no Mac
2. Busque por Claude Code na barra de pesquisa das extensões
3. Clique em Install na extensão publicada pela Anthropic, que é o publisher verificado. Se preferir ir direto, dá pra abrir pelo link vscode:extension/anthropic.claude-code

Pra você ter noção de que é o caminho certo, essa extensão já passou de 2 milhões de instalações no Visual Studio Marketplace. É a forma recomendada de usar a ferramenta no editor, no lugar do CLI puro, pra quem vive no VS Code no dia a dia.

4. No primeiro uso, a extensão abre o navegador pra você autenticar sua conta Anthropic. Faz o login lá e volta pro editor
5. Depois de autenticar, o ícone Spark aparece na barra do editor. É o sinal de que tá tudo certo

O erro comum deste passo: confundir extensão gratuita com plano gratuito. A extensão em si não custa nada, beleza, mas ela exige uma conta Anthropic com assinatura paga (ou Claude Console) por trás. Instalou e travou na hora de usar? Provavelmente é isso.

Como abrir e usar o painel do Claude no editor

Por padrão a extensão abre um painel gráfico de chat, e você tem quatro caminhos pra chamar ele. Escolhe o que for mais confortável no seu fluxo:

1. Editor Toolbar: a barrinha no topo do editor
2. Activity Bar: a coluna de ícones na lateral
3. Command Palette: aquele menu de comandos que todo mundo já usa
4. Status Bar: a barra lá embaixo

Agora, se você é do time que prefere a linha de comando, dá pra rodar o CLI dentro do próprio VS Code sem instalar nada à parte:

5. Abra o terminal integrado com Ctrl+ no Windows e Linux, ou Cmd+“ no Mac
6. Rode o comando:

claude

O erro comum deste passo: procurar o painel (ou rodar o claude) sem ter feito o login no navegador. Se você pulou a autenticação lá do passo anterior, o ícone Spark não vai estar ativo e nada vai responder direito. Voltou o login? Voltou o painel.

O que muda no seu fluxo dentro do VS Code

Aqui é onde a integração brilha de verdade. Não é só um chat colado no editor: a extensão agrega um monte de coisa que facilita a vida de quem já vive no VS Code.

O que você ganha no dia a dia:

• Diffs inline: as mudanças aparecem no próprio arquivo, você vê o antes e o depois sem abrir outra tela
• @-mention de arquivos: menciona um arquivo com @ e, quando você tem uma seleção, ele já pega o intervalo de linhas daquela seleção. Ou seja, aponta o contexto exato
• Revisar e editar planos antes de aceitar: o Claude propõe o plano, você lê, ajusta e só então libera
• Auto-aceitar edições: quando você confia no que tá rolando, deixa ele aplicar direto
• Histórico de conversas e múltiplas conversas em abas ou janelas: dá pra tocar mais de uma frente ao mesmo tempo

Um atalho que vale decorar: Shift+Tab cicla os modos de permissão. Entre eles estão o acceptEdits, que auto-aprova as edições de arquivo, e o plan, em que o Claude propõe as mudanças sem tocar no código. Esse controle de o quanto você deixa ele fazer sozinho é o coração do fluxo seguro.

E quando você tá com várias conversas abertas em abas, um ponto colorido no ícone spark te avisa o status:

• Ponto azul: tem um pedido de permissão pendente esperando você
• Ponto laranja: o Claude terminou o trabalho enquanto aquela aba estava oculta

Se você quiser fechar o ciclo com o versionamento, vale combinar isso com usar o Claude Code junto do Git pra gerar commits e PRs sem sair do ritmo.

Painel gráfico ou interface estilo CLI: como escolher

A extensão abre o painel gráfico por padrão, mas nem todo mundo curte. Se você é raiz de terminal, dá pra trocar pela interface no estilo CLI:

1. Vá em Settings > Extensions > Claude Code
2. Marque a opção ‘Use Terminal’

Pronto, o painel gráfico dá lugar à interface estilo linha de comando, tudo dentro do VS Code.

Quando cada um faz sentido? O painel gráfico é mais visual: diffs bonitinhos, abas, ponto colorido de status. Bom pra quem gosta de ver tudo desenhado. A interface estilo CLI agrada quem já tem o muscle memory do terminal e quer aquela pegada mais direta. Testa os dois e fica com o que te deixa mais rápido.

O erro comum deste passo: achar que precisa instalar o CLI à parte pra ter o modo terminal. Não precisa! A extensão já empacota a própria cópia do CLI, então o ‘Use Terminal’ funciona sem você baixar nada extra. O Node.js standalone só entra se você for usar o CLI fora do VS Code.

Se você curtir organizar comandos e automações, o próximo passo natural é olhar as Skills e slash commands do Claude Code pra montar seus atalhos.

Conclusão

No fim das contas, colocar o Claude Code vscode pra rodar é simples: instala a extensão oficial da Anthropic pela aba de extensões e faz o login no navegador. O ícone Spark aparecendo é o sinal verde.

Daí em diante, o pulo do gato é praticar. Abre um projeto real, menciona os arquivos com @ pra dar contexto certo, e brinca com o modo plan (via Shift+Tab) pra ler o que o Claude quer fazer antes de deixar ele auto-aceitar as edições.

Começa no controle e vai soltando a mão conforme ganha confiança. É assim que a integração vira daily driver de verdade =)

até o próximo post!