Configuración de Prettier

Instala y configura Prettier para un formateo de código consistente en tu proyecto React y Next.js.

Receta

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

# Instala Prettier
npm install --save-dev prettier
 
# Comprueba el formateo (compatible con CI, sale con error en violaciones)
npx prettier --check .
 
# Formatea todos los archivos
npx prettier --write .
 
# Formatea archivos específicos
npx prettier --write "src/**/*.{ts,tsx,css,json}"

Cuándo usarlo: Cada proyecto con más de un colaborador, o cualquier proyecto donde quieras dejar de debatir el estilo de código.

Ejemplo de Trabajo

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

# .prettierignore
node_modules/
.next/
out/
coverage/
pnpm-lock.yaml
package-lock.json
*.min.js

// scripts de package.json
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

// .vscode/settings.json (formateo al guardar)
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Lo que esto demuestra:

• .prettierrc con configuración recomendada para proyectos React/Next.js
• .prettierignore para omitir la salida de compilación y archivos de bloqueo
• scripts de npm para formateo y comprobación
• Configuración de formateo al guardar en VS Code

Análisis Profundo

Cómo Funciona

• Prettier es un formateador de código opinionado - analiza tu código e lo reimprimo con un estilo consistente
• Admite TypeScript, JSX, CSS, JSON, Markdown y más fuera de la caja
• El archivo .prettierrc controla las opciones; la mayoría de los equipos solo cambian algunos valores predeterminados
• --check sale con un código distinto de cero cuando los archivos no están formateados (usar en CI)
• --write formatea archivos en su lugar

Variaciones

Opciones clave explicadas:

Clasificación de clases Tailwind CSS:

npm install --save-dev prettier-plugin-tailwindcss

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Este plugin ordena automáticamente las clases de Tailwind en el orden recomendado.

Formatos de archivo de configuración admitidos:

• .prettierrc (JSON)
• .prettierrc.json
• .prettierrc.js o .prettierrc.cjs
• .prettierrc.mjs
• prettier.config.js
• clave "prettier" en package.json

Notas de TypeScript

// Prettier maneja el formateo de TypeScript fuera de la caja.
// No se requiere analizador adicional ni plugin para archivos .ts y .tsx.
 
// Formatea anotaciones de tipo, genéricos, interfaces y
// uniones de tipo consistentemente:
type Props = {
  name: string;
  age: number;
  onSubmit: (data: FormData) => void;
};

Trampas

Cosas que te morderán. Cada trampa incluye qué sale mal, por qué sucede y la solución.

• Conflictos con ESLint - Prettier y ESLint quieren controlar el formateo. Ejecutar ambos sin coordinación produce un bucle de corrección infinita. Solución: Usa eslint-config-prettier para desactivar las reglas de formateo de ESLint. Ver Integración de ESLint + Prettier.

• printWidth no es un límite estricto - Prettier trata printWidth como una guía, no como un máximo. Las cadenas largas, las importaciones y los props JSX pueden excederla. Solución: Acepta este comportamiento; Prettier optimiza para legibilidad, no para límites de columna estrictos.

• Formateo al guardar no funciona - VS Code puede estar usando un formateador predeterminado diferente. Solución: Establece "editor.defaultFormatter": "esbenp.prettier-vscode" y asegúrate de que la extensión esté instalada.

• .prettierignore es requerido - Sin él, Prettier formatea la salida de compilación, archivos de bloqueo y código generado. Solución: Siempre crea un archivo .prettierignore, o Prettier perderá tiempo en archivos que no te importan.

• El orden de carga del plugin importa - Si usas múltiples plugins de Prettier, pueden entrar en conflicto. Solución: prettier-plugin-tailwindcss siempre debe estar al final en el array plugins.

Alternativas

Otras formas de resolver el mismo problema - y cuándo cada una es la mejor opción.

Preguntas Frecuentes

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

npm install --save-dev prettier-plugin-tailwindcss

{ "plugins": ["prettier-plugin-tailwindcss"] }

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "endOfLine": "lf"
}

npx prettier --write "src/**/*.{ts,tsx,css,json}"

Relacionado

• Integración de ESLint + Prettier - hace que ESLint y Prettier funcionen juntos
• EditorConfig & Configuración de VS Code - consistencia entre editores
• Husky & lint-staged - formateo al commit
• Linting en CI/CD - aplicar formateo en CI