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