🔧 Como melhorar a produtividade do time com ESLint, Prettier, Husky e Commitlint

🔧 Como melhorar a produtividade do time com ESLint, Prettier, Husky e Commitlint

Introdução: por que padronizar importa

Times de desenvolvimento perdem tempo precioso corrigindo estilos divergentes, erros bobos e mensagens de commit confusas. A solução? Automatizar essas verificações com ferramentas que rodam antes mesmo de um commit ser feito.

Usar ESLint, Prettier, Husky e Commitlint juntos ajuda a manter o código limpo, padronizado e com histórico organizado — sem depender da memória ou disciplina dos devs.

Lint de código com ESLint

ESLint identifica erros de estilo e bugs comuns em JavaScript/TypeScript.

Exemplo de configuração básica:

npm install eslint --save-dev
npx eslint --init

Você pode escolher entre várias configurações de estilo e ativar o suporte a TypeScript, React etc.

Boa prática:

Crie um arquivo .eslintrc.json compartilhado no repositório e ative regras alinhadas com os padrões do time:

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "env": {
    "browser": true,
    "es2021": true
  }
}

Formatação com Prettier

Prettier cuida da formatação do código, sem discussões subjetivas.

Instalação:

npm install --save-dev prettier
echo {} > .prettierrc

Integre com o ESLint:

npm install --save-dev eslint-config-prettier

E adicione no .eslintrc.json:

"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"]

Automatizando com Husky

Husky permite executar scripts nos git hooks, como antes do commit ou push.

Instalação e uso:

npm install husky --save-dev
npx husky install

No package.json:

"scripts": {
  "prepare": "husky install"
}

Adicione um hook para lint antes de commitar:

npx husky add .husky/pre-commit "npm run lint && npm run format"

Validando commits com Commitlint

Commitlint força mensagens de commit padronizadas (como no Conventional Commits).

Instalação:

npm install --save-dev @commitlint/{config-conventional,cli}
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

Adicione um hook com Husky:

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

Evite armadilhas comuns

  • ❌ Rodar lint só no CI: é tarde demais. Use pre-commit.

  • ❌ Formatar manualmente: integre Prettier no VS Code ou nos scripts.

  • ❌ Mensagens de commit genéricas: "fix", "ajustes" não dizem nada. Use Commitlint para reforçar padrões.

  • ❌ Configs locais divergentes: mantenha tudo versionado no repositório.

Conclusão: menos fricção, mais foco

Integrar ESLint, Prettier, Husky e Commitlint acelera o desenvolvimento e evita retrabalho. Com o tempo, a equipe internaliza os padrões e ganha fluidez na colaboração.

🔁 Teste as ferramentas no seu projeto, compartilhe com o time e melhore continuamente.