Cuarto artículo de esta serie sobre herramientas orientadas a la experiencia de desarrollador revisamos Prettier.

Puedes encontrar los artículos previos en:

¿Qué es Prettier?

En resumen y muy acotado, Prettier es un formateador automático de código. ¿Qué quiere decir esto?

Escribir código es una acción humana y como tal hay opiniones sobre como se debe escribir este código y no solamente desde el punto de vista algorítmico o técnico, si no, incluso se crean discusiones sobre estilos de "escritura" (Famosa es la "guerra sagrada" sobre si usar o no ; es JavaScript o tabs vs espacios).

Al trabajar en un proyecto de código que incluya a más de una persona estas discusiones sobre como debería escribirse o no el código (guía de estilo) pueden mermar la productividad del equipo enfrascándose en nimiedades que pueden tornarse bastante molestas, por ejemplo, al revisar un pull-request. Las diferencias de estilo se mostrarán como cambios que en efecto no son parte del real desarrollo que se intenta lograr.

Prettier busca solucionar esto otorgando una serie de configuraciones y opiniones sobre esta guía de estilo.

Prettier ofrece soporte para múltiples lenguajes y frameworks.

  • Javascript
  • JSX
  • Angular
  • Vue
  • Typescript
  • CSS
  • HTML
  • JSON
  • Graphql
  • Markdown
  • YAML

Lo que ofrece Prettier es tomar tu código y "re-formatearlo" en base a las configuraciones definidas manteniendo así un estilo consistente.

Uno de los casos más comunes que podemos usar como ejemplo es el largo de la definición de una función:

function calcularMuchosArgumentos(unaVariableMuyLarga, otraVariableConUnNombreDeclarativo) 

Prettier tomará este trozo de código y automáticamente lo re-escribirá como

function calcularMuchosArgumentos(
    unaVariableMuyLarga,
    otraVariableConUnNombreDeclarativo
)

Haciéndolo mucho más legible y sin intervención nuestra ni preocupación de como lo escribes inicialmente.

Finalmente, lo que Prettier otorga es una forma sencilla y automatizada de definir un estilo de código en todo tu proyecto ya que simplemente desecha el estilo original (el que fue escrito por un desarrollador) al re-escribirlo bajo las reglas y configuraciones definidas.

¿Por qué querrías usar Prettier?

Algo dejé entrever en el párrafo anterior. Definir una guía de estilo única en el proyecto que permita evitar discusiones innecesarias sobre cómo escribir código y evite conflictos a la hora de revisar cambios en el código.

Pero hay algunas otras ventajas como por ejemplo:

  • Ayudar a los nuevos desarrolladores del equipo. Quienes llegan a unirse a un equipo que ya lleva un tiempo trabajando no tendrán que aprender las reglas de estilo del equipo y acostumbrarse a nuevas formas de escribir su trabajo, evitando así gastar tiempo en tomar nuevos hábitos.
  • Enfoque: Al usar una herramienta como prettier es fácil notar que tendrás un poco más de tiempo para enfocarte en lo que realmente importa en tu trabajo: escribir código sin preocuparte de formatear o estilizar lo que escribiste. Prettier tiene integraciones con la gran mayoría de editores de texto por lo que el formateo es completamente no-intrusivo y automático.
  • Fácil adopción: Integrar Prettier en tu proyecto es sencillo y no generará cambios bruscos que debas tener en cuenta.

¿Qué diferencia hay entre Prettier y un linter cómo ESLint?

Es fácil asociar el trabajo de Prettier y ESLint, pero en realidad difieren en su objetivo

Si quieres saber más sobre que es ESLint, como funciona y como instalarlo revisa este artículo de la serie.

En pocas palabras, el trabajo de un linter como ESLint es encontrar bugs y el de Prettier formatear el código.

Por ejemplo, ESLint tiene reglas para mejorar la calidad del código cómo: no-unused-vars, no-await-in-loop, no-dupe-args, etc. Prettier no tiene nada que hacer con este tipo de reglas, ya que están relacionadas a una tarea diferente.

¿Cómo instalar Prettier?

Prettier es un paquete que puedes encontrar en npm

Para saber más sobre que es NPM te invito a revisar este artículo de la serie

Comienza por abrir tu terminal e instalar Prettier localmente en tu proyecto

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

Luego deberás crear un archivo de configuración para que así el editor de texto que utilizas sepa que Prettier está disponible.

echo {} > .prettierrc.json

Además, es buena idea configurar un archivo .prettierignore que te permitirá indicarle a Prettier que archivos no formatear.

# Ignore artifacts:
build
coverage
static
Este archivo es muy parecido e incluso a veces idéntico a tu archivo .gitignore o .eslintignore

Con esto Prettier ya está disponible para su uso, puedes comenzar por formatear todos tus archivos utilizando, nuevamente la terminal

npx prettier --write .

Si tienes muchos archivos esto puede tomar un tiempo, ahora es buen momento para configurar tu editor de texto favorito para que trabaje con Prettier  momento de guardar los archivos o mediante alguna combinación de teclas.

Puedes revisar la documentación de cada editor o este listado en el sitio oficial de Prettier sobre la Integración con Editores

Tips

Es común tener varias herramientas trabajando en tu proyecto, por lo que es importante configurar todo para que "jueguen bien", una de esas configuraciones es permitir que ESLint y Prettier trabajen en conjunto sin interponerse (algunas reglas pueden sobreponerse). Para ello existe un plugin eslint-config-prettier que permite que ESLint deshabilite las reglas que pueden chocar con Prettier

Puedes instalarlo utilizando la terminal

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

Luego tendrás que añadir algunas configuraciones a tu configuración es ESLint.

{
    "extends": [
    	"prettier"
    ]
}

También es buena idea permitir que Prettier funcione con tus acciones relacionadas con Git

Una forma de reforzar el uso de Prettier en el equipo es que se ejecute automáticamente al momento de "guardar" tu código en tu repositorio (hacer commit). La idea es asegurarte que todos los archivos que fueron modificados sean formateados por Prettier. Para esto debes instalar algunas herramientas y configurar tu archivo package.json

npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

Finalmente, edita tu archivo package.json y agrega

{
    "lint-staged": {
        "**/*": "prettier --write --ignore-unknown"
    }
}

En resumen, en este artículo hemos revisado que es y como funciona Prettier, también el razonamiento de porque querrías utilizarlo para evitar problemas de guías de estilo.

También revisamos como instalar localmente Prettier en tu proyecto, configurar .prettierrc.json y el archivo `.prettierigore`.

Finalmente, vimos como configurar para que ESLint y Prettier funcionen en conjunto.

Footer-Social-Card
✉️ Únete a Micro-bytes
newsletter de micro cursos