7.4 KiB
eslint-loader
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.
fix
(default: false)
This option will enable ESLint autofix feature.
Be careful: this option will change source files.
cache
(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 file is written to the ./node_modules/.cache
directory.
This is the recommended usage.
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: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
// 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";
}
}
}
]
}
};
eslintPath
(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")
}
}
]
}
};
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: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
emitError: true
}
}
]
}
};
emitWarning
(default: false
)
Loader will always return warnings if option is set to true
. If you're using hot module replacement, you may wish to enable this in development, or else updates will be skipped when there's an eslint error.
quiet
(default: false
)
Loader will process and report errors only and ignore warnings if this option is set to true
module.exports = {
entry: "...",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
quiet: true
}
}
]
}
};
failOnWarning
(default: false
)
Loader will cause the module build to fail if there are any eslint warnings.
module.exports = {
entry: "...",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: true
}
}
]
}
};
failOnError
(default: false
)
Loader will cause the module build to fail if there are any eslint errors.
module.exports = {
entry: "...",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnError: true
}
}
]
}
};
outputReport
(default: false
)
Write the output of the errors to a file, for example a checkstyle xml file for use for reporting on Jenkins CI
The filePath
is relative to the webpack config: output.path
You can pass in a different formatter for the output file, if none is passed in the default/configured formatter will be used
module.exports = {
entry: "...",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
outputReport: {
filePath: "checkstyle.xml",
formatter: require("eslint/lib/formatters/checkstyle")
}
}
}
]
}
};
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.
Defining configFile
or using eslint -c path/.eslintrc
Bear in mind that when you define configFile
, eslint
doesn't automatically look for
.eslintrc
files in the directory of the file to be linted.
More information is available in official eslint documentation in section Using Configuration Files.
See #129.