Configurar Prettier en Angular junto con ESLint es la forma más rápida de estandarizar el formato de código en tu equipo y evitar commits que solo cambian comillas o espacios. Aquí aprendes a instalarlo, automatizarlo y hacerlo convivir con el linter sin conflictos.

Por qué necesitas Prettier además de ESLint

ESLint y Prettier hacen cosas distintas, aunque a veces se confundan. ESLint analiza malas prácticas, accesibilidad y calidad de escritura, mientras que Prettier se encarga del formato visual del código: espacios, tabs, saltos de línea y orden de atributos.

La propia documentación de ESLint lo aclara: él no es un formateador y recomienda apoyarte en una herramienta dedicada [01:30]. Prettier es el estándar más usado en la industria para JavaScript, TypeScript, React, Vue y Angular, sin importar si trabajas en backend o frontend.

¿Cuál es la diferencia entre ESLint y Prettier? ESLint revisa la calidad y buenas prácticas del código. Prettier estandariza el formato visual. Se usan juntos: uno cuida qué escribes, el otro cómo se ve.

El problema real es humano. Cada desarrollador escribe distinto, y a veces el editor de código cambia espacios o tabs solo con abrir un archivo. Sin un formateador común, terminas con commits que no aportan valor al proyecto.

Cómo instalar Prettier como dependencia de desarrollo

La instalación se hace desde la terminal con un comando simple. Como Prettier solo se usa mientras desarrollas, lo guardas como devDependency con el flag -D.

bash npm install prettier -D

Una vez instalado, lo ideal es automatizar su ejecución con un script en package.json, igual que ya tienes uno para lint [03:30]. Abre tu package.json y agrega el comando dentro de scripts:

"format": "prettier --write ./src"

Dos detalles importantes sobre este comando:

• El flag --write aplica los cambios automáticamente, similar al --fix de ESLint.
• Sin --write, Prettier solo te muestra los errores sin corregirlos.
• Apuntar a ./src limita el formateo al código del proyecto y deja fuera archivos de configuración.

Ahora puedes ejecutar npm run format y verás cómo Prettier ajusta espacios, tabs y estructura en todos tus archivos de una sola pasada.

Qué cambios aplica Prettier en tu código Angular

Al correr el formateador por primera vez, los cambios pueden parecer muchos, pero la mayoría son ajustes de homogeneidad. En archivos como app.routes.ts, Prettier unifica espacios y tabs que estaban inconsistentes.

Donde más se nota la mejora es en HTML. Una buena práctica que Prettier aplica automáticamente: cuando un tag tiene varios atributos, los separa uno por línea en lugar de dejarlos en una sola línea larga [06:30]. Esto facilita los code reviews y la lectura general.

html <img src="..." alt="..." width="..." height="..." />

Las versiones recientes de Prettier también soportan la nueva sintaxis de Angular, así que tu control flow moderno (@if, @for) queda bien organizado sin esfuerzo extra.

Cómo personalizar las reglas con un archivo de configuración

Prettier usa un estándar de la industria por defecto, pero puedes ajustarlo a las preferencias de tu equipo creando un archivo .prettierrc.json en la raíz del proyecto.

Ejemplo de configuración personalizada:

{ "tabWidth": 2, "useTabs": false, "singleQuote": true }

Algunas decisiones comunes que verás en distintos equipos:

• Equipos que vienen de Python suelen preferir tabWidth: 4.
• En JavaScript y HTML el estándar es 2 espacios.
• La elección entre tabs o espacios depende del consenso interno.

¿Es obligatorio crear un archivo .prettierrc? No. Prettier funciona sin configuración con valores por defecto. Solo lo creas si quieres reglas distintas al estándar.

Lo importante no es qué reglas elijas, sino que todo el equipo escriba con la misma convención.

Cómo integrar Prettier y ESLint sin conflictos

ESLint y Prettier son proyectos independientes y a veces sus reglas chocan. La solución es instalar tres paquetes adicionales que los hacen convivir [09:30].

bash npm install prettier-eslint eslint-config-prettier eslint-plugin-prettier -D

Qué hace cada uno:

• eslint-config-prettier: desactiva las reglas de ESLint que entran en conflicto con Prettier.
• eslint-plugin-prettier: ejecuta Prettier como una regla de ESLint para que veas los errores de formato directamente en el linter.
• prettier-eslint: facilita la integración entre ambos.

Después de instalar, abre tu archivo eslint.config.js y agrega la importación del plugin recomendado:

javascript import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';

Luego aplica esta configuración tanto a los archivos TypeScript como a los de HTML dentro del array de configs del linter. Con esto, ESLint y Prettier trabajan en conjunto sin pisarse las reglas.

¿Por qué Prettier y ESLint generan conflictos? Porque ambos pueden tener reglas sobre comillas, punto y coma o espacios. El paquete eslint-config-prettier desactiva las reglas duplicadas en ESLint para que solo Prettier las controle.

Configurar estas dos herramientas no es lo más avanzado de Angular, pero sí una de las mejores prácticas de ingeniería para que tu equipo escriba código consistente, legible y con commits que realmente aporten valor.

¿Cómo manejas tú el formato en tus proyectos Angular? Cuéntame en los comentarios qué reglas personalizadas usas con tu equipo.