Prettier

Prettier es una herramienta que nos permite formatear nuestro código. Podemos establecer estas reglas a nuestro antojo aunque no tiene muchas opciones. Su uso no es únicamente personal si no que también es una gran idea utilizarlo en equipos de trabajo ya que hace que haya un estilo consistente de código. Cabe destacar que es una opinión personal. No es necesario que un equipo tenga que seguir el mismo tipo de formateo de código.

Instalación:

Vamos a añadir Prettier con un proyecto de React con TypeScript por lo que utilizaremos create-react-app:

npx create-react-app prettier-installation --template typescript

Instalamos Prettier:

npm install -D --save-exact prettier

Reglas:

En la raíz de nuestro proyecto creamos un fichero llamado .prettier.json . Añadiremos las siguientes reglas a nuestro archivo:

{
  "printWidth": 110,
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "tabWidth": 2,
  "arrowParens": "always"
}

IDE:

Dependiendo del IDE que estemos utilizando debemos descargar el plugin de Prettier para una mejor sinergia. En mi caso utilizo Visual Studio Code:

1. Vamos a la pestaña de extensiones (Ctrl + Shift + X).
2. Buscamos Prettier - Code formatter y lo instalamos.

Como utilizar Prettier:

Menu contextual:

De esta forma al hacer click derecho sobre el documento podremos utilizar la opción Format Document para darle formato.

Al guardar:

Tenemos la posibilidad de que Prettier se ejecute al guardar el fichero que estemos utilizando.

// Activar
"editor.formatOnSave": true,
// Permitir por lenguaje
"[javascript]": {
    "editor.formatOnSave": true
}

Desde el proyecto:

Añadir el siguiente script a nuestro package.json:

"format": "prettier --write src/**/*.js"

O ejecutarlo directamente desde nuestra terminal:

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

Aunque esto pueda parecer que no tiene sentido ya que podemos hacerlo de forma automática al guardar, Prettier se puede ejecutar con herramientas como Husky o Lint-staged para corregir posibles errores antes de subir nuestro código a nuestro repositorio.

En ambos caso únicamente se utiliza Prettier para todos los ficheros .js dentro de src

Prettier vs ESLint:

ESLint es un linter, esto quiere decir que es una herramienta que no solo da formato, si no que además comprueba y nos indica los errores o cosas a mejorar de nuestro código. ESLint es más configurable que Prettier, pero éste último tiene únicamente se centra en formatear el código según las reglas por defecto o las nuestras propias sin importar los errores.

Enlaces:

• Web oficial
• Reglas