*Este artículo es la segunda parte de «Cómo mejorar la calidad y mantenibilidad de proyectos».

En esta ocasión vamos a trabajar una metodología que nos invita a asegurar nuestro código antes de subirlo a nuestro git, para ello, intervendrán las mismas herramientas que en el artículo anterior: Prettier, ESLint y EditorConfig. Además, añadiremos Husky, herramienta que podemos instalar a nuestro proyecto y se encargará de actuar mediante hooks a las acciones de git, es decir, si en nuestro package.json definimos un hook destinado a actuar antes de hacer commit (pre-commit) ejecutará los comandos definidos en el momento en que lancemos un git commit -m …

Ejemplo utilizando Husky

1. (Opcional) Comenzaremos añadiendo a nuestro proyecto todas las herramientas y configuraciones según el artículo anterior.

2. Instalamos la dependencia de husky como desarrollo.

 $ npm install -D husky

3. Ahora instalamos la dependencia lint-staged, en este caso, solo lo haremo si vamos a formatear o modificar código a través de husky, ya que al modificar el archivo dejará de estar en stage y esto nos ayudará a volver a insertarlos (git add) y mucho más.

$ npm install -D lint-staged

4. Una vez instaladas, vamos a crear los scripts de husky y podemos hacerlo de 2 maneras:

a. Usando una instalación manual con npx en la raíz del proyecto:

$ npx husky install

b. Automatización con el hook postinstall de package.json, de manera que cada vez que se ejecute npm install o yarn install, se aplique el comando:

 

5. El siguiente paso será configurar los hooks y las actions de lint-staged dentro de este mismo fichero, package.json:


 

En este ejemplo actuaremos sobre los actions de git commit pasando todos los comands que definamos en el bloque de lint-staged que veremos a continuación y git push que ejecutará el comando definido en el bloque scripts como test-headless.

Cuando se ejecuta el comando git commit pasamos por este bloque, que se ejecutará sobre cualquier fichero añadido gracias al patrón *, si queremos usarlo solo para los .ts por ejemplo deberemos usar “*.ts”.

6. Añadiremos, en el caso de necesitarlo, los ficheros .eslintignore y .prettierignore  para evitar archivos o directorios que no queramos que se ejecuten con prettier y ESLint.

Recordemos que todas estas pruebas se ejecutan tras acciones de git. Si alguno de los hooks devuelve un fallo como, por ejemplo, el linter o los tests, el commit no se llegará a ejecutar ya que atendiendo a las instrucciones que nosotros mismos le hemos dado hay fallos en nuestro código que no cumple con nuestros estándares pudiendo representar un problema.

Para ver este ejemplo al completo y funcionando, se ha subido al repositorio de ejemplo tres opciones distribuidas en ramas: TypeScript, Angular y React. Todas ellas tienen lo aprendido hasta ahora, recuerda que cada paso se refleja en la descripción del commit.

Si quieres saber cómo seguir avanzando con estas metodologías y prácticas, presta atención al siguiente artículo en el que daremos un paso más hacia la metodología en equipo y git.

Adrián Cejudo

Adrián Cejudo

IT Consultant - Altran España

Enamorado de las nuevas tecnologías. Comencé mi andadura en la programación de manera autodidacta a los 15 años y a día de hoy sigo formándome de manera constante con el mismo ímpetu y ganas. Mi objetivo en Altran es poder aportar toda mi experiencia y conocimiento en las distintas áreas, y por supuesto, desarrollarme profesional y personalmente gracias a los magníficos expertos y compañeros de los que nos rodeamos en el día a día.

Quizá también te interese…