Lemoncode TV

Prettier + Husky + Git

En los videos anteriores vimos como configurar Prettier a nivel de Visual Studio Code, esto está muy bien pero puede que por ejemplo se una un desarrollador al equipo que no tenga Prettier instalado...

¿Y si pudiéramos controlar esto a nivel de repositorio? Es decir cuando fuera a hacer un commit o un push, me salta una comprobación y aplica Prettier lo tenga o no instalado en VSCode

Manos a la obra

Subimos el código de ejemplo a un repositorio de Git (en este ejemplo elegimos Github).

Ahora que tenemos el repositorio subido a Github vamos a subir las librerías necesarias:

• Prettier: la utilizaremos para ejecutar el formateador.

• Husky: nos sirve para engancharnos a los eventos de git.

• Pretty Quick: nos sirve para lanzar Prettier sólo en los ficheros que se han modificado.

npm install prettier husky pretty-quick --save-dev

Una vez instaladas todas estas librerías, la configuración es muy simple y la podemos introducir en el propio package.json

/package.json

  "react-dom": "^16.3.1"
 },
+ "husky": {
+   "hooks": {
+     "pre-commit": "pretty-quick --stage"
+   }
+ }
}

En este caso estamos diciendo que antes de hacer un commit se lance el formateador de Prettier, es posible indicarle otro evento, por ejemplo que se lance justo antes de hacer un push.

En la configuración que hemos definido, le estamos diciendo que formatee sólo los archivos que esten en staging.

Ahora que lo tenemos todo configurado, podemos deshabilitar Prettier a nivel de VSCode, cambiar el formato de un fichero, y hacer un commit con Git, con esto veremos que husky lanza el formateador y aplica el formateador en los ficheros que están en staging.

Si tienes configurado algún linter y quieres que se ejecute además de Prettier, puedes instalar lint-staged como dependencia de desarrollo.

npm install lint-staged --save-dev

Una vez instalada podemos configurarla en el package.json, para eso simulamos que tenemos una tarea de linter.

  "build": "rimraf dist & webpack --mode development",
+ "lint":"echo \"lint command!\""
}

En husky le indicamos que en el pre-commit ejecute una tarea que vamos a crear con el nombre lint-staged

 "husky": {
   "hooks": {
-     "pre-commit": "pretty-quick --stage"
+     "pre-commit": "lint-staged"
   }
 }

Y más abajo en el package.json lo configuramos, indicándole que ejecute nuestra tarea de linter y después pretty-quick para formatear con Prettier.

 "husky": {
   "hooks": {
     "pre-commit": "lint-staged"
   }
+ "lint-stage": {
+  "src/**/*.{ts,tsx}": [
+    "npm run lint",
+    "pretty-quick --stage"
+  ]
+ }

Si ahora hacemos algún cambio en código y hacemos un commit, podemos ver que se lanza nuestra supuesta tarea de linter, y por ultimo prettyquick.

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.