eslint-loader

A ESlint loader for webpack

Install

npm install eslint-loader --save-dev

Note: You also need to install eslint from npm, if you haven't already:

npm install eslint --save-dev

Usage

In your webpack configuration:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // eslint options (if necessary)
        },
      },
    ],
  },
  // ...
};

When using with transpiling loaders (like babel-loader), make sure they are in correct order (bottom to top). Otherwise files will be checked after being processed by babel-loader:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
    ],
  },
  // ...
};

To be safe, you can use enforce: 'pre' section to check source files, not modified by other loaders (like babel-loader):

module.exports = {
  // ...
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  // ...
};

Options

You can pass eslint options using standard webpack loader options.

Note: That the config option you provide will be passed to the CLIEngine. This is a different set of options than what you'd specify in package.json or .eslintrc. See the eslint docs for more detail.

`cache`

Type: Boolean|String
Default: false

This option will enable caching of the linting results into a file. This is particularly useful in reducing linting time when doing a full build.

This can either be a boolean value or the cache directory path(ex: './.eslint-loader-cache').

If cache: true is used, the cache is written to the ./node_modules/.cache/eslint-loader directory. This is the recommended usage.

module.exports = {
  entry: '...',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          cache: true,
        },
      },
    ],
  },
};

`eslintPath`

Type: String
Default: eslint

Path to eslint instance that will be used for linting. If the eslintPath is a folder like a official eslint, or specify a formatter option. Now you dont have to install eslint.

module.exports = {
  entry: '...',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          eslintPath: path.join(__dirname, 'reusable-eslint'),
        },
      },
    ],
  },
};

`fix`

Type: Boolean
Default: false

This option will enable ESLint autofix feature.

Be careful: this option will change source files.

module.exports = {
  entry: '...',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true,
        },
      },
    ],
  },
};

`formatter`

Type: String|Function
Default: stylish

This option accepts a function that will have one argument: an array of eslint messages (object). The function must return the output as a string. You can use official eslint formatters.

module.exports = {
  entry: '...',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // several examples !
 
          // default value
          formatter: 'stylish',
 
          // community formatter
          formatter: require('eslint-friendly-formatter'),
 
          // custom formatter
          formatter: function (results) {
            // `results` format is available here
            // http://eslint.org/docs/developer-guide/nodejs-api.html#executeonfiles()
 
            // you should return a string
            // DO NOT USE console.*() directly !
            return 'OUTPUT';
          },
        },
      },
    ],
  },
};

Errors and Warning

By default the loader will auto adjust error reporting depending on eslint errors/warnings counts. You can still force this behavior by using emitError or emitWarning options:

`emitError`

Type: Boolean
Default: false

Will always return errors, if this option is set to true.

module.exports