Webpack 2 eslint-loader auto fix

Question

In webpack 1.x I could use the eslint property in my webpack config to enable autofixing my linting errors using:

...

module.exports = {
  devtool: 'source-map',
  entry: './src/app.js',
  eslint: {
    configFile: '.eslintrc',
    fix: true
  },

...

However, in webpack 2.x, thusfar I have been unable to use the auto fix functionality, because I don't know where to set it in my webpack config. Using the eslint property in my webpack configFile throws an WebpackOptionsValidationError .

Answer 1

The most common way to auto fix linting rules with webpack v2 (and higher) is to use the eslint-loader .

In your webpack.config.js you would do:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.jsx?$/, // both .js and .jsx
        loader: 'eslint-loader',
        include: path.resolve(process.cwd(), 'src'),
        enforce: 'pre',
        options: {
          fix: true,
        },
      },
      // ...
    ],
  },
  // ...
};

Answer 2

Webpack 5 with eslint-webpack-plugin:

  const ESLintPlugin = require('eslint-webpack-plugin');
  ....
  plugins: [
    ...
    new ESLintPlugin({fix: true}),
    ...
  ]