Configuración de Husky, lint-staged y Prettier para formatear en precommit.

Introducción

¿Alguna vez has experimentado que, a pesar de haber acordado usar Prettier en tu equipo, un nuevo integrante no tiene el plugin instalado y sube código sin formatear correctamente?

¿Existe alguna forma de asegurarnos de que cualquier código que subimos a nuestro repositorio de Git cumpla con ciertos estándares mínimos?

TL;DR;

Para configurar Husky, lint-staged y Prettier para formatear el código en pre-commit.

• Instala las herramientas necesarias: Instala Husky para manejar los hooks de Git, lint-staged para procesar solo los archivos modificados, y Prettier para el formateo del código.

• Configura Husky: Inicializa Husky en tu proyecto y agrega un hook de pre-commit que ejecute lint-staged. Esto asegura que ciertos comandos se ejecuten automáticamente antes de cada commit.

• Configura lint-staged: Especifica en lint-staged que Prettier debe ejecutarse en los archivos que coincidan con las extensiones de tu proyecto. Esto asegura que solo los archivos modificados y añadidos al área de staging sean procesados por Prettier.

• Configura Prettier: Define las reglas de formateo que deseas usar en tu proyecto mediante un archivo de configuración de Prettier.

¿Quieres saber más en detalle? Sigue leyendo...

Husky se basa en los git hooks, scripts que se ejecutan antes o después de determinados comandos de Git.
Por ejemplo, cuando hacemos un commit, podemos tener el hook pre-commit que se ejecutará antes de realizar el commit. De esta manera, podemos configurar Husky para que ejecute herramientas como Prettier, incluso una batería de tests. Si todo va bien, el commit se realizará; de lo contrario, se producirá un error y el commit no se llevará a cabo. Esto nos asegura que el código en el repositorio esté siempre formateado según las reglas establecidas por Prettier.

Sin embargo, ejecutar estas herramientas en todos los archivos del proyecto cada vez que hacemos un commit podría ser ineficiente, especialmente en proyectos grandes, ya que demoraría el proceso. Aquí es donde entra en juego lint-staged. Con lint-staged, solo se procesan los archivos que han sido modificados y añadidos al staging del repositorio. Esto reduce significativamente el número de archivos que necesitan ser revisados, haciendo que el proceso sea más rápido y eficiente.

Paso 1: Instalación de dependencias

Asegúrate de que tienes Node.js y npm (o yarn) instalados en tu proyecto. A continuación, instala Husky, lint-staged y prettier, mediante npm o yarn.

Teclea esto en la terminal de bash o ms-dos.

• npm:

npm install husky prettier lint-staged --save-dev

• yarn:

yarn add husky prettier lint-staged --dev

paso 2: Configurar .prettierrc .prettierignore

• Crea un archivo .prettierrc.json en la raíz de tu proyecto y añade tus reglas.
• Ejemplo:

.prettierrc.json

+ {
+   "printWidth": 80,
+   "singleQuote": true,
+   "useTabs": false,
+   "tabWidth": 2,
+   "semi": true,
+   "bracketSpacing": true,
+   "trailingComma": "es5",
+   "arrowParens": "avoid",
+   "endOfLine": "lf"
+ }

• Crea otro archivo .prettierignore en la raíz de tu proyecto. Es para que prettier no mire en esos ficheros.
  • Ejemplo:

.prettierignore

+ {
+   node_modules
+   dist
+ }

Paso 3: Configurar husky y el pre-commit

Añade un hook pre-commit que se ejecutará antes de cada commit. Para pasar prettier y formatear el código.

• El comando init simplifica la configuración de husky en un proyecto. Crea un script pre-commit en .husky/ y actualiza el script prepare en package.json. Las modificaciones se pueden hacer más tarde para adaptarse a su flujo de trabajo.

Teclea esto en la terminal de bash o ms-dos.

 npx husky init

• Añade una configuración para lint-staged en package.json:

package.json

+ "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write"
+    ],
+    "*.css": [
+      "prettier --write"
+    ]
+  }

• En la raíz tenemos la carpeta .husky, dentro de ella un fichero llamado pre-commit, añadimos lo siguiente.

./.husky/pre-commit

+ #!/usr/bin/env sh
+ . "$(dirname -- "$0")/_/husky.sh"

- npm test
+ npx lint-staged

paso 4: Prueba la configuración

Introduce cambios en un archivo .ts,tsx o css (mal formateados) y podrá ver como se lanza el precommit formatea automáticamente los ficheros.

Repositorio de ejemplo

Te dejo un enlace a un proyecto de github vacío con la configuración completada:

Enlace al repositorio con el proyecto vacío con la configuración completada

Conclusión

Cuando trabajas en equipo (incluso tú solo), es muy importante tener una base de código que sea homogénea y garantizar que cumpla unos mínimos, si no hay mucho riesgo de que el proyecto se te vaya de madre y no tengas manera de controlarlo.
Husky te permite integrar ganchos de git de una manera muy sencilla, en nuestro caso con lint-staged lo hemos configurado de forma que formatee automáticamente los archivos que se van a subir al repositorio, y con prettier nos aseguramos de que el código cumpla con un estándar de formateo consistente, ya te puedes olvidar de ir persiguiendo a tus compañeros para que instalen el plugin y lo configuren correctamente.
Si te animas, puedes añadir más herramientas a tu flujo de trabajo, como ESLint para detectar errores y problemas de estilo en tu código, o Jest para ejecutar pruebas unitarias. ¿Hasta dónde llegar? Aquí depende del equipo con el que estés trabajando y las necesidades que tengas. Si nunca has usado estas herramientas, te recomiendo que empieces poco a poco, y que tu equipo vaya madurando.

Sobre mí

Hola, me llamo Fran y soy desarrollador Front End + QA, si quieres conectar conmigo, te dejo aquí mi perfil de Linked in, ¡encantado de conectar!