Cuando ejecutamos el proceso de commit, ya vimos qué Git hooks están involucrados para validar el mensaje de commit (ver artículo Mejora tus mensajes de commit). Ahora comprobaremos que el código escrito es apto para llevarlo al repositorio remoto haciendo que cumpla ciertos requisitos tales como reglas de linting, formateo de código, ejecución de tests, chequeo de tipos… y cualquier otro proceso que asegure su validez. Así pues, vamos a asegurar la calidad de los commits antes de subirlos al repositorio remoto, en este caso un monorepo en Nx.

Durante este proceso nos apoyaremos en el hook «pre-commit» con el que se ejecutarán todas las acciones de necesarias haciendo uso de Lint-Staged.

Lint-Staged y Git Hook

Lint-Staged es una herramienta que nos permitirá iniciar los procesos para los archivos únicamente involucrados en el commit y no para todos los archivos del proyecto, con lo que se gana tiempo en su ejecución.

Instalación

Ejecutamos el comando de instalación de npm para añadirlo en el apartado de dependencias de desarrollo:

npm install --save-dev lint-staged

Configuración

Crearemos un arhivo llamado «lint-staged.config.js» en la raíz del proyecto (al mismo nivel del package.json), con el siguiente contenido:

module.exports = {
    './{apps,libs}/**/*.{ts,html}': [
        'nx affected --target lint --uncommitted --fix true'
    ],
    '.{apps,libs}/**/*.{ts,json,md,html,css,scss}': [
        'nx format:write --uncommitted --libs-and-apps'
    ],
    './{apps,libs}/**/*.{ts,html,css,scss}': [
        'nx affected --target test --uncommitted'
    ]
};

Observamos que en nuestro caso optamos a la ejecución de tres procesos de evaluación:

  1. Lint: Revisión y arreglo de los problemas (solo modifica el código con aquellas reglas que tengan la posibilidad de hacerlo) que cumplan el filtrado: si hay archivos de typescript (ts) ó html de las carpetas «apps» o «libs» en el staged.
  2. Formato: Modifica el código según las reglas de formateo (tabulaciones, comillas, …) de los archivos staged de las librerías y aplicaciones que cumplan el filtrado.
  3. Tests: Ejecuta los tests si hay archivos en staged que cumplan el filtrado.

Aprovechamos la potencia de Nx para poder ejecutar el proceso con comandos propios del monorepo. También se podría añadir algún paso más como verificar el typecheck de los archivos typescript por ejemplo, pero aquí depende de lo que se quiera analizar.

Git Hook pre-commit

Ahora que tenemos configuado el Lint-Staged, vamos a hacer que se ejecute en el git hook pre-commit, para ello basta con crear el archivo «pre-commit» en el directorio de Husky de la siguiente manera:

echo 'npx --no lint-staged --concurrent false' > .husky/pre-commit

Si resulta que el código está en una subcarpeta llamada por ejemplo «proyecto», entonces hay que indicar previamente que haga un cambio de directorio «cd ./proyecto» quedando el archivo:

cd ./proyecto
npx --no lint-staged --concurrent false

La ejecución de Lint-Staged la realizamos sin concurrencia, pues pueden haber modificaciones durante el proceso, así que se realizarán uno tras otro.

Resumen

Podemos validar los archivos que irán en el commit antes de llevarlo al repositorio remoto utilizando Lint-Staged con el que se puede ejecutar varios procesos como la validación y formateo tan necesarios para garantizar que subimos código de calidad.

Espero que con esto puedas mejorar el proceso de commits en tu día a día. Como siempre tienes el ejemplo en el repositorio de github de angularfrontenders.com.