Setup Completo: do zero ao Claude Code · Capítulo 11 de 18 · 12 min
Trabalhe com o Claude Code dentro do VS Code
Ver cada arquivo nascer enquanto o Claude trabalha torna a revisão imediata e dispensa o PowerShell separado.
Este capítulo faz parte do curso gratuito Setup Completo: do zero ao Claude Code.
Bloco 3 · Deixe o Claude do seu jeito. Você já instalou a ferramenta e definiu o que ela pode fazer sozinha. Falta o ajuste que transforma um assistente genérico em um que já conhece seus padrões, seus projetos e seus limites. Reexplicar as mesmas preferências a cada sessão custa tempo todo dia; configurar uma vez rende em todas as sessões seguintes. Os dois primeiros passos deste bloco valem para todo mundo. Os três finais trazem o selo Avançado: úteis, e totalmente puláveis por enquanto.
Até agora a gente abriu o PowerShell para usar o Claude Code. Funciona, mas é estranho, como pedir comida pelo telefone sem nunca ver o restaurante. No VS Code, o Claude trabalha do lado direito enquanto você vê os arquivos crescerem do lado esquerdo, em tempo real, igual ver o garçom preparando a salada na sua frente. Suponha a dona de uma loja de roupas pedindo "crie a página da coleção de inverno": ela vê o arquivo nascer à esquerda enquanto lê a explicação à direita.
┌──────────────────────────────────────────────────────────────────┐ │ meu-primeiro-projeto — Visual Studio Code │ ├──────────────┬───────────────────────────────────────────────────┤ │ EXPLORER │ index.html ● │ │ │ │ │ ▼ meu-proj │ 1 <!DOCTYPE html> │ │ 📄 index │ 2 <html lang="pt-br"> │ │ 📄 style │ 3 <head> │ │ 📁 imgs │ 4 <title>Seu Nome e Cargo</title> │ │ │ 5 </head> │ │ │ 6 <body> │ │ │ 7 <h1>Bem-vindo!</h1> │ │ │ 8 │ │ ├───────────────────────────────────────────────────┤ │ │ TERMINAL ⓘ PROBLEMS │ │ │ ╭───────── Claude Code ──────────────────╮ │ │ │ │ > Crie um cabeçalho com nome │ │ │ │ │ e a sua função │ │ │ │ │ │ │ │ │ │ ✓ Lendo estrutura da pasta │ │ │ │ │ ✓ Editando index.html (linhas 6-9) │ │ │ │ │ ✓ Pronto. Atualize o navegador. │ │ │ │ ╰────────────────────────────────────────╯ │ └──────────────┴───────────────────────────────────────────────────┘ ◀── Arquivos aparecem aqui em tempo real Você conversa aqui ──▶
Forma 1, a mais usada: o terminal embutido.
- 01Abra o VS Code.
- 02Vá em Arquivo → Abrir Pasta e escolha a pasta
teste-vscodeque você já criou lá no passo do VS Code (ou qualquer outra pasta sua). - 03No menu de cima, clique em Terminal → Novo Terminal.
- 04Vai aparecer uma janelinha preta na parte de baixo do VS Code. É o mesmo PowerShell que você abriu antes, só que dentro do editor.
- 05Digite claude e aperte Enter.
- 06Pronto. O Claude Code está rodando dentro do VS Code.
Atalho de teclado: aperte Ctrl + Crase (a tecla acima do Tab, ao lado do 1) para abrir/fechar o terminal a qualquer momento.
Teste a mágica: peça ao Claude para criar um arquivo.
Dentro do Claude Code (no terminal embutido), digite
Crie um arquivo chamado ola.txt com a mensagem "Funcionou!"Aperte Enter. Você vai ver o arquivo ola.txt aparecer no painel esquerdo do VS Code em tempo real. Clique nele para ver o conteúdo.
Forma 2: a extensão oficial Claude Code, com interface visual.
Tem uma extensão oficial da Anthropic que adiciona um painel lateral com chat, parecido com claude.ai mas dentro do VS Code. Para instalar:
- 01No VS Code, clique no ícone dos quatro quadradinhos na barra preta da esquerda (atalho: Ctrl + Shift + X).
- 02No campo de busca em cima, digite Claude Code.
- 03Vai aparecer uma extensão chamada "Claude Code" com selo azul "Anthropic": é a oficial.
- 04Clique no botão azul Install.
- 05Após instalar, vai aparecer um ícone do Claude na barra preta da esquerda; clique nele para abrir o painel.
Para começar, use só o terminal embutido (Forma 1), o mais flexível e onde quase tudo acontece. A extensão é boa quando você quer pedir uma coisa rápida sobre um trecho específico de código (selecionar e mandar pra ele). Os dois funcionam juntos sem conflito.
┌─────────────────────────────────────────────────────────────────┐ │ meu-projeto — Visual Studio Code — □ × │ ├────┬──────────────────────────────────┬──────────────────────────┤ │ 📁 │ EXPLORER │ ● index.html │ │ │ ▼ MEU-PROJETO │ │ │ 🔍 │ 📄 index.html │ 1 <!DOCTYPE html> │ │ │ 📄 style.css │ 2 <html lang="pt-br"> │ │ ⑂ │ 📁 imagens/ │ 3 <head> │ │ ├──────────────────────────────────┤ 4 <title>... │ │ 🤖 │ CLAUDE CODE × │ │ │ │ ─────────────────────── │ │ │ ⊞ │ > Adicione class="hero" │ │ │ │ ao div principal │ │ │ │ │ │ │ │ ✓ Editei index.html linha 6. │ │ │ │ class="hero" adicionado. │ │ └────┴──────────────────────────────────┴──────────────────────────┘ ↑ Painel lateral Claude ↑ Arquivo sendo editado ao vivo
Atalho turbo: crie um comando 'claude-go' que abre tudo sem perguntar.
Com o modo Auto como padrão, você raramente precisa de mais liberdade. Ainda assim existe o modo Bypass, o "piloto automático" que não verifica nada, ligado pela opção --dangerously-skip-permissions. Mesmo nele, as regras de bloqueio continuam valendo e apagar pastas críticas ainda pede confirmação. A própria Anthropic recomenda usá-lo só dentro de máquina isolada; na prática, só em pasta de teste, nunca em projeto importante.
Em vez de você mesma editar o perfil do PowerShell, cole o prompt abaixo no Claude Code e ele faz por você
Depois desse atalho, você vai ter dois "botões" no terminal: claude (modo Auto, o padrão, que barra o arriscado) e claude-go (modo livre, faz sem perguntar). Pense neles como velocidade urbana (claude) e estrada com piloto automático (claude-go). Não use piloto automático em centro da cidade. Mesma lógica: não use claude-go em pasta com dado de cliente, contrato ou código em produção.
TERMINAL EMBUTIDO (Ctrl + Crase → digita claude) ──────────────────────────────────────────────────── ✓ Tarefas longas (criar projeto inteiro, instalar deps) ✓ Múltiplos arquivos ao mesmo tempo ✓ Comandos shell, git, npm ✓ Ver saída de servidor rodando → USE para 90% do trabalho do dia a dia EXTENSÃO (painel lateral) ──────────────────────────────────────────────────── ✓ Perguntas rápidas sobre um trecho de código ✓ Selecionar 10 linhas e pedir explicação ✓ Corrigir um erro específico visível na tela → USE para consultas rápidas com contexto visual Os dois funcionam ao mesmo tempo sem conflito.
Prefere tudo em janelas? A aba Code do app Desktop do Claude faz o mesmo papel, com diff visual e terminal embutido. Dentro do terminal, o comando /desktop leva a sessão aberta para o app, e o /resume no app retoma o que você começou no terminal.
Abra a pasta teste-vscode no VS Code, aperte Ctrl + Crase, digite claude e peça o arquivo ola.txt. Acertou se o arquivo surge no painel esquerdo segundos depois do pedido, sem você tocar no Explorador. Funcionou? Esse é o seu fluxo de trabalho daqui em diante; siga para a memória do Claude.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Depois, siga para
- CursoClaude Code CLI: Programação com IA
- CursoAgentes de código para executivossugerido pelo grafoO Setup ensina permissões, contexto do projeto e escolha de modelo por custo. Essa preparação sustenta os exercícios de comparação de assistentes, criação do gerador de UTM e regras de projeto no curso de aprendizado por reforço e vibecoding.
- CursoSetup de Vibecoding no Macsugerido pelo grafo11 capítulos de “Setup de Vibecoding no Mac” usam conceitos apresentados em “Setup Completo: do zero ao Claude Code”.
- CursoVídeo com IA: Claude Code, Codex e ElevenLabssugerido pelo grafo7 capítulos de “Vídeo com IA: Claude Code, Codex e ElevenLabs” usam conceitos apresentados em “Setup Completo: do zero ao Claude Code”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Setup de Vibecoding no MacUsar Claude Code dentro do VS CodeExaminar conexões de Usar Claude Code dentro do VS Code
- Claude Code CLI: Programação com IAFazer a primeira delegação ao Claude e ver o arquivo nascerExaminar conexões de Fazer a primeira delegação ao Claude e ver o arquivo nascer
- VS Code: Do Zero ao Editor ProfissionalTerminal integradoExaminar conexões de Terminal integrado
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.