Cómo usar Prettier.js para mantener el Código Fuente Mantenible

17/09/2024 | Clean Code, JavaScript | 0 comentarios

Prettier.js garantiza un estilo de código consistente. Aprende a usarlo para optimizar tu flujo de trabajo y mantener un código más limpio.


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:

PropiedadDefaultDescripción
printWidth80Especifica el número máximo de caracteres por línea.
tabWidth2Define el número de espacios que debe tener un tabulador.
useTabsfalseDefine si se usa tabulaciones o espacios para la indentación.
singleQuotefalseIndica si se deben usar comillas simples o comillas dobles.
semitrueDefine si se agrega punto y coma al final de las declaraciones.
arrowParensalwaysDefine si los arrow-functions usan paréntesis con un parámetro.
endOfLinelfControla 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

Envíar Comentario

En este sitio los comentarios se publican previa aprobación del equipo de Kodetop. Evita los comentarios ofensivos, obscenos o publicitarios. Si deseas publicar código fuente puedes hacerlo entre las etiquedas <pre></pre>