Como configurar ESLint e Prettier para uma base de código limpa em 2026

ESLint detecta problemas de código e aplica regras; Mais bonito formata automaticamente seu código de forma consistente. Juntos, eles mantêm uma base de código limpa, consistente e livre de erros – essencial para equipes e útil até mesmo sozinho. Este guia os configura corretamente e resolve os conflitos comuns entre eles.

O que cada ferramenta faz

A divisão: ESLint lida com a QUALIDADE do código (lógica, possíveis bugs), Prettier lida com a FORMATAÇÃO (sua aparência). Usar ambos, com formatação própria do Prettier, evita conflitos.

Instalação

# Install both plus the integration packages
npm install --save-dev eslint prettier
npm install --save-dev eslint-config-prettier
# eslint-config-prettier turns off ESLint rules that conflict with Prettier

Configuração ESLint (Configuração simples, 2026)

// eslint.config.js (flat config - the modern standard)
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2025,
      sourceType: 'module',
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'warn',
      'prefer-const': 'error',
      'eqeqeq': 'error',   // require === over ==
    },
  },
  prettier,   // MUST be last - disables ESLint rules that conflict with Prettier
];

Configuração mais bonita

// .prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}

# .prettierignore - files Prettier should skip
node_modules
dist
build
*.min.js
coverage

A chave: deixe uma formatação própria mais bonita

O erro clássico é fazer com que ESLint e Prettier tentem formatar o código – eles entram em conflito, brigando por aspas, ponto-e-vírgula e espaçamento. A correção éeslint-config-prettier, que desativa todas as regras de formatação ESLint para que Prettier cuide da formatação e ESLint cuide da qualidade do código. Adicione-o por último na configuração do ESLint para substituir regras conflitantes.

Scripts package.json

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

# Run them
npm run lint          # find problems
npm run lint:fix      # auto-fix fixable problems
npm run format        # format all files with Prettier
npm run format:check  # check formatting without changing (for CI)

Formato ao salvar (código VS)

// .vscode/settings.json - commit this so the whole team gets it
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

Com isso, salvar um arquivo o formata automaticamente com o Prettier e corrige automaticamente os problemas do ESLint. Código consistente com zero esforço manual.

Aplicar no Commit com Husky e lint-staged

npm install --save-dev husky lint-staged
npx husky init

// package.json - run linting/formatting only on staged files
{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,css}": "prettier --write"
  }
}

# .husky/pre-commit
npx lint-staged

Agora, cada commit lint e formata automaticamente os arquivos preparados – nenhum código não formatado ou com falha no lint entra no repositório.

Configuração do TypeScript

npm install --save-dev typescript-eslint

// eslint.config.js with TypeScript
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
  prettier,   // last
];

Perguntas Frequentes

P: Preciso do ESLint e do Prettier?
R: Eles servem a propósitos diferentes – ESLint para qualidade/bugs de código, Prettier para formatação. Usar ambos fornece um código limpo, consistente e que detecta bugs. Você pode usar o ESLint sozinho, mas a formatação automática do Prettier economiza muito tempo e elimina debates sobre formatação.

P: Por que ESLint e Prettier entram em conflito?
R: Ambos podem impor regras de formatação (aspas, ponto e vírgula, espaçamento) e discordam. A correção éeslint-config-prettier, que desativa as regras de formatação do ESLint para que Prettier possua a formatação e o ESLint possua a qualidade do código. Adicione-o por último na configuração do ESLint.

P: Devo executar o Prettier por meio do ESLint (eslint-plugin-prettier)?
R: Geralmente não – executar Prettier como uma regra ESLint é mais lento e adiciona rabiscos vermelhos para formatação. A configuração recomendada é executá-los separadamente: Prettier para formatação (formatar ao salvar), ESLint para qualidade, com eslint-config-prettier para evitar conflitos.

P: Como faço para aplicar isso em minha equipe?
R: Confirme os arquivos de configuração (eslint.config.js, .prettierrc, .vscode/settings.json) e configure Husky + lint-staged para confirmar a formatação automática. Adicionarformat:check elint para CI para que o código não formatado ou com falha não possa ser mesclado. Isso garante consistência independentemente das configurações individuais do editor.

P: O que é configuração simples e devo usá-la?
R: Flat config (eslint.config.js) é o formato de configuração ESLint moderno que substituiu o antigo .eslintrc. É o padrão e recomendado em 2026 – mais limpo, mais explícito e melhor para composição. Use-o para novos projetos.

Conclusão

ESLint e Prettier juntos mantêm sua base de código limpa e consistente. A configuração:instale ambos maiseslint-config-prettier, deixe a formatação própria do Prettier e a qualidade do código do ESLint, adicione eslint-config-prettier por último para evitar conflitos, habilite a formatação ao salvar no VS Code e aplique o commit com Husky e lint-staged. O principal insight é separar as preocupações – formatos mais bonitos, o ESLint detecta problemas – e usar eslint-config-prettier para que não briguem. Depois de configurado, seu código é automaticamente consistente e limpo, sem nenhum esforço manual, eliminando debates sobre formatação e detectando bugs antes de serem enviados. É um pequeno investimento de configuração que compensa em cada arquivo que você escreve.