Distribuyendo configuraciones de eslint

El frontend se ha vuelto bastante complejo, no solamente hay que preocuparse por frameworks o tooling sino que en algún punto la empresa donde trabajas crecerá y habrá muchos proyectos y más importante, muchas personas.

Entre más homogeneos sean los proyectos resulta más fácil integrar nuevas personas porque el contexto es diferente pero la estructura es similar.

Una de las primeras cosas que yo elegiría hacer estándar dentro de una organización son los linters a utilizar y sus reglas. Es por esto que les voy a mostrar un pequeño ejemplo donde vamos a compartir reglas básicas de eslint creando un paquete de nombre @dezkareid/eslint-config-js-base(código)

En mi script principal voy a colocar las configuraciones de las que extenderá mi configuración, los plugins que utilizo y las reglas que quiero implementar.

module.exports = {
  extends: ['airbnb-base', 'prettier'],
  plugins: ['prettier', 'import'],
  rules: {
    complexity: ['error', 12]
  },
}

Como ven es bastante simple pero ahora viene otro reto, ¿cómo pruebo que esto funcione?

Normalmente en nuestros test incluimos assertions positivas (ejecución satisfactoria) y assertions negativas (ejecución fallida).

Para darle estructura a los tests, voy a crear un folder llamado tests y 2 sub-folders: pass y fail. Dentro de estos podemos poner archivos con el nombre de las reglas que querramos probar, en mi caso quiero verificar una regla de complejidad donde 12 sea el máximo permitido y si es más grande causar un error

Como vamos a probar condiciones que harán fallar a ESLint necesitamos una forma de probar que falló sin que rompa nuestro pipeline, a menos que una regla que esperamos que falle pase ... lo sé, estoy muy confundido en estos momentos.

Para ello vamos a hacer un pequeño "script" en bash para los casos negativos donde eslint fallará, donde nos regresará 0 si fallá (lo esperado) y 1 si eslint pasa (lo cual no buscamos).

Nota: Breve explicación de los exit codes

"test:fail": "if eslint --no-eslintrc -c index.js ./tests/fail; then exit 1; else exit 0; fi"

Veremos el error en consola pero esto no afecta a nuestro pipeline, veanlo como si fuera un try/catch.

Ahora vamos a configurar nuestro test script

Y vamos a crear en fail/complexity.js una función que tenga una complejidad mayor de 12

export default function complexity(x) {
  switch (x) {
    case 1:
      return 1;
    case 2:
      return 2;
    case 3:
      return 3;
    case 4:
      return 4;
    case 5:
      return 5;
    case 6:
      return 6;
    case 7:
      return 7;
    case 8:
      return 8;
    case 9:
      return 9;
    case 10:
      return 10;
    case 11:
      return 11;
    case 12:
      return 12;
    default:
      return 0;
  }
}

Con esto al correr nuestros test, en mi caso con yarn test --filter=@dezkareid/eslint-config-js-base estos pasarán satisfactoriamente.

Al final para utilizar esta configuración basta con instalar el paquete y simplemente decirle a tu eslint que use tu configuración. En mi caso en mi .eslintrc.js

module.exports = {
  extends: ['@dezkareid/eslint-config-js-base'],
};

Listo con esto ya puedes compartir tu configuración de eslint, si te atoras en algo el código esta aquí, pronto haré otros posts sobre como compartir otro tipo de configuraciones, no olvides seguirme en twitter y compartir este post.