ESLint: Identifica y corrige problemas de código JavaScript

En el desarrollo web, mantener el código limpio y libre de errores es importante para garantizar la calidad y la mantenibilidad del proyecto. Una de las herramientas más populares y efectivas para lograr esto es ESLint.

ESLint

ESLint es una herramienta de análisis estático de código diseñado para identificar y corregir problemas en el código JavaScript.

Al utilizar ESLint obtenemos los siguientes beneficios:

Consistencia en el Código: ESLint ayuda a mantener un estilo de codificación consistente en todo el proyecto, lo cual es importante cuando se trabaja en equipo.
Detección temprana de Errores: Al identificar errores de sintaxis y problemas de código antes de la ejecución, puedes ahorrar tiempo y esfuerzo en depuración.
Mejora la Mantenibilidad: El código fuente limpio y bien estructurado es más fácil de mantener y escalar.

Instalar y Configurar ESLint

Instalación

ESLint se puede instalar con npm en línea de comandos con el siguiente comando:


npm install eslint --save-dev

Configuración Inicial

Después de instalar ESLint, debes configurarlo para que se adapte a tus necesidades, eso se hace con el siguiente comando:


npx eslint --init

Este comando te guiará a través de una serie de preguntas para crear un archivo de configuración que se ajuste a tu proyecto.

Luego de marcar las opciones de acuerdo a tus necesidades se creará el archivo eslint.config.mjs con lo siguiente:


// file: eslint.config.mjs
import globals from "globals";
import pluginJs from "@eslint/js";

export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
];

Utilizar ESLint

Utilizar en línea de comandos

Para analizar tu código fuente con ESLint debes usar el comando npx eslint de la siguiente manera:


npx eslint scripts/comment.js   # Analiza el archivo comment.js de la carpeta scripts/
npx eslint scripts/             # Analiza los archivos JavaScript de la carpeta scripts/
npx eslint .                    # Analiza los archivos JavaScript del proyecto

Utilizar en Editores de Código

Para integrar ESLint con Visual Studio Code, puedes instalar la extensión ESLint. ESLint también se puede integrar con otros editores populares como Sublime Text, Atom y WebStorm mediante plugins o extensiones.

Configurar Reglas

ESLint ofrece un conjunto reglas que puedes personalizar en el archivo eslint.config.mjs. Puedes encontrar una referencia completa de las reglas en Rules Reference – ESLint, pero entre las reglas mas usadas se tiene:

Regla	Descripción
`camelcase`	Requiere el uso de camelCase en los nombre de variables.
`eqeqeq`	Requiere usar `===` y `!==` en lugar de `==` y `!=`.
`semi`	Obliga el uso de punto y coma (`;`) al final de cada sentencia.
`no-console`	Desactiva o advierte sobre el uso de `console`.
`no-empty`	Detecta bloques vacíos, como un bloque `if` sin contenido.
`no-eval`	Prohíbe el uso de `eval()` debido a riesgos de seguridad y rendimiento.
`no-unused-vars`	Detecta variables declaradas pero no utilizadas.
`no-undef`	Prohíbe el uso de variables que no han sido declaradas previamente.
`no-var`	Requiere usar `let` o `const` en lugar de `var` para la declarar variables.

Cada una de estas reglas puede configurarse con diferentes niveles de severidad:

off: Desactiva la regla.
warn: Emite una advertencia, pero no bloquea la compilación.
error: Emite un error, lo que bloque el flujo de trabajo en un entorno de CI/CD

Luego, podemos modificar el archivo eslint.config.mjs para incluir las reglas para nuestro proyecto:


// file: eslint.config.mjs
import globals from "globals";
import pluginJs from "@eslint/js";

export default [
  {
    languageOptions: { globals: globals.browser },
    rules: {
      "no-unused-vars": "warn",
      "no-undef": "warn",
      "semi": "error",
    }
  },
  pluginJs.configs.recommended,
];

Integrar con WebPack

Si utilizar WebPack en tu proceso de desarrollo, puedes integrar ESLint para que analice el código al momento de compilar los archivos. Para ello necesitas instalar el plugin eslint-webpack-plugin de la siguiente manera:


npm install --save-dev eslint-webpack-plugin

Luego necesitas agregar el plugin en el archivo webpack.config.js que es la configuración de WebPack:


// file: webpack.config.js

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = (env, argv) => {
  return {
    // ...
    plugins: [
      new ESLintPlugin({
        extensions: ['js'],
        exclude: ["/node_modules/"],
        emitWarning: true,
        failOnError: false,
        configType: 'flat'
      }),
    ],

    // ...
  };
};

Listo, ahora cada vez que compiles tu proyecto con WebPack se analizará el código fuente con ESLint.

Buenas Prácticas

Automatización: Integra ESLint en tu flujo de trabajo de CI/CD para asegurarte de que todo el código que se integra cumple con los estándares establecidos.
Documentación: Mantén actualizada la documentación de tu configuración de ESLint para que los miembros del equipo estén al tanto de las reglas utilizadas.

Conclusión

ESLint es una herramienta esencial para cualquier desarrollador de JavaScript que busque mantener un código limpio, consistente y libre de errores, lo que te permitirá detectar y corregir problemas de manera eficiente.