Integração ESLint + Prettier

Faça ESLint e Prettier trabalharem juntos sem conflitos, separando responsabilidades: ESLint para qualidade de código, Prettier para formatação.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

# Instale o pacote de compatibilidade
npm install --save-dev eslint-config-prettier
 
# É só isso - não precisa de eslint-plugin-prettier

// scripts do package.json (execute-os separadamente)
{
  "scripts": {
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "check-all": "npm run format:check && npm run lint"
  }
}

Quando usar isso: Qualquer projeto que use tanto ESLint quanto Prettier (o que é a maioria dos projetos React/Next.js).

Exemplo de Trabalho

// eslint.config.mjs
import { FlatCompat } from "@eslint/eslintrc";
import { dirname } from "path";
import { fileURLToPath } from "url";
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
 
const compat = new FlatCompat({ baseDirectory: __dirname });
 
const eslintConfig = [
  ...compat.extends(
    "next/core-web-vitals",
    "next/typescript",
    "prettier", // Deve ser o ÚLTIMO - desabilita as regras de formatação do ESLint
  ),
  {
    rules: {
      // Regras de qualidade de código (não de formatação) - estas não conflitarão
      "@typescript-eslint/no-unused-vars": [
        "error",
        { argsIgnorePattern: "^_" },
      ],
      "react-hooks/exhaustive-deps": "warn",
      "import/order": [
        "warn",
        {
          groups: ["builtin", "external", "internal"],
          "newlines-between": "always",
        },
      ],
    },
  },
];
 
export default eslintConfig;

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "plugins": ["prettier-plugin-tailwindcss"]
}

O que isso demonstra:

• eslint-config-prettier (o extend "prettier") desabilita todas as regras do ESLint que conflitam com o Prettier
• O ESLint lida apenas com a qualidade do código (variáveis não utilizadas, dependências de hook, ordem de importação)
• O Prettier lida apenas com a formatação (ponto e vírgula, aspas, indentação)
• Scripts npm separados para cada ferramenta

Análise Detalhada

Como Funciona

• O ESLint possui regras de formatação (ex: indent, semi, quotes) e regras de qualidade de código (ex: no-unused-vars, react-hooks/exhaustive-deps).
• O Prettier também controla a formatação, então as duas ferramentas brigam pelos mesmos arquivos.
• eslint-config-prettier desliga todas as regras do ESLint que o Prettier lida, eliminando conflitos.
• Ele deve ser o último item em extends para que sobrescreva todas as configs anteriores.

Variações

Por que NÃO usar eslint-plugin-prettier:

// ❌ Esta abordagem executa o Prettier dentro do ESLint
// eslint-plugin-prettier - NÃO recomendado
{
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
}

Problemas com esta abordagem:

• Cada problema de formatação aparece como um erro do ESLint, produzindo uma saída barulhenta.
• O linting se torna significativamente mais lento porque o Prettier é executado dentro do ESLint.
• Linhas vermelhas onduladas em cada problema de formatação poluem o editor.
• Duas ferramentas fazendo o mesmo trabalho no mesmo processo.

Abordagem recomendada: execute-os separadamente:

{
  "scripts": {
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "fix-all": "npm run lint:fix && npm run format"
  }
}

Abordagem de hook de pré-commit (o melhor dos dois mundos):

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,json,md}": ["prettier --write"]
  }
}

Notas sobre TypeScript

// Ambas as ferramentas funcionam perfeitamente em arquivos .ts e .tsx.
// O ESLint detecta problemas cientes de tipos:
const unused = "hello"; // @typescript-eslint/no-unused-vars ❌
 
// O Prettier cuida da formatação:
const obj = { a: 1, b: 2, c: 3 }; // Prettier controla espaçamento, vírgulas finais, etc.
 
// Sem sobreposição - cada ferramenta faz seu trabalho.

Armadilhas

Coisas que vão te morder. Cada armadilha inclui o que dá errado, por que acontece e a correção.

• A ordem da configuração importa - Se "prettier" não for o último item em extends, as regras de formatação do ESLint de configs subsequentes serão reativadas e entrarão em conflito. Correção: Sempre coloque "prettier" por último no seu array extends.

• Verificando conflitos - Você não tem certeza se uma regra conflita. Correção: Execute npx eslint-config-prettier 'src/**/*.tsx' para listar as regras que conflitam com o Prettier. A ferramenta CLI relata exatamente quais regras desativar.

• Formatação diferente em CI vs local - Se os desenvolvedores não tiverem formatação ao salvar habilitada, a CI detecta erros de formatação que eles nunca viram. Correção: Use Husky + lint-staged para formatar automaticamente antes de cada commit.

• A ordem de importação não é formatação - import/order é uma regra de qualidade de código que o Prettier não lida (o Prettier não reordena importações). Correção: Mantenha import/order no ESLint; ele não conflita com o Prettier. Alternativamente, use prettier-plugin-organize-imports.

Alternativas

Outras maneiras de resolver o mesmo problema - e quando cada uma é a melhor escolha.

FAQs

npx eslint-config-prettier 'src/**/*.tsx'

{
  "scripts": {
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "fix-all": "npm run lint:fix && npm run format"
  }
}

{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,json,md}": ["prettier --write"]
  }
}

npm run format:check && npm run lint

Relacionado

• Configuração do ESLint para Next.js - configuração base do ESLint
• Configuração do Prettier - configuração e opções do Prettier
• Husky & lint-staged - formatação automática no commit
• Linting em CI/CD - aplicar ambos na CI