Webpack 2 eslint-loader auto fix

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.

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,
        },
      },
      // ...
    ],
  },
  // ...
};