Distribuyendo configuraciones de eslint
Tags: javascript, webdev, eslint, programming
Published: 2023-02-19 19:52:20

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](https://www.npmjs.com/package/eslint) creando un paquete de nombre `@dezkareid/eslint-config-js-base`([código](https://github.com/dezkareid/dezkareid/tree/main/configs/eslint-config-js-base))

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.

```javascript
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

![Estructura del folder tests](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53xa4x90z5kzjuv2t1xy.png)

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.

![Mas despacio cerebrito](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97zvwvnatlldb80vwgmp.png)

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](https://www.educative.io/answers/what-are-exit-codes-in-linux)

```
"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

```javascript
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.

![Test satisfactorio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/goqnztko3hip8026hy14.png)

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

```javascript
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í](https://github.com/dezkareid/dezkareid/tree/main/configs/eslint-config-js-base), pronto haré otros posts sobre como compartir otro tipo de configuraciones, no olvides seguirme en [twitter](https://twitter.com/DezkaReid) y compartir este post.