Cuando trabajamos en equipo —o incluso solos en proyectos grades— mantener un estilo consistente en el código es más complicado de lo que parece. Cada quien tiene su forma de indentar, escribir comas, espaciar funciones o usar saltos de línea. Y aunque parezca trivial, estas diferencias pueden terminar consumiendo tiempo en las revisiones de código.

Es ahí donde entra Prettier. No es un linter ni un analizador de errores; es un formateador automático que decide por nosotros cómo debe ser formateado el código.

Qué hace Prettier

Prettier toma nuestro código fuente —JavaScript, TypeScript, HTML, CSS, JSON y varios otros— y lo reescribe siguiendo un conjunto de reglas predefinidas.

Veamos un ejemplo rápido.

Código antes de formatear con Prettier:

function saludar(nombre){console.log("Hola, "+nombre+"!")}

Después de aplicar Prettier:

function saludar(nombre) {
  console.log("Hola, " + nombre + "!");
}

Aunque parezca una diferencia mínima, cuando el proyecto crece y varios archivos están involucrados, esa coherencia empieza a ganar importancia.

Instalar Prettier

Si usamos npm, podemos instalar Prettier como dependencia de desarrollo:

npm install --save-dev prettier

Luego podemos agregar un script en el package.json para facilitar su uso:

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

Con eso, simplemente ejecutamos npm run format (o su equivalente) y Prettier se encarga del resto.

Cómo lo integramos en nuestro flujo

Una de las ventajas de Prettier es que se adapta fácilmente a distintos entornos. Lo más común es usarlo junto con Git, editores de texto como Visual Studio Code o incluso como parte del pipeline de CI.

Algunas formas prácticas de integrarlo:

• Con extensiones en el editor: VSCode, WebStorm, Sublime y otros tienen extensiones oficiales. Podemos configurarlo para que formatee al guardar.
• En el terminal: ejecutando npx prettier --write . formateamos todos los archivos de un proyecto.
• Pre-commits con Husky: bloqueamos commits que no estén formateados antes de hacer commit en Git.
• Junto a ESLint: aunque hacen cosas distintas, pueden trabajar en conjunto. De hecho, hay plugins que integran ambos para evitar conflictos.

Configurarlo es bastante simple. Por ejemplo, un .prettierrc básico podría verse así:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "es5"
}

¿Vale la pena?

La respuesta corta: sí, en la mayoría de los casos.

Nos ahorra tiempo. Reduce los conflictos en pull requests. Hace que el código sea más legible para todos. Y lo más importante: nos obliga a soltar el control sobre decisiones que no afectan la lógica ni el funcionamiento del programa.

Además, en ocasiones en las que no nos gusta cómo Prettier acomoda cierta expresión, podemos usar comentarios para ignorar líneas específicas:

// prettier-ignore
const texto = "esto     tiene     espacios     raros";

Conclusión

Pettrier es una herramienta bastamente probada en grandes aplicaciones del mundo real. Tiene un sinfin de reglas para configurar y es fácilmente integrable en la mayoría de frameworks en JavaScript o proyectos Node.