gif
Documentação é o mapa para um código sustentável.
gif
Reutilizar é crescer,
documentar é garantir.
light_mode
Logo Logo

Linting e Formatação com Husky e Prettier

  2. Projetos
  3. PSYCS
  4. Husky + Prettier
Husky + Prettier: Linting e Formatação

Introdução

Este documento descreve como o projeto utiliza ferramentas de qualidade de código, como Prettier, ESLint, Husky e lint-staged, para garantir consistência, padronização e legibilidade no código.

📋 Ferramentas Utilizadas

  • ESLint: Analisa e corrige erros de código JavaScript/TypeScript.
  • Prettier: Formata automaticamente arquivos de código fonte.
  • Husky: Gerencia hooks do Git, como pre-commit.
  • lint-staged: Executa comandos somente nos arquivos que foram modificados (staged).

⚙️ Como Funciona

  1. Ao executar yarn install ou npm install, o Husky ativa os hooks do Git.
  2. O hook pre-commit é disparado automaticamente antes de cada commit.
  3. O lint-staged identifica arquivos alterados e aplica:
    • Prettier para formatar o código automaticamente.
    • ESLint para verificar problemas de lint.
  4. Se forem encontrados problemas, o commit será bloqueado até que sejam corrigidos.

🛠️ Comandos Disponíveis

Comando Descrição
yarn run lint Executa o ESLint e tenta corrigir problemas automaticamente.
yarn run lint:check Verifica erros de lint sem corrigi-los.
yarn run format Formata todos os arquivos com Prettier.
yarn run format:check Verifica se a formatação está correta (sem aplicar mudanças).

🚀 Configuração Automática

Ao instalar as dependências do projeto, a configuração de linting e formatação é feita automaticamente:

yarn install

Isso garante:

  • Instalação do Husky e lint-staged
  • Configuração dos hooks pre-commit

🧩 Personalização com eslint.config.js

O arquivo eslint.config.js permite configurar regras personalizadas, exceções e ajustes específicos para diferentes tipos de arquivos. Isso garante flexibilidade na aplicação de linting ao projeto.

🔍 Funcionalidades principais

  • Ignora arquivos/pastas: como node_modules, dist, .next, arquivos de testes e configurações.
  • Aplica regras específicas: para JavaScript, TypeScript, arquivos de configuração e testes.
  • Define exceções: como permitir console.log ou variáveis não utilizadas em arquivos específicos.

📁 Exemplos de regras personalizadas

Contexto Exceções Aplicadas
frontend/**/*.config.{js,ts} no-console e no-undef desativados
frontend/**/*.{test,spec}.{js,ts,tsx} Várias regras desativadas para facilitar testes
frontend/src/lib/debug.js, utils/legacy.js Regras desativadas para arquivos legados

📌 Observações

  • O ESLint não corrige automaticamente os erros no commit. Ele apenas valida e bloqueia se necessário.
  • Para correções manuais, utilize o comando yarn run lint.

📝 O que Acontece no Commit

  1. Você adiciona arquivos com git add.
  2. Executa git commit.
  3. O Husky dispara o hook pre-commit.
  4. O lint-staged executa:
    • Prettier para formatar os arquivos.
    • ESLint para validar o código.
  5. Se houver erros de lint não corrigíveis automaticamente, o commit será bloqueado.

✅ Conclusão

Com essa configuração, o projeto garante padronização e qualidade de código, bloqueando commits com problemas de lint e formatação.