Tutorial: Git hooks con linting

Tutorial por jejo@camba.coop

En muchos desarrollos necesitamos asegurarnos que el código que estamos versionando se adecúe a ciertas normas de estilo. Para poder agilizar los tiempos de code review y evitar que nuestro código sea rechazado por tal motivo podemos utilizar herramienta libres que nos ayuden a no olvidarnos de realizar estos chequeos (y muchos otros) previos al versionado.

Husky

Para ello se va a utilizar la biblioteca Husky, la cual nos permite ejecutar scripts en diferentes etapas del versionado (pre-commit, commit-msg, post-merge, pre-push, etc.) según sea requerido.

¿Por qué no utilizar directamente hooks de git?

Los hooks de git cumplen la misma función pero el inconveniente se presenta al momento de querer compartir los hooks personalizados con el equipo de desarrollo. Al crear un hook propio se debe almacenar en el directorio .git/hooks, el cual no puede ser versionado. Para poder compartir nuestras creaciones, debemos versionarlas en otro directorio y que cada desarrollador/a copie dichos hooks a la carpeta mencionada previamente o configurar el directorio de hooks mediante git config core.hooksPath <carpeta-contenedora-de-hooks>, lo cual resulta muy tedioso.

Instalar y configurar husky

Se instala Husky

npm install husky@2.4 --save-dev

NOTA: (Al momento de redacción… ) la versión actual de Husky (v2.5) presenta un error que no permite encontrar la carpeta .git/hooks, por tal motivo deberíamos instalar la v2.4.

Es muy importante tener en mente que Husky modifica todos los hooks existentes en la carpeta .git/hooks, por lo tanto se debería hacer un backup de los mismos en caso de ser necesario.

Existen dos maneras de configurar Husky:

• Agregar configuración de Husky en package.json: En el package.json se debe agregar una configuración similar a la siguiente:

{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

• Agregar configuraciones en un archivo separado: En este caso el archivo debe llamarse .huskyrc, .huskyrc.json ó .huskyrc.js, y el contenido del mismo debe ser algo similar a

{
  "hooks": {
    "pre-commit": "npm test"
  }
}

lint-staged

Si bien la agregación de lint-staged no es del todo necesaria, nos proveé la posibilidad de ejecutar scripts sobre los archivos versionados en estado staged, lo que es una mejora de performance considerable al no tener que analizar todos los archivos del proyecto, sólo los que hemos modificado.

Instalar y configurar lint-staged

Se instala mediante

npm install lint-staged --save-dev

Al igual que Husky, se puede configurar de dos maneras distintas:

• Agregando la configuración en el package.json: Se agrega una configuración similar a lo siguiente

{
  "lint-staged": {
    "*": "your-cmd"
  }
}

• En un archivo llamado .lintstagedrc en formato JSON o YML, o en un archivo llamado lint-staged.config.js en formato JS: Se crea un archivo con una configuración similar a la siguiente

{
  "*": "your-cmd"
}

Se modifica la configuración de Husky a algo similar:

"husky": {
  "hooks": {
    "pre-commit": "your-cmd && lint-staged"
  }
},

Agregar reglas de ESlint de Prettier y AirBnB al proyecto

Se agregan los plugins de prettier y airbnb para eslint:

npm i eslint-config-airbnb eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier --save-dev

Se agrega un archivo .eslintrc con la siguiente configuración

{
  "extends": [
    "react-app",
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "jsx-a11y",
    "prettier"
  ],
  "rules": {
    "semi": 0, // No debe haber punto y coma al final de las lineas
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], // Los archivos pueden tener extensión .js ó .jsx
    "prettier/prettier": [
      "error", {
        "semi": false
      }
    ]
  }
}