Skip to content

Latest commit

 

History

History
210 lines (164 loc) · 4.08 KB

README.md

File metadata and controls

210 lines (164 loc) · 4.08 KB
Raw

eslint-loader Build Status

eslint loader for webpack

Install

$ npm install eslint-loader

Usage

In your webpack configuration

module.exports = {
  // ...
  module: {
    loaders: [
      {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
    ]
  }
  // ...
}

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

module.exports = {
  // ...
  module: {
    loaders: [
      {test: /\.js$/, loader: "babel-loader", exclude: /node_modules/}
      {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
    ]
  }
  // ...
}

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

module.exports = {
  // ...
  module: {
    preLoaders: [
      {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
    ]
  }
  // ...
}

Options

You can pass directly some eslint options by

  • Adding a query string to the loader for this loader usabe only
{
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loader: "eslint-loader?{rules:[{semi:0}]}",
        exclude: /node_modules/,
      },
    ],
  },
}
  • Adding an eslint entry in you webpack config for global options:
module.exports = {
  eslint: {
    configFile: 'path/.eslintrc'
  }
}

Note that you can use both method in order to benefit from global & specific options

formatter (default: eslint stylish formatter)

Loader 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: {
    // ...
  }
  eslint: {
    // several examples !

    // default value
    formatter: require("eslint/lib/formatters/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 (default: false)

Loader will always return errors if this option is set to true.

module.exports = {
  entry: "...",
  module: {
    // ...
  }
  eslint: {
    emitError: true
  }
}
emitWarning (default: false)

Loader will always return warnings if option is set to true.

quiet (default: false)

Loader will process and report errors only and ignore warnings if this option is set to true

module.exports = {
  entry: "...",
  module: {
    // ...
  }
  eslint: {
    quiet: true
  }
}
failOnWarning (default: false)

Loader will cause the module build to fail if there are any eslint warnings.

module.exports = {
  entry: "...",
  module: {
    // ...
  }
  eslint: {
    failOnWarning: true
  }
}
failOnError (default: false)

Loader will cause the module build to fail if there are any eslint errors.

module.exports = {
  entry: "...",
  module: {
    // ...
  }
  eslint: {
    failOnError: true
  }
}

Gotchas

NoErrorsPlugin

NoErrorsPlugin prevents Webpack from outputting anything into a bundle. So even ESLint warnings will fail the build. No matter what error settings are used for eslint-loader.

So if you want to see ESLint warnings in console during development using WebpackDevServer remove NoErrorsPlugin from webpack config.

Changelog

License