Linters y Husky

ES Lint con Standard

¿Qué es Standard?

En JavaScript no existe un estilo oficial, sin embargo, Standard es uno de los más utilizados y mejor aceptados por la comunidad. Entre algunas de sus características más relevantes está el uso de commilla simple y la omisión de los punto y coma como para del estilo de escritura de código.

Este estilo es ampliamente usado y podemos ver una lista de algunas de las más relevantes compañias en el ecosistema JavaScript que lo utilizan. Ver el listado acá

ESLint

Es inevitable tener errores en el código que desarrollas para una aplicación. Algunos causan problemas de seguridad y robustez del sistema o simplemente la aplicación y esta deja de funcionar.

Hay un cierto grupo de errores que pueden ser identificados y reparados antes de que tu código llegue a ser ejecutado, estos pueden ser:

• errores de sintáxis
• Código poco intuitivo o difícil de mantener
• Uso de “malas prácticas”
• Estilo de código inconsistente en los distintos archivos de un proyecto

ESLint es un “linter” para JavaScript. Un Linter no es más que una herramienta que nos ayuda a cumplir las buenas prácticas de codificación y de estilos en un lenguaje de programación.

Para instalarlo vamos a ejecutare el siguiente comando:

npx eslint --init

Este último va a comenzar un proceso interactivo donde nos harán una serie de preguntas y responderemos lo siguiente:

How would you like to use ESLint? To check syntax, find problems, and enforce code style

What type of modules does your project use? CommonJS (require/exports)

Which framework does your project use? None of these

Does your project use TypeScript? No

Where does your code run? (utilizar la barra espaciadora)

• ✔ Browser
• ✔ Node

How would you like to define a style for your project? Use a popular style guide

Which style guide do you want to follow Standard: https://github.com/standard/standard

What format do you want your config file to be in? JSON

Esto ultimo puede ser en múltiples formatos. Ver más ejemplos en este link

Por último responderemos que usaremos npm

Would you like to install them now with npm? Yes

Una vez terminada la instalación y veremos como fue creado un archivo llamado .eslintrc.json Ahora vamos a agregar al package.json un script llamado “lint” con lo siguiente:

...
"scripts": {
  ...
  "lint": "eslint ."
  ...
}
...

y por último ejecutamos

  npm run lint

Veremos varios errores y solucionaremos algunos para revisar las reglas.

Ahora probemos npx eslint --fix . y veremos que varios de los problemas reportados anteriormente fueron solucionados. Deberiamos ver algunos errores en los archivos de test debido a que el linter no reconoce que funciones como beforeEach, describe y otras no fueron declaradas en el archivo que se está usando. Para solucionar esto agregaremos un plugin para ESLint relacionado a Jest. Ejecutemos lo siguiente:

npm i -D eslint-plugin-jest

Una vez instalado debemos ir al archivo .eslintrc.json y este debe quedar de la siguiente forma:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true,
        "node": true,
        "jest/globals": true
    },
    "extends": [
        "standard"
    ],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
    },
    "plugins": ["jest"]
}

Ahora volvemos a correr el comando npm run lint y los errores relacionados a Jest ya no deberían aparecer.

Husky

npm i -D husky
npx husky install

Veras que se configuro una nueva carpeta en la raíz llamada .husky

Ahora ejecutaremos lo siguiente:

npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-push "npm test"

ahora veremos que dentro del directorio llamado .husky hay 2 nuevos archivos. Si revisamos su interior deberíamos ver lo siguiente:

.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint

.husky/pre-push

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test

Ahora podemos probar que todo esta funcionando. Primero haremos un commit y veremos como es que se corren los linters de los proyectos Frontend y Backend.

git add .
git commit -m "chore(dev-scripts): adding pre-commit and pre-push scripts"

Veremos como al hacer esto se corre el script pre-commit. Si todo salió bien el commit debería hacerse sin problemas.

Conventional Commits y Changelog

¿Qué es conventional commits?

https://www.conventionalcommits.org/en/v1.0.0/

npx husky add .husky/prepare-commit-msg "exec < /dev/tty && node_modules/.bin/cz --hook || true"

Ahora al hacer los commandos de git veremos un CLI que nos hará una serie de preguntas:

git add .
git commit

¿Crear un Changelog?

Ejecutaremos

npm i -D conventional-changelog-cli
npx conventional-changelog -p angular -i CHANGELOG.md -s

y agregamos el script en el package.json

  "version": "conventional-changelog -p angular -i CHANGELOG.md -s"

y ahora luego de agregar los archivos y realizar el proceso ejecutaremos

npm version patch

y ya tenemos un completo ambiente de desarrollo profesional.