Prettier: Cómo Formatear tu Código

Prettier es una herramienta que se usa para dar formato a tu código, siendo una de las mejores opciones cuando quieres obtener un estilo de programación consistente tanto en el caso de que trabajes con un equipo como en el caso de que trabajes solo en un proyecto. Además, Prettier soporta una gran cantidad de lenguajes de programación, por lo que es una herramienta todo terreno.

Acerca de Prettier

Prettier se utiliza para formatear automáticamente tu código, soportando la sintaxis de una gran cantidad de lenguajes, entre los que están JavaScript, JSX, Flow, TypeScript, JSON, HTML, Vue, Angular, CSS, Less, SCSS, GraphQL, MarkDown, CommonMark, MDX y YAML.

Además, mediante varios plugins también soporta Apex, Elm, Java, PHP, PostgreSQL, Ruby, Swift, TOML y XML, entre otros.

Prettier es cada vez más popular, por lo que actualmente dispone de integraciones para los editores de texto e IDEs más utilizados, como por ejemplo VS Code, Visual Studio, Atom, Sublime, Vim, Emacs, PHPStorm o WebStorm.

Por qué usar Prettier

El uso de Prettier no solo es una buena idea en el marco de un equipo, sino también en tus proyectos personales, ya que el uso de un estilo consistente en tu código te inculcará un buen hábito. De hecho, una vez te acostumbres a formatear el código, seguramente comiences a tenerle manía al código que no sigue un formato.

Si usas lenguajes como Go, seguramente te habrás acostumbrado a formatear el código automáticamente mediante gofmt, que fuerza ciertos estilos en el código de todos los paquetes de Go en base a los estándares oficiales. Esto hace que el código sea muy fácil de mantener y además te fuerza a adaptarte a un estándar, te guste o no.

El caso es que el hecho de que todo el código siga un mismo estilo tiene sus ventajas. Además, esto facilita que que las personas que se inician en este lenguaje se adapten a usar una notación concreta para nombres de variables o funciones y cosas como la creación de sangrías al comienzo de cada línea mediante espacios en lugar de pulsar el tabulador. Esto es básicamente lo que se pretende con Prettier, siendo el motivo de que sea una herramienta más que habitual en muchas empresas. Lo que podría sonar como una limitación es realmente una ventaja.

Instalación de Prettier

Puedes ejecutar Prettier tanto desde la línea de comandos como desde algún IDE o editor que lo soporte. De hecho, si usas un editor que lo soporte, el mejor modo de usar Prettier siempre será desde el editor, configurando Prettier para que se ejecute cada vez que guardes un archivo.

Mediante la línea de comandos

Si quieres usarlo mediante la línea de comandos, podrás instalarlo mediante los gestores de paquetes Yarn o npm.

• Para instalar Prettier mediante npm:

  npm install --global prettier

• Para instalar Prettier mediante Yarn:

  yarn global add prettier

Ahora ya podrás formatear el código mediante el comando prettier archivo --write, siendo archivo el nombre de un archivo. También podrás usar una expresión como prettier "*/.js" --write, que formateará todos los archivos JavaScript.

Instalación en VS Code

También podrás usar Prettier con VS Code mediante el Plugin del que dispone. Para instalarlo sigue estos pasos:

1. Abre la paleta de comandos pulsando CTRL+SHIFT+P en Windows o CMD+SHIFT+P en Mac.
2. Busca «Extensions: Install Extensions» y haz clic en dicha opción cuando aparezca.
3. Introduce Prettier en el campo de búsqueda y haz clic «Prettier – Code formatter» para instalarlo.
4. Cuando la instalación finalice, cierra VS Code y vuelve a abrirlo.

Una vez instales Prettier bastará con que selecciones la opción Format Document en el menú que puedes desplegar haciendo clic derecho en el editor.

Diferencias entre Prettier y ESLint

ESLint es un linter, un tipo de herramienta que no solo se centra en en formato. A diferencia de ESLint, Prettier no te indicará en dónde existen errores de formato o cosas mejorables, como sí hace ESLint.

ESLint es mucho más configurable que Prettier, ya que cada desarrollador pude establecer sus propias reglas. Sin embargo, Prettier ya incluye como base dichas reglas. Esto no quiere decir que no puedes personalizar Prettier, pero las opciones no son muchas. Por ejemplo, con Prettier podrás configurar el número de espacios que se usan al inicio de cada línea, el tipo de comillas que se usan por defecto, ya sean simples o dobles, o el número máximo de caracteres que se usarán por línea.

El uso de Prettier junto con ESLint es también muy habitual. Por un lado usas Prettier para formatear automáticamente el código y por otro usas ESLint para detectar errores.

Cómo utilizar Prettier

Puedes utilizar Prettier de muchas formas. Si usas la terminal, lo mejor que puedes hacer es ejecutar Prettier cada vez que hagas una PR de tu código a algún repositorio Git, como GitHub. Si usas un editor de texto compatible, podrás ejecuta Prettier manualmente o también automáticamente cuando guardes un archivo.

Si usas la extensión de VS Code de Prettier, que ya hemos visto cómo instalar en el apartado anterior, bastará con que hagas clic derecho y selecciones la opción Format Code.

Para ejecutar Prettier desde la línea de comandos debes usar el comando prettier. Por ejemplo, mediante el siguiente comando vamos a formatear todo del código de nuestros proyecto, que se encuentra en el directorio /src:

prettier --write src/**/*.js

También puedes configurar varias opciones;

• Si por ejemplo quieres eliminar los puntos y coma al final de cada línea, cosa que personalmente no me gusta, puedes usar la opción --no-semi:

  prettier --no-semi --write src/**/*.js

• Para establecer un número de caracteres máximo por línea, puedes usar la opción --print-width n, siendo n el número de caracteres máximo:

  prettier --print-width 80 --write src/**/*.js

• Para priorizar el uso de comillas simples, usa la opción --single-quote:

  prettier --single-quote --write src/**/*.js

•  Las comas al final de las líneas son válidas en muchos casos, aunque muchas veces no son necesarias. Para eliminarlas, aceptarlas o forzarlas, usa la opción --trailing-comma <es5|none|all>. En el siguiente ejemplo las vamos a eliminar:

  prettier --trailing-comma none --write src/**/*.js

Admeás, también puedes configurar Prettier en tu archivo package.json. Si quieres usar tanto Prettier como JSLint, puedes instalarlas ambas herramientas mediante el comando npm install --save-dev paquete, siendo paquete el nombre del paquete a instalar, o también agregar los paquetes dentro de devDependencies en tu archivo package.json:

"devDependencies": {
  "eslint": "*",
  "prettier": "*",
}

En caso de que uses React, puedes configurar también el plugin de Prettier para React:

"devDependencies": {
  "eslint": "*",
  "prettier": "*", 
  "babel-eslint": "*",
  "eslint-config-prettier": "*",
  "eslint-plugin-react": "*"
}

Si quieres, también puedes crear un archivo de configuración para Prettier. Para ello, crea un archivo llamado .prettierrc en la carpeta raíz de tu proyecto. Podrías agregar estas opciones:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80
}

Lo que hemos hecho es aceptar los puntos y coma, priorizar las comillas simples y establecer un máximo de 120 caracteres por línea.

Enlaces de interés

A continuación puedes encontrar varios enlaces de interes:

• Repositorio de Prettier en GitHub
• Paquete oficial de Prettier en npm
• Web oficial de Prettier

---