Manter o código JavaScript consistente é uma batalha que ninguém deveria travar manualmente. Com ESLint (linter) e Prettier (formatter) configurados automaticamente, seu editor corrige erros e padroniza estilo enquanto você digita, sem discussão de equipe sobre espaços ou ponto e vírgula. Este guia cobre a configuração do zero, com integração a Git hooks para garantir que nada passe batido.
Pré-requisitos
- Node.js (v16 ou superior) e npm/yarn instalados.
- Um projeto JavaScript existente (ou crie uma pasta vazia com
package.json). - Editor de código (VS Code recomendado, mas funciona em qualquer um com suporte a LSP).
Passo 1: Instalar ESLint e Prettier
No terminal do seu projeto, instale os pacotes como dependências de desenvolvimento:
npm install --save-dev eslint prettier
Dica: Use --save-dev porque essas ferramentas só são necessárias durante o desenvolvimento, não em produção.
Erro comum: Instalar globalmente em vez de localmente. Prefira a instalação local para cada projeto, evitando conflitos de versão entre equipes.
Passo 2: Configurar o ESLint
Inicialize o ESLint com:
npx eslint --init
O assistente pergunta sobre o estilo do seu código (CommonJS/ES modules, React ou não, etc.). Escolha as opções que refletem seu projeto. Ao final, ele gera um arquivo .eslintrc.json (ou .js/.yaml).
Dica: Se você usa React, selecione a opção que inclui regras para JSX. Se não, desmarque.
Erro comum: Pular essa etapa e usar o ESLint sem configuração. Ele não fará nada útil, as regras padrão são mínimas.
Passo 3: Configurar o Prettier
Crie um arquivo .prettierrc na raiz do projeto com suas preferências:
{ "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "all" }
Dica: Defina singleQuote: true se sua equipe prefere aspas simples. O Prettier respeita essas opções globalmente.
Erro comum: Esquecer de criar o arquivo e esperar que o Prettier use configurações mágicas. Ele só funciona com configuração explícita.
Passo 4: Integrar ESLint e Prettier
Instale o eslint-config-prettier para desligar regras do ESLint que conflitam com o Prettier:
npm install --save-dev eslint-config-prettier
Depois, adicione "prettier" ao array extends no .eslintrc.json:
{ "extends": ["some-other-config-you-use", "prettier"] }
Dica: Coloque "prettier" por último no extends para que ele sobrescreva regras conflitantes.
Erro comum: Achar que o Prettier substitui o ESLint. Na verdade, eles se complementam: ESLint pega erros lógicos, Prettier cuida da formatação.
Passo 5: Automatizar com o Editor e Git Hooks
No VS Code, instale as extensões ESLint e Prettier. No settings.json do editor, ative a formatação ao salvar:
{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
Para garantir que ninguém pule a formatação, instale husky e lint-staged:
npm install --save-dev husky lint-staged npx husky init echo "npx lint-staged" > .husky/pre-commit
No package.json, configure:
{ "lint-staged": { "*.js": ["eslint --fix", "prettier --write"] } }
Erro comum: Configurar apenas no editor e esquecer o hook. O commit pode passar com código não formatado se outro desenvolvedor não tiver as extensões.
Checklist final
- [ ] ESLint e Prettier instalados como devDependencies.
- [ ]
.eslintrc.jsoncriado comeslint --init. - [ ]
.prettierrccom suas preferências de estilo. - [ ]
eslint-config-prettiernoextends. - [ ] Editor formatando ao salvar.
- [ ] Husky + lint-staged rodando no pre-commit.
FAQ
Qual a diferença entre linter e formatter?
Linter (ESLint) analisa o código em busca de erros lógicos, variáveis não usadas e práticas ruins. Formatter (Prettier) apenas reorganiza a formatação, espaços, quebras de linha, aspas, sem se importar com a lógica.
Preciso dos dois ou um só basta?
Você pode usar apenas o ESLint, que tem regras de formatação próprias. Mas o Prettier é mais consistente e evita debates de estilo. A combinação dos dois é o padrão da indústria.
Como desabilitar uma regra específica do ESLint?
No .eslintrc.json, use a chave "rules":
{ "rules": { "no-console": "off" } }
O que fazer se o ESLint e o Prettier entrarem em conflito?
O eslint-config-prettier desliga regras do ESLint que conflitam. Se ainda houver conflito, verifique se ele está no final do array extends e se não há regras manuais conflitantes.
Prettier funciona com TypeScript?
Sim. Instale o parser @typescript-eslint/parser e use o Prettier normalmente. Ele formata arquivos .ts e .tsx sem configuração extra.
Como rodar linter e formatter manualmente?
Use no terminal: npx eslint src/ --fix npx prettier --write src/ O flag --fix corrige automaticamente o que o ESLint puder arrumar.