O que são ESLint e Prettier?
ESLint é um analisador estático de código JavaScript que identifica e reporta padrões problemáticos, enquanto Prettier é um formatador de código opinionado que padroniza automaticamente a estrutura do seu código. A diferença fundamental: ESLint encontra problemas (variáveis não usadas, comparações perigosas), Prettier ajusta a aparência (espaçamento, aspas, ponto e vírgula).
Trabalhar com ambas as ferramentas juntas é a prática profissional atual. ESLint garante qualidade e boas práticas; Prettier elimina debates sobre estilo. Juntas, elas formam uma pipeline robusta que melhora a manutenibilidade e reduz bugs em projetos colaborativos.
Instalação e Configuração
ESLint
Instale o ESLint em seu projeto:
npm install --save-dev eslint
npx eslint --init
O comando --init cria um arquivo .eslintrc.json. Aqui está uma configuração moderna:
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": ["eslint:recommended"],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
"no-console": "warn",
"eqeqeq": ["error", "always"],
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
Prettier
Instale o Prettier:
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
Crie um arquivo .prettierrc.json:
{
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always"
}
Atualize .eslintrc.json para integrar Prettier:
{
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
Regras Práticas do ESLint
Configurando Regras Essenciais
As regras do ESLint controlam comportamentos. Há três níveis: off (desabilitado), warn (aviso) e error (erro). Para um projeto profissional, configure as regras mais importantes:
{
"rules": {
"no-var": "error",
"prefer-const": "error",
"no-implicit-globals": "error",
"no-eval": "error",
"no-throw-literal": "error",
"no-param-reassign": "warn",
"consistent-return": "error"
}
}
Exemplo Prático
Dado este código problemático:
var x = 10;
function calcular(num) {
if (num > 5) {
return num * 2;
}
// falta return aqui
}
var resultado = eval("5 + 5");
obj.props = "novo valor"; // reatribuição de parâmetro
ESLint reportaria:
- no-var: Use const ou let, não var
- prefer-const: x nunca muda, use const
- consistent-return: Nem todos os caminhos retornam valor
- no-eval: Nunca use eval
O código corrigido:
const x = 10;
function calcular(num) {
if (num > 5) {
return num * 2;
}
return null;
}
const resultado = 5 + 5;
Formatação com Prettier e Integração
Por que Prettier Importa
Prettier resolve conflitos de estilo automaticamente. Não há discussões sobre aspas simples vs. duplas ou espaçamento. Ele formata o código inteiro consistentemente, economizando tempo em code reviews.
Execute Prettier para formatar:
npx prettier --write .
Exemplo antes e depois:
// ANTES (desorganizado)
const obj={name:"João",age:25,skills:["JS","React"]}
function saudacao(nome,idade){
console.log(`Olá, ${nome}! Você tem ${idade} anos`)
}
// DEPOIS (após prettier)
const obj = {
name: "João",
age: 25,
skills: ["JS", "React"],
};
function saudacao(nome, idade) {
console.log(`Olá, ${nome}! Você tem ${idade} anos`);
}
Integração no Workflow
Adicione scripts ao package.json:
{
"scripts": {
"lint": "eslint . --ext .js,.jsx",
"lint:fix": "eslint . --ext .js,.jsx --fix",
"format": "prettier --write .",
"check": "prettier --check ."
}
}
Configure um hook pré-commit com husky:
npm install --save-dev husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npm run lint && npm run format"
Arquivo .lintstagedrc.json:
{
"*.{js,jsx}": ["eslint --fix", "prettier --write"],
"*.{json,md}": ["prettier --write"]
}
Agora, a cada commit, seu código será automaticamente verificado e formatado.
Conclusão
ESLint e Prettier são ferramentas complementares essenciais para desenvolvimento JavaScript profissional. ESLint garante qualidade, detectando padrões perigosos e erros lógicos; Prettier padroniza a formatação, eliminando debates estéreis. Juntos, eles criam um ambiente onde o código é consistente, seguro e fácil de manter. A configuração inicial leva minutos, mas o retorno em qualidade e produtividade justifica amplamente o investimento.