ESLint y Webpack

• Todos conocemos ESLint. Se trata de una herramienta que analiza nuestro código y nos indica errores y sugerencias.
• Estas sugerencias vienen en forma de estilos y reglas. Existen sets ya creados como la configuración AirBnB, pero nosotros usaremos otra. Una basada en Vue.
• Para dejarlo claro, ESLint no es algo exclusivo de Webpack, pero hoy en día el uso de linters se considera el estándar, por lo que he creído importante dedicar una lección a cómo utilizarlos en tu proceso de compilación.
• Una vez más el ecosistema Vue viene en nuestra ayuda para hacernos la vida un poco más sencilla. Vue Loader cuenta con una integración con ESLint, el cual nos permitiría hacer lint en nuestro proyecto.
• Como se indica en la documentación, existen dos opciones. Usar el plugin ESLint Vue Plugin para realizar una tarea de linting de forma "manual" o usar Eslint Loader para incorporarlo al proceso de compilación o al guardar si usamos un servidor de desarrollo. Vamos con la primera.
• Obviamente tenemos que instalar el plugin como dependencia de desarrollo, además de ESLint, así que debo lanzar npm install --save-dev eslint eslint-plugin-vue@next.
• Ahora es tan sencillo como crear una configuración especial para ESLint, creando el archivo .eslintrc.js en la raíz del proyecto, indicando que haga uso del plugin instalado.

module.exports = {
  extends: [
    "plugin:vue/essential",
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
  ],
};

• Tras extends indicamos el set re reglas. Como te decía al principio existen varios a los que puedes adherirte. También puedes desactivar algunas reglas del set bajo demanda. A nivel global aquí en la configuración o a nivel de archivo o incluso función en tu código fuente. Como siempre te recomiendo que le eches un vistazo a la documentación de ESLint.
• Por otro lado, como estamos utilizando Babel no vendría nada mal usar linting en todo el código que genere. Es tan sencillo como instalar npm install babel-eslint --save-dev y actualizar la configuración en .eslintrc.js.

module.exports = {
    parser: "vue-eslint-parser",
    parserOptions: {
        parser: "babel-eslint",
        sourceType: "module",
    },
    ...
};

• Cono todo listo podemos probar si ESLint funciona e interpreta nuestros archivos con extensión .js y .vue, ya que son los que nos interesan en este caso, añadiendo una nueva tarea a nuestro package.json, indicando "lint": "eslint --ext js,vue src" y lanzar alguna prueba.
• Wow. Podemos desabilitar alguna regla a nivel de archivo o globalmente. Por ejemplo añadiéndolo en nuestra configuración.

module.exports =
    rules: {
	  'no-unused-vars': 0
	}
}

• Además de mostrarnos advertencias y errores, podemos pedirle a ESLint que auto-arregle nuestro código con la opción fix De hecho se puede hacer que lo haga automáticamente, pero como esto cambia el código fuente yo prefiero hacerlo a mano añadiendo otra tarea "lint:fix": "eslint --ext js,vue src --fix".
• Vamos con la segunda opción, la cual nos permitirá agregar ESLint a nuestro proceso de compilación. Debemos instalar ESLint Loader como dependencia de desarrollo con npm install -D eslint-loader y agregar un nuevo test en nuestra configuración para hacer uso de él.

{
  test: /\.(js|vue)$/,
  exclude: /node_modules/,
  use: "eslint-loader",
  enforce: "pre"
},

• Fíjate cómo usamos la propiedad enforce para asegurarnos de que este loader se ejecuta en el código de autor, escrito por nosotros. No el transpilado/transformado. Otra opción hubiera sido añadir eslint-loader a la derecha de vue-loader y babel-loader para así darle preferencia.
• Como toque extra, algo característico de Vue CLI es que viene configurado para mostrar errores y advertencias en el propio navegador, no sólo en el terminal. Es fácil incorporar esa funcionalidad a nuestro workflow con Webpack Dev Server añadiendo la opción overlay en la propiedad devServer.

clientLogLevel: "info",
overlay: {
  warnings: true,
  errors: true
}

• Si ahora lanzamos nuestro servidor de desarrollo y provocamos algún error, nos encontramos con los errores y advertencias de ESLint.