ESLint con Standard JS: linteo automático en webpack

Mejora la calidad de tu código con confianza: aquí verás cómo usar ESLint para un estilo de código consistente, detectar errores antes de tiempo e integrar reglas como Standard JS en tu flujo de trabajo con NPM, editores y webpack. Todo con ejemplos claros y pasos prácticos.

¿Qué es eslint y por qué usar un linter?

Un linter de código como ESLint estandariza el estilo y ayuda a prevenir errores. Lo clave no es qué reglas se eligen, sino que todo el equipo use las mismas. Es configurable y soporta reglas predefinidas que se instalan como librerías de NPM.

¿Qué propone standard js como preset de reglas?

• No usar puntos y comas.
• Usar espacios para indentar.
• Indentación de dos espacios.
• Configuración lista para usar vía eslint-config-standard.

¿Cómo puede ejecutarse eslint en el día a día?

• A través de webpack: la opción más útil durante el desarrollo.
• Con plugins de editores: Atom, Sublime, Visual Studio Code, Vim, entre otros.
• Por consola: menos conveniente, pero posible.

¿Cómo instalar y configurar eslint con standard js?

La instalación se realiza con dependencias de desarrollo para que sea reproducible en cualquier entorno y quede en el package.json.

¿Cómo instalar dependencias y peer dependencies en npm?

• Instala ESLint.

npm i -D eslint

• Luego instala la configuración de Standard JS junto con sus peer dependencies. Estas son dependencias de las dependencias que deben instalarse manualmente. Copia el comando completo desde el repositorio de la librería y ejecútalo en la terminal.

¿Cómo crear el archivo .eslintrc y extender reglas?

• Crea el archivo oculto .eslintrc (formato JSON) y extiende Standard JS.

{
  "extends": ["standard"]
}

• Puedes sobreescribir reglas. Por ejemplo, desactivar el uso de la regla para new:

{
  "extends": ["standard"],
  "rules": {
    "new": 0
  }
}

¿Cómo integrar con el editor y entender mensajes de error?

• Reinicia el editor para que tome los cambios y habilita el plugin de ESLint.
• Verás advertencias como: "Do not use new for side effects" y podrás desactivar la regla en .eslintrc si no aplica a tu caso.
• Si borras una coma y aparece "Unexpected token", es un error de sintaxis: al corregir la coma, el error desaparece.

¿Cómo integrar eslint con webpack y archivos .vue?

Integrar con webpack automatiza la verificación durante el desarrollo. En webpack v2+ el concepto es "rule" (antes "loader" en v1), pero la idea es la misma: una transformación previa al resto para lintear el código fuente, no el generado por Babel.

¿Cómo instalar el eslint-loader y ejecutarlo antes del build?

• Instala el loader oficial:

npm i -D eslint-loader

• Configura una regla para .js y .vue, con ejecución previa y límite a la carpeta de código fuente (por ejemplo, source) usando path.resolve.

// webpack.config.js
const path = require('path')

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.resolve(__dirname, 'source')]
      }
    ]
  }
}

• Así, primero corre eslint-loader y después babel-loader, vue-loader, etc. Esto asegura que se lintee tu código de desarrollo, no el bundle final.

¿Cómo evitar falsos errores JSX en .vue con plantillas html?

Si aparece un error tipo "Expected corresponding JSX closing tag for image" relacionado con "GSX/JSX", falta configurar el plugin de HTML para ESLint.

• Instala el plugin como dependencia de desarrollo:

npm i -D eslint-plugin-html

• Actívalo en .eslintrc:

{
  "extends": ["standard"],
  "plugins": ["html"]
}

• Ejecuta tu entorno de desarrollo:

npm run dev

Verás en consola información detallada cuando haya un error: archivo, tipo de error, línea y columna. Al guardar y corregir, webpack recompila automáticamente y continúas trabajando con todo en verde.

¿Tienes dudas sobre la configuración de tu editor, el manejo de peer dependencies o el uso de enforce en webpack? Comparte tu caso en los comentarios y afinamos la configuración juntos.