ESLint y Webpack
Introducción
Conceptos esenciales
Uso práctico
- 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 nuestropackage.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 nuevotest
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ñadireslint-loader
a la derecha devue-loader
ybabel-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 propiedaddevServer
.
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.
Código inicial
¿Tienes alguna pregunta sobre esta lección de Aprende Webpack desde cero?
Resuelve todas tus dudas sobre Webpack en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.