eslint loader for webpack
$ npm install eslint-loaderIn 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/}
]
}
// ...
}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
eslintentry 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
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"
}
}
}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:
Loader will always return errors if this option is set to true.
module.exports = {
entry: "...",
module: {
// ...
}
eslint: {
emitError: true
}
}Loader will always return warnings if option is set to true.
Loader will process and report errors only and ignore warnings if this option is set to true
module.exports = {
entry: "...",
module: {
// ...
}
eslint: {
quiet: true
}
}Loader will cause the module build to fail if there are any eslint warnings.
module.exports = {
entry: "...",
module: {
// ...
}
eslint: {
failOnWarning: true
}
}Loader will cause the module build to fail if there are any eslint errors.
module.exports = {
entry: "...",
module: {
// ...
}
eslint: {
failOnError: true
}
}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.