💻 VS Code Setup
Visual Studio Code e a IDE recomendada para trabalhar com Claude Code. A interface visual e muito mais limpa que o terminal, ideal para quem prefere evitar linha de comando.
🎯 Por que VS Code?
- • Interface grafica limpa - sem terminal assustador
- • Plataforma confiavel com anos de maturidade
- • Extensao oficial do Claude Code disponivel
- • File explorer integrado para ver mudancas em tempo real
💡 Dica Pratica
Baixe o VS Code em code.visualstudio.com.
A instalacao e simples e funciona em Windows, Mac e Linux.
🔌 Claude Code Extension
A extensao oficial Claude Code permite conversar com o agente diretamente na IDE, sem precisar abrir terminal ou trocar de janela.
Abrir Extensions
Na barra lateral esquerda do VS Code
Clique no icone de quadrados ou pressione Ctrl+Shift+X
Buscar Claude Code
No campo de busca
Digite "Claude Code" e selecione a extensao oficial da Anthropic
Instalar e Fazer Login
Clique em Install
Apos instalar, sera solicitado login com sua conta Anthropic
📁 Estrutura de Projetos
Para projetos n8n-to-app, comece com uma pasta vazia. Claude Code criara toda a estrutura necessaria automaticamente.
Estrutura Tipica Gerada
meu-app/
├── claude.md # System prompt do projeto
├── mcp.json # Configuracao dos MCPs
├── src/ # Codigo do front-end
│ ├── index.html
│ ├── styles.css
│ └── app.js
└── package.json # Dependencias (se necessario)
Pasta Vazia
- ✓ Comece com pasta sem arquivos
- ✓ Claude cria tudo do zero
- ✓ Evita conflitos com arquivos existentes
Evitar
- ✗ Misturar com outros projetos
- ✗ Arquivos conflitantes pre-existentes
- ✗ Estruturas complexas no inicio
🗂️ File Explorer
O File Explorer do VS Code mostra todos os arquivos do projeto em tempo real. Quando Claude cria ou modifica arquivos, voce ve instantaneamente.
👀 Interface Visual
O painel lateral esquerdo mostra a arvore de arquivos. Clique em qualquer arquivo para abri-lo no editor central. Voce pode ter multiplos arquivos abertos em abas.
- • Clique esquerdo: Abre arquivo no editor
- • Duplo clique: Fixa o arquivo na aba
- • Clique direito: Menu de opcoes (renomear, deletar)
📊 Acompanhamento em Tempo Real
Enquanto Claude trabalha, voce vera arquivos aparecendo e sendo modificados no Explorer. Isso da visibilidade total do que esta acontecendo e aumenta a confianca no processo.
🪟 Multiplas Sessoes
VS Code permite abrir multiplos arquivos lado a lado. Isso e util para comparar codigo, ver mudancas e acompanhar diferentes partes do projeto.
Split Editor
Divida a tela para ver dois ou mais arquivos simultaneamente.
Tabs
Cada arquivo aberto fica em uma aba, facil de alternar.
Chat + Editor
Claude Code no meio, arquivos na lateral - layout perfeito.
💡 Dica Pratica
Use Ctrl+\ para dividir o editor.
Arraste abas para o lado que preferir. Isso permite ter Claude Code aberto enquanto ve o codigo sendo modificado.
✨ Interface Limpa
Uma interface minimalista reduz distracao e carga cognitiva. Esconda paineis desnecessarios e foque apenas no essencial.
🎯 Configuracao Recomendada
- • Activity Bar: Mantenha visivel (icones laterais)
- • Status Bar: Pode esconder se quiser mais espaco
- • Minimap: Desative para telas menores
- • Side Panel: Claude Code + File Explorer
Manter Visivel
- ✓ Claude Code panel
- ✓ File Explorer
- ✓ Editor com abas
Pode Esconder
- ✗ Terminal (Claude faz por voce)
- ✗ Problems panel
- ✗ Output panel
📋 Resumo do Modulo
Proximo Modulo:
8.2 - CLAUDE.md e System Prompt