Prettier

Prettier es un formateador de código. Lee tu archivo, lo entiende como código (no como texto) y lo vuelve a escribir desde cero aplicando siempre el mismo estilo.

Qué hace exactamente

Prettier no cambia lo que hace tu código. Solo cambia cómo se ve: dónde van los saltos de línea, cuántos espacios de sangrado, si las cadenas usan comillas simples o dobles, si hay punto y coma al final.

Antes

const usuario = {nombre:"Ana",  edad:30,
    activo: true};
function saludar( nombre ) { return "Hola "+nombre; }

Después de Prettier

const usuario = { nombre: 'Ana', edad: 30, activo: true }
function saludar(nombre) {
  return 'Hola ' + nombre
}

La ventaja real no es la estética

Es que se deja de discutir. Nadie revisa un Pull Request comentando “pon un espacio aquí”, porque el formato no lo decide una persona: lo decide un archivo de configuración. Y los git diff solo muestran cambios reales.

Cómo se usa

# Formatear archivos y guardarlos
npx prettier --write "**/*.{js,ts,vue,json,css,md}"

# Solo comprobar si algo está mal formateado (no escribe nada)
npx prettier --check .

En la práctica casi nunca se lanza a mano: se ejecuta al guardar en el editor y, dentro de ESLint, en el pre-commit.

La configuración: .prettierrc

Prettier tiene muy pocas opciones a propósito. Esta es la configuración que usamos en los proyectos front:

.prettierrc

{
  "printWidth": 120,
  "singleQuote": true,
  "bracketSpacing": true,
  "semi": false,
  "tabWidth": 2
}

Opción	Valor	Qué significa
printWidth	120	Ancho máximo de línea antes de partirla. El valor por defecto de Prettier es 80; lo subimos a 120 porque las plantillas de Vue y las clases de Tailwind son largas y partirlas cada 80 caracteres las hace ilegibles.
singleQuote	true	Usa 'texto' en lugar de "texto" en JS/TS.
bracketSpacing	true	Espacios dentro de las llaves de objeto: { nombre: 'Ana' } en lugar de {nombre: 'Ana'}.
semi	false	No añade punto y coma al final de cada sentencia.
tabWidth	2	Dos espacios por nivel de sangrado.

singleQuote no afecta al HTML de los .vue

singleQuote: true se aplica a JavaScript y TypeScript. Los atributos del <template> siguen usando comillas dobles — de hecho ESLint lo fuerza explícitamente con la regla vue/html-quotes: ['error', 'double']. Es intencionado: es la convención de HTML.

Integración con el editor

En VS Code hace falta la extensión Prettier - Code formatter (esbenp.prettier-vscode). Con esto en settings.json el archivo se formatea cada vez que guardas:

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

prettier.requireConfig: true es importante: hace que la extensión solo actúe si el proyecto tiene un .prettierrc. Así evitas formatear con tus preferencias personales un repositorio ajeno que no usa Prettier.

Relación con ESLint

Prettier y ESLint pueden pisarse: los dos tienen opinión sobre espacios y saltos de línea. La solución que aplicamos es la estándar y consta de dos paquetes:

• eslint-config-prettier: apaga todas las reglas de ESLint que se solapan con Prettier. Prettier gana en materia de formato.
• eslint-plugin-prettier: convierte a Prettier en una regla más de ESLint (prettier/prettier). Un archivo mal formateado deja de ser “un detalle” y se reporta como error de lint.

La consecuencia práctica es que eslint --fix también formatea con Prettier. Por eso en .lintstagedrc no hay una entrada para Prettier: ya va dentro de ESLint. Ver ESLint para el detalle.