Prettier.js

Prettier.js es una herramienta para formatear código fuente, lo que permite tener código consistente y mantenible, viene con reglas predefinidas que se aplican automáticamente, lo que elimina la necesidad de discutir las reglas sobre el estilo de código en el equipo.

Prettier.js es compatible con varios lenguajes como: JavaScript, TypeScript, HTML, CSS, JSON, Markdown, entre otros.

Prettier.js sirve para mantener un código limpio y uniforme en un proyecto, lo que facilita la lectura y el mantenimiento del mismo.

Utilizar Prettier.js

Instalación

Puedes instalar Prettier.js en tu proyecto usando npm:

npm install --save-dev --save-exact prettier

Configuración

Se puede personalizar Prettier.js con el archivo .prettierrc, el cual puede contener varios parámetros de configuración como:

Propiedad	Default	Descripción
printWidth	80	Especifica el número máximo de caracteres por línea.
tabWidth	2	Define el número de espacios que debe tener un tabulador.
useTabs	false	Define si se usa tabulaciones o espacios para la indentación.
singleQuote	false	Indica si se deben usar comillas simples o comillas dobles.
semi	true	Define si se agrega punto y coma al final de las declaraciones.
arrowParens	always	Define si los arrow-functions usan paréntesis con un parámetro.
endOfLine	lf	Controla qué carácter de fin de línea se debe usar.

Luego podríamos crear un archivo de configuración de ejemplo:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false
}

Si ya utilizas el archivo .editorconfig entonces Prettier tomará la configuración automáticamente.

Ignorar archivos

Es posible evitar que Prettier de formato a algunos archivos, esto se hace con el archivo .prettierignore donde se coloca la lista de archivos o carpetas que se desean ignorar:

dist/
node_modules/
src/scripts/vendor/

Uso en la línea de comandos

Puedes formatear archivos específicos usando la línea de comandos:

npx prettier --write scripts/header.js   # formatea el archivo header.js
npx prettier --write scripts/            # formatea los archivos de la carpeta scripts/
npx prettier --write .                   # formatea todos los archivos del proyecto

Integración con un Editor de Código

La mayoría de los editores de código tienen plugins para Prettier.js que permiten el formateo automático al guardar los archivos. En Visual Studio Code puedes instalar Prettier – Code formatter

Integración con ESLint

Si ya usas ESLint para la validación de código, puedes integrarlo con Prettier para evitar conflictos entre las reglas de ESLint y las de Prettier:

1. Instala los paquetes necesarios:

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

2. Configura ESLint para usar Prettier. En tu archivo .eslintrc.json, añade las siguientes configuraciones:

{
  "extends": ["plugin:prettier/recommended"]
}

Esto asegura que ESLint y Prettier trabajen juntos, donde Prettier maneja el formateo y ESLint se encarga de las reglas de código que Prettier no cubre.

Conclusión

Prettier.js es una herramienta poderosa para asegurar la consistencia del estilo de código en proyectos, mejorando la mantenibilidad y la colaboración en equipos de desarrollo. Su facilidad de uso e integración lo hacen un estándar de facto en muchos proyectos modernos. Considera incorporarlo en tu flujo de trabajo para beneficiarte de un código más limpio y organizado.

Referencias

• Prettier – Opinionated Code Formatter
• Options – Prettier
• eslint-plugin-prettier