Preparando Suas Ferramentas
Antes de programar, precisamos instalar algumas ferramentas. Calma, é simples!
O que vamos instalar?
- VS Code - Editor onde você escreve código
- Google Chrome - Navegador para testar
- Extensões úteis - Ajudantes no VS Code
1. Instalando o VS Code
O Visual Studio Code (VS Code) é o editor de código mais popular do mundo. É gratuito e feito pela Microsoft.
Windows
- Acesse code.visualstudio.com
- Clique em "Download for Windows"
- Execute o instalador
- Marque "Add to PATH" durante instalação
- Pronto!
Mac
- Acesse code.visualstudio.com
- Clique em "Download for Mac"
- Arraste para a pasta Aplicativos
- Pronto!
2. Instalando o Google Chrome
Provavelmente você já tem, mas se não tiver:
- Acesse google.com/chrome
- Baixe e instale
Usaremos o Chrome porque suas ferramentas de desenvolvedor são excelentes.
3. Extensões do VS Code
Extensões são como apps que adicionam funcionalidades ao VS Code.
Como instalar extensões:
- Abra o VS Code
- Clique no ícone de quadradinhos na barra lateral (ou Ctrl+Shift+X)
- Pesquise pelo nome
- Clique em "Install"
Extensões recomendadas:
Live Server
- Atualiza a página automaticamente quando você salva
- Pesquise: "Live Server"
Prettier
- Formata seu código automaticamente
- Pesquise: "Prettier - Code formatter"
Portuguese (Brazil) Language Pack
- VS Code em português (opcional)
- Pesquise: "Portuguese Brazil"
4. Criando sua pasta de projetos
Vamos organizar onde seus projetos vão ficar:
Windows
- Abra o Explorador de Arquivos
- Vá para Documentos
- Crie uma pasta chamada
projetos
Mac
- Abra o Finder
- Vá para Documentos
- Crie uma pasta chamada
projetos
5. Testando o ambiente
Vamos criar seu primeiro arquivo!
- Abra o VS Code
- Vá em File > Open Folder
- Selecione sua pasta
projetos - Na barra lateral, clique com botão direito > New File
- Nome:
teste.html - Cole este código:
<!DOCTYPE html><html><head> <title>Meu Primeiro Teste</title></head><body> <h1>Funcionou!</h1> <p>Se você está vendo isso, seu ambiente está pronto!</p></body></html>- Salve (Ctrl+S ou Cmd+S)
- Clique com botão direito no arquivo > "Open with Live Server"
- Seu navegador deve abrir mostrando "Funcionou!"
🎉 Parabéns! Seu ambiente está configurado!
Atalhos úteis do VS Code
| Atalho | O que faz |
|---|---|
| Ctrl+S | Salvar |
| Ctrl+Z | Desfazer |
| Ctrl+C | Copiar |
| Ctrl+V | Colar |
| Ctrl+/ | Comentar linha |
| Ctrl+D | Selecionar próxima ocorrência |
| Ctrl+F | Buscar |
No Mac, troque Ctrl por Cmd
Dicas do VS Code
Auto-completar
Quando você começa a digitar, o VS Code sugere completar. Pressione Tab ou Enter para aceitar.
Múltiplos cursores
Segure Alt e clique em vários lugares para editar múltiplas linhas ao mesmo tempo.
Terminal integrado
Ctrl+` abre um terminal dentro do VS Code (vamos usar depois).
Problemas comuns
"Live Server não funciona"
- Certifique-se que o arquivo está salvo
- Verifique se a extensão está instalada
- Tente reiniciar o VS Code
"VS Code está em inglês"
- Instale a extensão de português
- Reinicie o VS Code
- Vá em View > Command Palette > "Configure Display Language"
Resumo
- ✅ VS Code instalado
- ✅ Chrome instalado
- ✅ Extensões configuradas
- ✅ Pasta de projetos criada
- ✅ Primeiro arquivo testado
Na próxima aula, vamos criar sua primeira página web de verdade! 🚀