Integración de Prettier

Prettier impone un formato consistente para que la revisión de código se centre en el comportamiento, no en los puntos y comas o los saltos de línea.

Receta

Tarjeta de receta de referencia rápida: lista para copiar y pegar.

npm install -D prettier eslint-config-prettier

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

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

Cuándo usarlo:

• Los debates sobre el formato ralentizan las PR.
• Quieres que ESLint maneje la lógica y Prettier el estilo.
• Los colaboradores usan diferentes editores pero un solo estilo de salida.

Ejemplo de trabajo

// 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

Lo que esto demuestra:

• eslint-config-prettier deshabilita las reglas estilísticas de ESLint que entran en conflicto con Prettier.
• lint-staged formatea solo los archivos staged al hacer commit.
• format:check se ejecuta en CI sin modificar archivos.

Inmersión profunda

Cómo funciona

• Prettier analiza y reimprime el código con reglas deterministas.
• ESLint se ejecuta después de Prettier en pre-commit para detectar problemas de lógica en el código formateado.
• La función "formato al guardar" del editor llama a Prettier a través de la extensión de VS Code/Cursor.
• CI usa --check para fallar las PR con diferencias sin formato.

Configuración de VS Code (commitida o documentada)

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

Notas de TypeScript

• Prettier no realiza comprobación de tipos; combínalo con tsc --noEmit en CI.
• JSON y Markdown en los repositorios también se benefician de Prettier; inclúyelos en el script format.

Errores comunes

• Plugins estilísticos de ESLint con Prettier - Conflictos de formato duplicados. Solución: usa eslint-config-prettier, elimina los plugins estilísticos de ESLint.
• Formatear todo el repositorio en una sola PR - git blame ruidoso. Solución: adopta Prettier temprano; usa un commit de formato único con .git-blame-ignore-revs.
• Husky omitido con --no-verify - El código incorrecto aún puede ser commitido. Solución: aplica format:check y lint en CI independientemente de los hooks.
• Diferentes versiones de Prettier localmente vs. CI - Bloquea Prettier en devDependencies; usa npm ci.
• Archivos generados formateados - La salida de Swagger cambia en cada build. Solución: agrega dist/, openapi.json a .prettierignore.

Alternativas

Preguntas frecuentes

Relacionado

• Conceptos básicos de Linting - Fundamentos de la configuración plana de ESLint
• Mejores prácticas de Linting - Política de cero advertencias y CI
• Comprobación de tipos en CI - Puerta separada del formato

Versiones de la pila: Esta página fue escrita para Node.js 24.18.0 (LTS activa), npm 10+, TypeScript 5.6+, Express 5, Fastify 5 y NestJS 11.