Integração com Prettier

O Prettier garante uma formatação consistente para que a revisão de código foque no comportamento, não em ponto e vírgulas e quebras de linha.

Receita

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

npm install -D prettier eslint-config-prettier

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "printWidth": 100
}

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

Quando usar isso:

• Debates de formatação atrasam PRs.
• Você quer que o ESLint cuide da lógica e o Prettier cuide do estilo.
• Contribuidores usam editores diferentes, mas um único estilo de saída.

Exemplo de Trabalho

// eslint.config.js
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import eslintConfigPrettier from "eslint-config-prettier";
 
export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  eslintConfigPrettier,
  { ignores: ["dist/**"] }
);

// package.json
{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  },
  "devDependencies": {
    "prettier": "^3.4.0",
    "eslint-config-prettier": "^9.1.0",
    "husky": "^9.1.0",
    "lint-staged": "^15.2.0"
  }
}

// lint-staged.config.js
export default {
  "*.{ts,json,md}": ["prettier --write"],
  "*.ts": ["eslint --fix"],
};

npx husky init
echo "npx lint-staged" > .husky/pre-commit

O que isso demonstra:

• eslint-config-prettier desabilita regras de estilo do ESLint que entram em conflito com o Prettier.
• lint-staged formata apenas os arquivos em staging no momento do commit.
• format:check é executado em CI sem modificar arquivos.

Mergulho Profundo

Como Funciona

• O Prettier analisa e reimprime o código com regras determinísticas.
• O ESLint é executado após o Prettier no pré-commit para capturar problemas de lógica em código formatado.
• A configuração "formatar ao salvar" do editor chama o Prettier através da extensão do VS Code/Cursor.
• A CI usa --check para falhar PRs com diffs não formatados.

Configurações do VS Code (commitadas ou documentadas)

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Notas sobre TypeScript

• O Prettier não faz verificação de tipos; use tsc --noEmit em CI.
• JSON e Markdown em repositórios também se beneficiam do Prettier - inclua no script format.

Armadilhas

• Plugins de estilo do ESLint com Prettier - Conflitos de formatação duplicados. Correção: use eslint-config-prettier, remova plugins de estilo do ESLint.
• Formatação do repositório inteiro em um único PR - Git blame barulhento. Correção: adote o Prettier cedo; use um commit de formatação único com .git-blame-ignore-revs.
• Husky pulado com --no-verify - Código ruim ainda pode ser enviado. Correção: force format:check e lint em CI, independentemente dos hooks.
• Versões diferentes do Prettier localmente vs CI - Trave o Prettier em devDependencies; use npm ci.
• Arquivos gerados formatados - Saída do Swagger muda a cada build. Correção: adicione dist/, openapi.json ao .prettierignore.

Alternativas

FAQs

Relacionado

• Noções Básicas de Linting - Fundação de configuração plana do ESLint
• Melhores Práticas de Linting - política de CI e zero warnings
• Verificação de Tipos em CI - portão separado da formatação

Versões da Stack: Esta página foi escrita para Node.js 24.18.0 (LTS Ativo), npm 10+, TypeScript 5.6+, Express 5, Fastify 5 e NestJS 11.