Un linter es una herramienta usada para detectar code smells, algunos patrones sospechosos en nuestro código o lugares en los que no estemos siguiendo las convenciones de codificación de nuestro equipo. En este posteo vamos a ver como instalar, customizar y usar dos linters usados para front end: ESLint y StyleLint.

¿Cómo empiezo?

Para poder usarlos debemos crear al menos dos archivos en la raíz del proyecto, uno llamado ".eslintrc.json" y el otro  ".stylelintrc.json." Estos son los archivos de configuración que usarán los linters cuando se ejecuten, ambos usan las mismas opciones para configurar las reglas y los plugins.
En caso de querer excluir alguna parte del proyecto podemos crear otros archivos (".eslintignore" y ".stylelintignore") en la misma ubicación y agregar los paths de los archivos o carpetas que no querramos procesar, de la misma manera que lo haríamos en .gitignore.

Plugins y reglas

Cada uno de los plugins que instalemos nos provee de una colección de reglas, las cuales podemos ver en la documentación del mismo, y además una configuración predefinida para no tener que agregar y customizar estas reglas de a una. Pero para poder usarlas debemos agregar el plugin al archivo json de la siguiente forma:

"extends": [
    "plugin:nombre-plugin/plugin-config"
]

Las reglas son las convenciones que queremos que respete nuestro código. Son definidas en el archivo json de la siguiente forma:

"rules": {
    nombre-regla: [severity, config-regla],
    nombre-plugin/nombre-regla: [severity, config-regla] // Para reglas agregadas por un plugin
}

Severity se refiere al nivel de importancia que le damos a cada una de las reglas, hay tres niveles:
- "off" o 0: no se espera que esta regla sea respetada y no será tenida en cuenta durante el linteo.
- "warn" o 1: estas violaciones serán reportadas pero no crearán ningún inconveniente.
- "error" o 2: cuando no se cumpla una de estas reglas no solo se verá una advertencia sino que el código no compilará.
Las configuraciones de las reglas varían en cada una de ellas, por lo que se debe ver su documentación antes de usarlas.

Ejecutando los linters

Una vez que tengamos los archivos de configuración ya podemos ejecutar los linters.
Para ESLint usamos:

eslint --ext .js,.vue <path> --fix

Y para StyleLint:

stylelint <path> --fix

Con --ext elegimos las extensiones de los archivos que serán procesados.
Con --fix le decimos al linter que corrija de manera automática las reglas que puedan ser autofixeables, esto podemos verlo en la documentación de cada una de ellas.

Tanto ESLint como StyleLint son poderosas herramientas que pueden ayudarnos a seguir las convenciones de nuestro equipo y además dejar nuestro código mas legible y consistente, al tomarnos un tiempo para configurarlos al inicio de un proyecto podemos ahorrarnos un refactor en el futuro.

¡Hasta el próximo posteo!