Aula 10 - Qualidade de Código (Linters e Formatters) ✨
Objetivo
Objetivo: Entender como as ferramentas de análise estática garantem a padronização do código em equipe, evitando erros comuns e mantendo um estilo visual consistente.
1. O Código Além do Funcionamento 🧠
Não basta o código "funcionar". Para que um projeto dure anos e seja mantido por várias pessoas, ele precisa ser legível e seguir padrões.
🧩 Análise Estática
Ferramentas de análise estática são o primeiro filtro de qualidade de um time. Elas leem seu código antes mesmo de você tentar rodá-lo (sem executá-lo), detectando anomalias e code smells (códigos mal estruturados).
As regras são configuráveis. O time decide que "Toda função deve ter limite de 20 linhas" ou "Ninguém pode usar aspas duplas". O Linter se torna o policial automático que barra códigos fora do padrão no GitHub.
2. Linters vs Formatters: Qual a Diferença? ⚖️
Embora parecidos, eles resolvem problemas diferentes:
| Ferramenta | O que faz? | Exemplo |
|---|---|---|
| Linter (ESLint / Flake8) | Encontra erros de lógica e potenciais bugs. | Variável criada mas nunca utilizada. |
| Formatter (Prettier / Black) | Cuida do visual e do estilo do código. | Colocar ponto e vírgula, ajustar espaços. |
🛠️ Por que usar os dois?
O Formatter deixa o código bonito; o Linter garante que ele está correto e segue as boas práticas da linguagem.
3. O Fluxo de Correção de Código
mermaid graph TD Code([Escrever Código]) --> Lint([Executar Linter]) Lint -- Erro Encontrado --> Fix([Corrigir Lógica]) Fix --> Lint Lint -- OK --> Format([Executar Formatter]) Format --> Clean([Código Limpo e Padronizado])
4. Praticando no Terminal 💻
Simulando o uso do ESLint para encontrar erros e do Prettier para formatar:
5. Prática: Configurando o Corretor Automático 🚀
Sua missão é ver a mágica da formatação automática no VS Code:
- Abra o VS Code e instale a extensão Prettier - Code Formatter.
- Vá em Settings (Ctrl + ,) e pesquise por
Format on Save. Ative essa opção. - Crie um arquivo chamado
bagunca.js. - Escreva um código propositalmente bagunçado (muitos espaços, aspas simples e duplas misturadas, sem identação).
- Salve o arquivo e observe o VS Code organizar tudo instantaneamente.
🔗 Materiais da Aula
-
Slides
Material visual com diagramas e conceitos-chave.
-
Quiz
Teste seu conhecimento com 10 questões interativas.
-
Exercícios
5 exercícios progressivos (básico → desafio).
-
Projeto
Aplicação prática dos conceitos da aula.