Integrar ESLINT con Webpack

Por Darío Rivera

Publicado el 2020-10-18 en Webpack

Una de las ventajas de utilizar webpack es que podemos configurar procesos intermedios en la compilación de nuestros assets. Si no sabes aún qué es webpack te invito a revisar nuestro artículo de Introducción a Webpack y también el de Introducción a ESLINT. Esto es útil para evitar que pase código no homogeneo al sistema de control de versiones. Para configurar ESLINT con webpack debemos instalar un loader para eslint.

npm i --save-dev eslint-loader

Una vez hecho esto debemos configurar el loader en el archivo webpack.config.js.

const path = require('path');
...

{
  module: {
    rules: [
      {
          test: /\.js/,
          loader: 'eslint-loader',
          enforce: 'pre',
          include: [path.resolve(__dirname, './src')]
      },
      ...
    ]
  }
}

Como puedes darte cuenta, vamos a comprobar que todos los archivos con extensión .js dentro de la carpeta src sean parseados por eslint antes de generar los assets de producción (enforce: 'pre'). Con esto nos aseguramos que el código mejorado por el linter sea el de desarrollo y no el de producción. Hasta la próxima!.

Categorías