Como usar o Claude Code no VS Code (passo a passo do zero)

Esse tutorial é a continuação do post de instalação. Aqui você vai aprender a usar o Claude Code dentro do VS Code (aquele editor de código preto da Microsoft).

Eu explico cada coisinha. Mesmo se você nunca abriu o VS Code, vai sair daqui sabendo usar o Claude direito.

Antes de começar

Você precisa de duas coisas:

VS Code instalado — se ainda não tem, baixa em code.visualstudio.com e instala (clica next, next, next).
Claude Code instalado e logado — fiz este tutorial explicando do zero.

Se já tem os dois, bora.

O que é "VS Code" e por que usar

VS Code (nome completo "Visual Studio Code") é um editor de texto pra código. Tipo o Word, mas pra programadores.

Por que usar Claude dentro do VS Code em vez de só no terminal?

Você vê os arquivos do projeto na lateral, organizados em pastinhas.
Você clica nas mudanças que o Claude propõe e aceita ou rejeita visualmente.
O atalho de teclado abre o Claude num painelzinho do lado, sem precisar trocar de janela.

A maioria das pessoas começa por aqui. Depois que pega o jeito, alguns migram pro terminal pra ser mais rápido.

Passo 1: Instalar a extensão

A "extensão" é como um app que você adiciona ao VS Code pra ele ganhar uma funcionalidade nova.

Abre o VS Code.
Olha na barra cinza do lado esquerdo. Tem uns ícones empilhados.
Clica no ícone que parece 4 quadradinhos (sendo um separado do resto). Esse é o de Extensões.
Vai aparecer uma barra de busca em cima escrito "Search Extensions in Marketplace". Digita lá: Claude Code.
A extensão certa é a da Anthropic (sai com selo azul de "verificado"). Clica em Install.
Espera uns 5 segundos. Quando terminar, fecha e abre o VS Code de novo (pra garantir).

Pronto, instalada.

Por que tem várias extensões com nome parecido? Porque qualquer um pode publicar extensão. A oficial tem o nome "Claude Code" e o autor é Anthropic. Não pega outras.

Passo 2: Abrir um projeto

Pra usar Claude você precisa de um projeto aberto (uma pasta com código).

Se ainda não tem nenhum projeto, cria uma pasta vazia em qualquer lugar. Pode ser na Área de Trabalho mesmo. Chama de meu-primeiro-projeto.

No VS Code, vai em:

File (menu de cima) → Open Folder...
Escolhe a pasta que você criou e clica em Selecionar Pasta.

Pronto. Você abriu o projeto.

Passo 3: Abrir o Claude

A forma mais rápida é com o atalho de teclado:

Sistema	Atalho
Windows / Linux	`Ctrl` + `Esc`
Mac	`Cmd` + `Esc`

Vai abrir um painelzinho do lado direito (ou de baixo, dependendo do seu VS Code). É ali que você conversa com o Claude.

Se o atalho não funcionar:

Aperta Ctrl+Shift+P (Windows/Linux) ou Cmd+Shift+P (Mac).
Digita "Claude" na barra que abrir.
Clica em "Claude Code: Start" ou "Open Claude".

Mesma coisa.

Passo 4: Conversar com o Claude

Agora vem a parte boa. No painel do Claude, tem uma caixinha de texto embaixo. Digita lá o que você quer.

Exemplos do que pedir, do mais simples ao mais avançado:

me explica o que esse projeto faz

cria um arquivo HTML com um botão azul que mostra "Olá!" quando clicado

arruma o bug que tá impedindo de logar no sistema

Aperta Enter pra mandar.

O Claude vai começar a digitar a resposta. Se ele for mexer em arquivos, vai aparecer um pop-up perguntando se você autoriza. Tem três tipos de autorização:

Allow once — autoriza só uma vez.
Allow always — autoriza sempre (pra esse projeto).
Deny — não deixa.

No começo, autoriza com Allow once pra você acompanhar tudo. Depois que confiar, vai pra Allow always.

Passo 5: Mencionar arquivos com @

Esse é o truque mais importante.

Quando você quer que o Claude olhe um arquivo específico, em vez de ele ficar adivinhando, você menciona o arquivo usando @.

Na caixa de texto, digita:

Vai aparecer uma listinha com todos os arquivos do projeto. Você escolhe o que quer e ele vira um "marcador" no texto.

Exemplo:

melhora o estilo do @index.html

Ou várias menções:

move a função de @utils.js para @helpers.js

Pra mencionar uma pasta inteira, faz a mesma coisa mas escolhe a pasta na lista. O Claude vai considerar todos os arquivos dentro.

Dica: se você seleciona um trecho de código primeiro (com o mouse) e depois abre o Claude, ele já entende que é sobre aquele trecho. Não precisa nem mencionar.

Passo 6: Aceitar ou rejeitar mudanças

Quando o Claude muda código pra você, ele mostra um diff — uma comparação lado-a-lado entre o código antigo e o novo.

Linhas em vermelho são as que ele tirou.
Linhas em verde são as que ele adicionou.

Vai aparecer botões pra você decidir:

Accept — aceita aquela mudança.
Reject — rejeita.
Accept all — aceita tudo de uma vez.

Pode aceitar uma e rejeitar outra. É 100% no seu controle. Nada vai pro arquivo até você apertar Accept.

Passo 7: Slash commands (comandos especiais)

Slash commands são comandos que começam com /. Você digita na caixa do Claude e ele faz uma ação especial.

Os mais úteis pra começar:

Comando	O que faz
`/help`	Mostra a lista de todos os comandos
`/clear`	Limpa a conversa atual e começa do zero
`/init`	Cria um arquivo `CLAUDE.md` com infos do projeto
`/compact`	Resume a conversa pra liberar memória
`/cost`	Mostra quanto você gastou nessa sessão
`/agents`	Mostra os subagents disponíveis

O que é o /init? Quando você roda /init numa pasta, o Claude lê todos os arquivos e cria um CLAUDE.md resumindo o que o projeto faz. Esse arquivo vira o "manual" do projeto pro Claude. Em conversas futuras, ele lê esse arquivo automaticamente. Faz uma diferença gigante.

Roda /init no seu primeiro projeto. Sério.

Passo 8: Plan mode (pra mudanças grandes)

Quando você vai pedir uma coisa complicada — tipo "cria do zero um sistema de login com banco de dados" — vale ativar o plan mode.

Plan mode = o Claude planeja antes de fazer. Ele te mostra os passos que vai seguir e você aprova. Só depois ele mexe nos arquivos.

Pra ativar, na caixa de texto aperta:

Shift + Tab

Vai aparecer "PLAN MODE" no canto. Aí você pede o que quer e ele responde com um plano. Se gostar, clica Approve. Se não, ajusta com mais um pedido.

Aperta Shift+Tab de novo pra desativar.

Passo 9: Configurações importantes

O Claude tem um arquivo de configuração chamado settings.json. Você não precisa mexer nele agora, mas vale saber que existe.

Fica em:

Windows: C:\Users\SEU_USUARIO\.claude\settings.json
Mac/Linux: ~/.claude/settings.json

Coisas que dá pra configurar lá:

Qual modelo usar (Sonnet, Opus, Haiku — o padrão é Sonnet, que é o mais equilibrado).
Permissões automáticas (que comandos podem rodar sem perguntar).
Hooks (programas que rodam automaticamente em momentos específicos).

Se quiser explorar, abre o arquivo no VS Code mesmo. Mas tranquilo, dá pra usar o Claude meses sem mexer aqui.

Deu errado? Calma.

Atalho `Ctrl+Esc` não abre nada

Outro programa tá usando esse atalho. Solução:

Ctrl+Shift+P → digita Claude → escolhe "Open Claude".
Pra mudar o atalho, vai em File → Preferences → Keyboard Shortcuts, busca por "claude" e configura outro.

Extensão diz "not connected" / "logged out"

A extensão precisa do CLI logado. Volta pro terminal, roda:

claude

Faz login (se pedir) e fecha. Depois abre o VS Code de novo.

Claude não enxerga arquivos do projeto

Você abriu arquivo único em vez de pasta. Fecha o VS Code, abre de novo com File → Open Folder (não "Open File").

A resposta está em inglês mesmo eu falando português

Pede em português que ele responde em português. Se quiser garantir sempre, adiciona no CLAUDE.md (criado pelo /init):

# Idioma
Sempre responda em português do Brasil.

Próximo passo

Agora que você sabe usar o Claude no VS Code:

Aprende a usar no terminal — quando você quer ser mais rápido ou rodar Claude em automações.
Pega as Skills grátis — pacotes prontos que dão superpoderes pro Claude.
Inscreve no canal que toda semana sai vídeo novo.

E se travar em alguma coisa, me chama no WhatsApp. Eu respondo pessoalmente.

Bons códigos.