Toda equipe de desenvolvimento tem uma história como esta. Um pull request fica aberto por meio dia. Não porque a lógica esteja quebrada ou

Toda equipe de desenvolvimento tem uma história como esta. Um pull request fica aberto por meio dia. Não porque a lógica esteja quebrada ou o contrato da API tenha mudado, mas porque dois revisores discordam sobre se literais de objeto precisam de vírgulas finais. A discussão cresce. Alguém posta um link para um guia de estilo. Outra pessoa rebate com um guia diferente. Quando o código finalmente é mesclado, todos os envolvidos perderam o contexto das funcionalidades que estavam realmente construindo.

Essas disputas são caras. Elas consomem horas do tempo de engenheiros seniores, criam pequenos ressentimentos entre colegas de equipe e treinam desenvolvedores juniores a acreditar que a engenharia de software consiste, em grande parte, em vencer discussões sobre pontos e vírgulas. A pior parte? O produto não se importa. Seus usuários nunca notarão um espaço versus um tab. Eles notarão o bug que você não corrigiu porque estava ocupado debatendo aspas.

Consistência importa, sim. Uma base de código que parece ter sido escrita por uma única pessoa é mais fácil de ler, mais fácil de revisar e mais fácil de depurar. O erro é tentar impor essa consistência manualmente.

Automatize as Tarefas Tediosas

A solução é direta. Remova completamente o julgamento humano da formatação. Delegue isso para ferramentas que não possuem egos e não se cansam.

Três ferramentas lidam com isso de forma limpa.

Prettier pega seu código e o reformata automaticamente. Ele não pede permissão. Você para de pensar no comprimento das linhas, estilos de aspas ou em como quebrar uma assinatura de função longa em várias linhas. Você salva o arquivo. O Prettier o torna consistente.

ESLint lida com os problemas que o Prettier não toca. Ele detecta variáveis não utilizadas, código inacessível, dependências ausentes em hooks do React e padrões que historicamente levam a bugs. Quando configurado corretamente, ele não interfere na formatação e foca na qualidade real do código.

Husky instala um hook de pre-commit que impede que qualquer coisa entre no seu repositório até que as verificações automatizadas passem. Ele transforma seu pipeline de Git em um guardião, em vez de uma caixa de sugestões.

Juntos, eles formam um ciclo fechado. Você escreve o código como quiser localmente. Quando você faz o commit, as ferramentas o limpam e o verificam. Só então o código sai da sua máquina.

Por que esta Stack específica funciona

Você pode passar semanas ajustando regras do ESLint manualmente. Resista a esse impulso. O objetivo aqui é parar de debater estilo, não criar um novo trabalho de tempo integral como curador de guia de estilo.

O Prettier é intencionalmente opinativo. Ele oferece opções de configuração limitadas porque cada opção é uma futura discussão. Os padrões são sensatos. Escolha um pequeno conjunto de substituições, escreva-as uma vez e siga em frente.

O ESLint, deixado por conta própria, tentará impor tanto a qualidade do código quanto regras de formatação, como o uso de ponto e vírgula e o tamanho da indentação. Isso cria fricção com o Prettier, pois ambas as ferramentas tentarão editar os mesmos caracteres. O pacote eslint-config-prettier resolve isso desativando todas as regras do ESLint que conflitam com o Prettier. Essa separação de responsabilidades é crítica. O Prettier cuida da estética. O ESLint cuida da lógica.

Executar verificações apenas na integração contínua é tarde demais. Quando o CI falha, você já fez o commit de um código bagunçado, trocou de contexto para outra tarefa e possivelmente abriu um pull request. Corrigi-lo exige outro commit, outro push, outro ciclo de espera. O Husky encurta esse ciclo de feedback para segundos. O lint-staged torna o processo rápido ao executar as ferramentas apenas nos arquivos que você realmente alterou, em vez de escanear todo o repositório a cada commit.

Configurando Passo a Passo

A configuração a seguir é voltada para um projeto moderno de JavaScript ou React, mas o padrão se aplica a TypeScript, Vue ou Node com pequenos ajustes. Execute cada etapa a partir da raiz do seu projeto.

Comece instalando tudo como dependências de desenvolvimento:

npm install -D prettier eslint husky lint-staged eslint-config-prettier