Integrar ESLINT con Webpack

Author
By Darío Rivera
Posted on 2020-10-18 in 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!.


Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.