ESLint: Qué, Cómo, Cuándo y Por qué

¿Qué es ESLint?

ESLint es una utilidad de JavaScript open-source de linting creada originalmente por Nicholas C. Zakas en Junio de 2013. Es utilizado frecuentemente para detectar patrones problemáticos o código que no cumple ciertas pautas de estilo. ESLint está escrito con Node.js para proporcionar un entorno de tiempo de ejecución rápido y una fácil instalación a través de npm. Con ESLint se puede imponer el estándar de codificación utilizando un determinado conjunto de reglas independientes. Sí, se pueden activar y desactivar esas reglas. Estas reglas son completamente modificables.

¿Por qué usar ESLint?

JavaScript, al ser un lenguaje dinámico y no tipificado, es propenso a errores del desarrollador. ESLint permite poner pautas sobre el estándar de codificación y ayuda a minimizar esos errores. La razón principal para imponer una guía es que cada desarrollador tiene su estilo de escritura (como convenciones de nombres/tabs/comillas simples o dobles para strings). Y, con diferentes técnicas de estilo, su código puede parecer extraño, más propenso a errores y vulnerable. Especialmente cuando se trata de JavaScript, esto podría causar dificultades con las que nunca querría lidiar.

¿Cuándo usarlo?

Puede ser utilizado sin importar el tamaño del proyecto o el equipo. Pero se debería considerar para cualquier proyecto JavaScript/TypeScript de mediana a gran escala y/o si se tiene un gran equipo de desarrolladores con los que lidiar. En cualquier caso, se deben imponer prácticas/pautas de codificación estándar y comunes. Las herramientas de Linting como ESLint permiten a los desarrolladores descubrir problemas con su código JavaScript sin ejecutarlo. Una de las principales razones por las que se creó ESLint fue permitir a los desarrolladores crear sus propias reglas de linting. Puede usar ESLint en cualquier aplicación que se ejecute en JavaScript/TypeScript:

1. React/React Native
2. Angular
3. Node

¿Cómo usarlo?

Así es como puedes instalarlo:

Instalación

Requisitos previos: Node.js (^10.12.0 o >=12.0.0) Puede instalar ESLint usando npm o yarn:

$ npm install eslint --save-dev
# or
$ yarn add eslint --dev

Nota: También es posible instalar ESLint globalmente en lugar de localmente (usando npm install eslint —global). Sin embargo, esto NO se recomienda, y cualquier complemento o configuración compartida que use debe instalarse localmente en cada proyecto.

Inicializarlo

Después de instalarlo, inicialízalo con el siguiente comando:

$ npx eslint --init
# or
$ yarn run eslint --init

Nota: — init asume que ya tiene un archivo package.json. Si no lo hace, asegúrese de ejecutar npm init o yarn init de antemano.

Configurarlo

En el momento en que haya terminado con la instalación y la inicialización, tendrá un archivo .eslintrc.{js,yml,json} en su directorio. En él, verás algunas reglas configuradas así:

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

Úsalo

Si está aquí, significa que configuró correctamente el ESLint. Así es como puedes usarlo:

$ npx elinst <tu archivo>.js
# or 
$ npx eslint <carpeta que contiene archivos js>

También puede agregar lint en el archivo package.json (si aún no lo ha agregado)

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

¡Felicitaciones!

Logró que su código se vea mucho más limpio y mejor que nunca en sólo unos pocos pasos.

Fuente