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.
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>