Pular para conteúdo

Aula 03: Ambiente de Desenvolvimento 💻

🎯 Nosso Foco

  • Dominar o VS Code.
  • Configurar extensões essenciais.
  • Navegar pelo Terminal com confiança.
  • Customizar seu workflow.

🏗️ Por que investir no ambiente?

  • Menos tempo configurando, mais tempo criando.
  • Erros capturados antes de rodar o código.
  • Saúde ocular e mental (Temas e Fontes).
  • Seu computador é sua oficina!

🟦 VS Code: O Rei dos Editores

  • Lançado pela Microsoft em 2015.
  • Escrito em TypeScript/Electron.
  • Arquitetura de plugins leve.
  • Standard de mercado.

🎨 Personalização Visual

  • Temas: Dracula, One Dark Pro, Night Owl.
  • Ícones: Material Icon Theme, vscode-icons.
  • Fontes: Fira Code, JetBrains Mono (Ligatures).

🔌 Extensões: Produtividade Pura

  1. Prettier: Formatação automática.
  2. ESLint: Análise de código em tempo real.
  3. GitLens: Quem escreveu essa linha?
  4. Error Lens: Erros destacados na linha.

🔌 Extensões: Utilidades

  1. Path Intellisense: Auto-completar caminhos de arquivos.
  2. Auto Close/Rename Tag: Agilidade no HTML.
  3. Thunder Client: Testar APIs dentro do editor.

⌨️ Atalhos do VS Code (Ninja Mode)

  • Ctrl + P: Abrir arquivo rapidamente.
  • Ctrl + Shift + P: Paleta de comandos.
  • Alt + Up/Down: Mover linha de lugar.
  • Ctrl + D: Selecionar próxima ocorrência.

⌨️ Atalhos do VS Code (Edição)

  • Ctrl + /: Comentar bloco de código.
  • Ctrl + B: Esconder barra lateral.
  • Ctrl + ': Abrir/Fechar Terminal.
  • Ctrl + \: Dividir o editor (Split View).

🖥️ O Terminal Integrado

mermaid graph TD Editor[Editor de Texto] -- Atalho Ctrl + ' --> Term[Terminal Integrado] Term -- Executa --> Node[Node.js / Python] Term -- Comanda --> Git[Git / Docker]

  • pwd: Print Working Directory (Onde estou?).
  • ls -la: Listar tudo (inclusive ocultos).
  • cd ..: Voltar uma pasta.
  • cd ~: Ir para a Home.

🔨 Manipulação de Arquivos

  • touch index.js: Criar arquivo vazio.
  • mkdir src: Criar pasta "src".
  • mv velho.js novo.js: Renomear.
  • rm -rf pasta: Deletar recursivamente (CUIDADO!).

🔍 Gerenciamento de Conteúdo

  • cat file.txt: Ver conteúdo no terminal.
  • grep "erro" log.txt: Buscar texto dentro do arquivo.
  • echo "olá" > file.txt: Escrever no arquivo.

💡 Dica de Ouro: Alias

Você pode criar apelidos para comandos longos! * gs -> git status * ga -> git add . * gc -> git commit -m

🐚 Alternativas de Terminal

  • Windows: WSL2 (Linux no Windows), PowerShell 7.
  • Mac/Linux: Zsh (Oh My Zsh), Fish Shell.

🛠️ Configurando o settings.json

Tudo no VS Code é texto! * Acesse com Ctrl + Shift + P > Open User Settings (JSON). * Sincronize suas configurações com o GitHub.

📈 Autocomplete (IntelliSense)

  • Sugestões baseadas no contexto.
  • Documentação rápida ao passar o mouse.
  • Snippets: Pedaços de código prontos.

🦁 Debugging Diferenciado

  • Pare de usar console.log para tudo!
  • Use Breakpoints (pontos de parada).
  • Inspecione variáveis em tempo real no editor.

🏆 Checklist do Ambiente Pro

  • Tema escuro configurado.
  • Extensões de linting e format instaladas.
  • Atalhos básicos memorizados.
  • Terminal configurado com zsh ou pwsh.

📝 Prática de Hoje

  1. Customizar seu VS Code.
  2. Criar uma estrutura de 3 pastas via Terminal.
  3. Configurar o Auto-Format ao Salvar.

🏁 Dúvidas?

Seu ambiente, suas regras! 🚀