Setup Completo: do zero ao Claude Code · Capítulo 3 de 18 · 10 min
Instale o VS Code, o painel onde tudo acontece
Um editor gratuito mostra arquivos, resultado e o Claude trabalhando na mesma janela, como um painel de comando.
Este capítulo faz parte do curso gratuito Setup Completo: do zero ao Claude Code.
O VS Code é o seu cockpit. É a única janela onde você vê os arquivos do projeto, o resultado em tempo real e o Claude Code trabalhando, tudo lado a lado. Daqui em diante, quase tudo acontece dentro dele. Ele é gratuito, leve e você não precisa saber programar para usá-lo.
Em uma frase, é o Word para arquivos de código. Em vez de páginas com texto, mostra arquivos coloridos por tipo, com numeração de linha e uma árvore de pastas do lado esquerdo. Vamos abrir, ler e fechar arquivos como você abre um documento qualquer. Suponha um escritório de contabilidade com uma pasta de modelos de contrato: no VS Code, a lista de modelos fica à esquerda e o texto do escolhido aparece no centro, como um fichário aberto sobre a mesa.
Primeiro, baixe o instalador pelo Chrome
- 01No Chrome, vá em code.visualstudio.com
- 02Na tela inicial você vai ver um botão grande azul escrito "Download for Windows". Clique nele.
- 03O Chrome começa a baixar um arquivo chamado algo como
VSCodeUserSetup-x64-1.130.x.exe(o número muda com o tempo e não altera nada para você; o arquivo aparece em Downloads na barra inferior do Chrome). - 04Quando terminar de baixar, clique no nome do arquivo na barra de Downloads: ele abre o instalador.
- 05Se o Windows perguntar se você confia, clique em Sim (a Microsoft é a fabricante).
Esse botão entrega o User Installer, que instala o VS Code só para o seu usuário e não pede senha de administrador. Existe também um System Installer, indicado para máquinas compartilhadas por várias pessoas. Em um computador pessoal, o User Installer é a escolha certa.
Se a barra de Downloads não aparecer ou você fechar sem querer, clique nos três pontinhos no canto superior direito do Chrome, depois em Downloads (ou aperte Ctrl+J). O arquivo está lá.
Com o arquivo baixado, rode o instalador clicando "Avançar"
- 01Aceite o contrato de licença e clique em Avançar.
- 02Mantenha a pasta padrão de instalação. Avançar.
- 03Mantenha o nome no Menu Iniciar. Avançar.
- 04Na tela Selecionar tarefas adicionais, marque TODAS as caixinhas. As mais importantes são:
- Adicionar "Abrir com Code" no menu de contexto de arquivos (em inglês aparece como *Open with Code*): deixa você clicar com o botão direito em qualquer arquivo e abrir nele.
- Adicionar "Abrir com Code" no menu de contexto de pastas: o mesmo, para pastas inteiras.
- Adicionar ao PATH (em inglês, *Add to PATH*): já vem marcado, não desmarque, vamos precisar.
- 01Avançar, depois Instalar e aguarde 1 a 2 minutos.
- 02Marque "Executar Visual Studio Code" e clique em Concluir.
Conheça a tela em um minuto
Ao abrir, o VS Code mostra uma tela de boas-vindas. Ignore por enquanto. Olhe a barra vertical no canto esquerdo: os ícones, de cima para baixo, são:
- Folha de papel: explorador de arquivos (a árvore do projeto)
- Lupa: buscar texto em qualquer arquivo
- Y deitado: controle de versão (o Git, que vamos instalar logo a seguir, no passo do GitHub)
- Triângulo com bug: executar e depurar
- Quatro quadradinhos: extensões (vamos usar isso já já)
Para testar, abra uma pasta
- 01Crie uma pasta nova no seu Desktop chamada
teste-vscode. - 02Volte ao VS Code e vá em Arquivo → Abrir Pasta (ou clique em "Abrir pasta" na tela inicial).
- 03Selecione a pasta
teste-vscodee clique em Selecionar Pasta. - 04Se aparecer uma pergunta sobre confiar nos autores, marque "Confiar".
- 05O nome TESTE-VSCODE aparece no canto superior esquerdo. Funciona!
Daqui pra frente, para abrir uma pasta de projeto, basta clicar com o botão direito em cima dela no Windows Explorer e escolher "Abrir com Code" (*Open with Code*). Foi para isso que marcamos aquela caixinha no instalador.
┌─────────────────────────────────────────────────────────────────┐ │ meu-projeto — Visual Studio Code — □ × │ ├────┬────────────────────────────────────────────────────────────┤ │ 📁 │ ● index.html ● style.css × │ │ │ │ │ 🔍 │ 1 <!DOCTYPE html> │ │ │ 2 <html lang="pt-br"> │ │ ⑂ │ 3 <head> │ │ │ 4 <title>Meu Site</title> │ │ 🐛 │ 5 </head> │ │ │ 6 <body> │ │ ⊞ │ 7 <h1>Olá!</h1> │ │ │ 8 </body> │ │ ├─────────────────────────────────────────────────────────────┤ │ │ TERMINAL × │ │ │ PS C:\Users\Você\meu-projeto> claude │ │ │ Bem-vindo ao Claude Code! O que deseja fazer? █ │ └────┴─────────────────────────────────────────────────────────────┘ ↑ ↑ ↑ Ícones Seus arquivos Claude trabalhando aqui
VS CODE (o editor)
│
├── Painel esquerdo: mostra ARQUIVOS do projeto
│ (você vê o resultado em tempo real)
│
├── Editor central: mostra o CONTEÚDO dos arquivos
│ (você lê e entende o código)
│
└── Terminal embutido: onde o CLAUDE CODE roda
(você dá ordens em português)
↕ tudo na mesma janela
Antes → PowerShell separado + Explorador de Arquivos separado
Depois → TUDO dentro do VS Code, arquivos e Claude lado a ladoAbra a pasta teste-vscode pelo botão direito do Explorador, com Abrir com Code. Acertou se o nome TESTE-VSCODE aparece no alto do painel esquerdo em menos de cinco segundos. Feche o editor e siga para o GitHub; ele volta no bloco 3.
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
- VS Code: Do Zero ao Editor ProfissionalInstalação passo a passoExaminar conexões de Instalação passo a passo
- Setup de Vibecoding no MacInstalar o Visual Studio CodeExaminar conexões de Instalar o Visual Studio Code
- GitHub: Controle de Versão do ZeroInstalando o GitExaminar conexões de Instalando o Git
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.