Prettier y Husky

¿Que es Prettier?

Básicamente es un formateador de código

¿Para qué nos vale?

• Para mantener un estilo de código en toda la app
• Ayudas a los demás a poder leer tu código
• Evitas código mal formateado sin querer

¿Que es Husky?

Es una librería que nos permite configurar git hooks, lo que nos permite ejecutar tareas durante la ejecución de algún código de git. Ejemplos:

• git push
• git commit
• git precommit

¿Como funciona?

Primero tienes que instalar en el proyecto ambas librerías, npm i -D prettier husky

Configuramos Prettier

Añadimos en la raiz del proyecto un archivo .prettierrc y le añadimos lo siguiente:

{
  "printWidth": 79,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "jsxBracketSameLine": false,
  "proseWrap": "always"
}

Después nos vamos al archivo package.json, buscamos scripts y añadimos el comando format de la siguiente manera:

• Solo para archivos Javascript
  

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

• Para varios tipos de archivo
  

  "format": "prettier --write \"**/*.+(js|css|html|json)\""
  

Configuramos Husky

Añadimos al archivo package.json lo siguiente:

Nota: Donde aparece pre-commit, podemos elegir mas tipos, como commit y push

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

¿Como utilizarlos?

Si las usamos en conjunto ambas librerias, simplemente cada vez que hagamos un proceso de git que use un hook que le hayamos indicado a Husky, realizara la función dentro de scripts que -le hayamos indicado.

Nota: No solo valdría para prettier, podríamos añadir un linter de javascript y alguna cosa mas, pero eso ya en otro capitulo