Pular para conteúdo

Aula 10: Qualidade de Código (Linters e Formatters) ✨

🎯 Nossa Missão

  • Entender a análise estática de código.
  • Dominar o ESLint (Linter).
  • Dominar o Prettier (Formatter).
  • Padronizar o ambiente de desenvolvimento do time.

🤔 Por que a qualidade importa?

  • Legibilidade: Código é mais lido do que escrito.
  • Manutenibilidade: Mais fácil de consertar no futuro.
  • Conformidade: Todo o time escreve do mesmo jeito.
  • Menos Bugs: Erros bobos são pegos na hora.

📖 O que é Análise Estática?

Analisar o código sem executá-lo. * Procura por padrões perigosos. * Verifica se regras de estilo estão sendo seguidas. * Informa o desenvolvedor instantaneamente no editor.

🛑 Erros Comuns que Linters Pegam

  • Variáveis declaradas mas nunca usadas.
  • Chamar funções que não foram definidas.
  • Uso de var em vez de const/let no JS.
  • Falta de ponto e vírgula (onde é obrigatório).

🕵️‍♂️ ESLint: O Detetive do Código

  • O Linter mais popular do mundo JavaScript.
  • Extremamente configurável.
  • Possui conjuntos de regras prontos (ex: Airbnb, Google).

🎨 Prettier: O Artista do Código

  • A única preocupação dele é o estilo visual.
  • Onde colocar o espaço? Onde quebrar a linha?
  • O Prettier é "opinativo": ele decide o melhor visual para você não perder tempo discutindo.

⚖️ Linter vs Formatter

mermaid graph LR L[Linter - ESLint] --- Rules1[Qualidade/Logica] F[Formatter - Prettier] --- Rules2[Estilo/Aparencia] L --- Ex1(Variaveis nao usadas) F --- Ex2(Uso de Aspas Simples)

⚙️ Configurando o ESLint

Arquivo .eslintrc.json 

{
  "rules": {
    "no-console": "warn",
    "semi": ["error", "always"]
  }
}
* Off: Desligado. * Warn: Amarelo (Aviso). * Error: Vermelho (Bloqueia o commit).

💎 Configurando o Prettier

Arquivo .prettierrc 

{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2
}
* Configura uma vez, aplica no projeto inteiro!

⌨️ Integração com VS Code

  • Instala as extensões oficiais.
  • Ativa o "Format on Save".
  • Mágica: Você escreve o código bagunçado, aperta Ctrl + S e ele se organiza sozinho!

🏗️ Extensões de Regras

Muitos frameworks trazem suas próprias regras de lint: * eslint-plugin-react * eslint-plugin-vue * eslint-plugin-security

🛠️ Comando fix

O ESLint pode consertar os erros para você! 

npx eslint . --fix
* Resolve automaticamente problemas de indentação e erros simples de sintaxe.

🤫 Por que não usar console.log em produção?

  • Exibe dados sensíveis no navegador.
  • Diminui a performance do app.
  • O Linter nos ajuda a lembrar de remover logs de teste.

🧠 Dívida Técnica

Cada regra ignorada hoje é um problema amanhã. * O Linter ajuda a manter a dívida sob controle. * Evita o "Código Espaguete".

🤝 EditorConfig: O Irmão do Meio

O arquivo .editorconfig ajuda a manter a indentação correta mesmo em editores diferentes. * indent_style = space * indent_size = 2

🛡️ Linting no CI (GitHub Actions)

  • A build só passa se o Linter der "OK".
  • Ninguém consegue enviar código "sujo" para a branch principal.

🏆 Checklist de Qualidade Pro

  • ESLint e Prettier configurados no projeto.
  • "Format on Save" ativado no VS Code.
  • Entende a diferença entre aviso e erro.
  • Arquivos de configuração versionados no Git.

📝 Prática de Hoje

  1. Instalar o ESLint e Prettier via npm.
  2. Criar os arquivos de configuração.
  3. Bagunçar um código e deixar o editor consertar sozinho.

🏁 Dúvidas?

Código limpo é código profissional! 🚀✨