1 | # eslint-loader [![Build Status](https://travis-ci.org/webpack-contrib/eslint-loader.svg?branch=master)](https://travis-ci.org/webpack-contrib/eslint-loader)
|
2 |
|
3 | > eslint loader for webpack
|
4 |
|
5 | ## Install
|
6 |
|
7 | ```console
|
8 | $ npm install eslint-loader --save-dev
|
9 | ```
|
10 |
|
11 | **NOTE**: You also need to install `eslint` from npm, if you haven't already:
|
12 |
|
13 | ```console
|
14 | $ npm install eslint --save-dev
|
15 | ```
|
16 |
|
17 | ## Usage
|
18 |
|
19 | In your webpack configuration
|
20 |
|
21 | ```js
|
22 | module.exports = {
|
23 | // ...
|
24 | module: {
|
25 | rules: [
|
26 | {
|
27 | test: /\.js$/,
|
28 | exclude: /node_modules/,
|
29 | loader: "eslint-loader",
|
30 | options: {
|
31 | // eslint options (if necessary)
|
32 | }
|
33 | }
|
34 | ]
|
35 | }
|
36 | // ...
|
37 | };
|
38 | ```
|
39 |
|
40 | When using with transpiling loaders (like `babel-loader`), make sure they are in correct order
|
41 | (bottom to top). Otherwise files will be checked after being processed by `babel-loader`
|
42 |
|
43 | ```js
|
44 | module.exports = {
|
45 | // ...
|
46 | module: {
|
47 | rules: [
|
48 | {
|
49 | test: /\.js$/,
|
50 | exclude: /node_modules/,
|
51 | use: ["babel-loader", "eslint-loader"]
|
52 | }
|
53 | ]
|
54 | }
|
55 | // ...
|
56 | };
|
57 | ```
|
58 |
|
59 | To be safe, you can use `enforce: "pre"` section to check source files, not modified
|
60 | by other loaders (like `babel-loader`)
|
61 |
|
62 | ```js
|
63 | module.exports = {
|
64 | // ...
|
65 | module: {
|
66 | rules: [
|
67 | {
|
68 | enforce: "pre",
|
69 | test: /\.js$/,
|
70 | exclude: /node_modules/,
|
71 | loader: "eslint-loader"
|
72 | },
|
73 | {
|
74 | test: /\.js$/,
|
75 | exclude: /node_modules/,
|
76 | loader: "babel-loader"
|
77 | }
|
78 | ]
|
79 | }
|
80 | // ...
|
81 | };
|
82 | ```
|
83 |
|
84 | ### Options
|
85 |
|
86 | You can pass [eslint options](http://eslint.org/docs/developer-guide/nodejs-api#cliengine)
|
87 | using standard webpack [loader options](https://webpack.js.org/configuration/module/#useentry).
|
88 |
|
89 | Note that the config option you provide will be passed to the `CLIEngine`.
|
90 | This is a different set of options than what you'd specify in `package.json` or `.eslintrc`.
|
91 | See the [eslint docs](http://eslint.org/docs/developer-guide/nodejs-api#cliengine) for more detail.
|
92 |
|
93 | #### `fix` (default: false)
|
94 |
|
95 | This option will enable
|
96 | [ESLint autofix feature](http://eslint.org/docs/user-guide/command-line-interface#fix).
|
97 |
|
98 | **Be careful: this option will change source files.**
|
99 |
|
100 | #### `cache` (default: false)
|
101 |
|
102 | This option will enable caching of the linting results into a file.
|
103 | This is particularly useful in reducing linting time when doing a full build.
|
104 |
|
105 | This can either be a `boolean` value or the cache directory path(ex: `'./.eslint-loader-cache'`).
|
106 |
|
107 | If `cache: true` is used, the cache file is written to the `./node_modules/.cache` directory.
|
108 | This is the recommended usage.
|
109 |
|
110 | #### `formatter` (default: eslint stylish formatter)
|
111 |
|
112 | Loader accepts a function that will have one argument: an array of eslint messages (object).
|
113 | The function must return the output as a string.
|
114 | You can use official eslint formatters.
|
115 |
|
116 | ```js
|
117 | module.exports = {
|
118 | entry: "...",
|
119 | module: {
|
120 | rules: [
|
121 | {
|
122 | test: /\.js$/,
|
123 | exclude: /node_modules/,
|
124 | loader: "eslint-loader",
|
125 | options: {
|
126 | // several examples !
|
127 |
|
128 | // default value
|
129 | formatter: require("eslint/lib/formatters/stylish"),
|
130 |
|
131 | // community formatter
|
132 | formatter: require("eslint-friendly-formatter"),
|
133 |
|
134 | // custom formatter
|
135 | formatter: function(results) {
|
136 | // `results` format is available here
|
137 | // http://eslint.org/docs/developer-guide/nodejs-api.html#executeonfiles()
|
138 |
|
139 | // you should return a string
|
140 | // DO NOT USE console.*() directly !
|
141 | return "OUTPUT";
|
142 | }
|
143 | }
|
144 | }
|
145 | ]
|
146 | }
|
147 | };
|
148 | ```
|
149 |
|
150 | #### `eslintPath` (default: "eslint")
|
151 |
|
152 | Path to `eslint` instance that will be used for linting.
|
153 | If the `eslintPath` is a folder like a official eslint, or specify a `formatter` option. now you dont have to install `eslint` .
|
154 |
|
155 | ```js
|
156 | module.exports = {
|
157 | entry: "...",
|
158 | module: {
|
159 | rules: [
|
160 | {
|
161 | test: /\.js$/,
|
162 | exclude: /node_modules/,
|
163 | loader: "eslint-loader",
|
164 | options: {
|
165 | eslintPath: path.join(__dirname, "reusable-eslint")
|
166 | }
|
167 | }
|
168 | ]
|
169 | }
|
170 | };
|
171 | ```
|
172 |
|
173 | #### Errors and Warning
|
174 |
|
175 | **By default the loader will auto adjust error reporting depending
|
176 | on eslint errors/warnings counts.**
|
177 | You can still force this behavior by using `emitError` **or** `emitWarning` options:
|
178 |
|
179 | ##### `emitError` (default: `false`)
|
180 |
|
181 | Loader will always return errors if this option is set to `true`.
|
182 |
|
183 | ```js
|
184 | module.exports = {
|
185 | entry: "...",
|
186 | module: {
|
187 | rules: [
|
188 | {
|
189 | test: /\.js$/,
|
190 | exclude: /node_modules/,
|
191 | loader: "eslint-loader",
|
192 | options: {
|
193 | emitError: true
|
194 | }
|
195 | }
|
196 | ]
|
197 | }
|
198 | };
|
199 | ```
|
200 |
|
201 | ##### `emitWarning` (default: `false`)
|
202 |
|
203 | 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.
|
204 |
|
205 | #### `quiet` (default: `false`)
|
206 |
|
207 | Loader will process and report errors only and ignore warnings if this option is set to true
|
208 |
|
209 | ```js
|
210 | module.exports = {
|
211 | entry: "...",
|
212 | module: {
|
213 | rules: [
|
214 | {
|
215 | test: /\.js$/,
|
216 | exclude: /node_modules/,
|
217 | loader: "eslint-loader",
|
218 | options: {
|
219 | quiet: true
|
220 | }
|
221 | }
|
222 | ]
|
223 | }
|
224 | };
|
225 | ```
|
226 |
|
227 | ##### `failOnWarning` (default: `false`)
|
228 |
|
229 | Loader will cause the module build to fail if there are any eslint warnings.
|
230 |
|
231 | ```js
|
232 | module.exports = {
|
233 | entry: "...",
|
234 | module: {
|
235 | rules: [
|
236 | {
|
237 | test: /\.js$/,
|
238 | exclude: /node_modules/,
|
239 | loader: "eslint-loader",
|
240 | options: {
|
241 | failOnWarning: true
|
242 | }
|
243 | }
|
244 | ]
|
245 | }
|
246 | };
|
247 | ```
|
248 |
|
249 | ##### `failOnError` (default: `false`)
|
250 |
|
251 | Loader will cause the module build to fail if there are any eslint errors.
|
252 |
|
253 | ```js
|
254 | module.exports = {
|
255 | entry: "...",
|
256 | module: {
|
257 | rules: [
|
258 | {
|
259 | test: /\.js$/,
|
260 | exclude: /node_modules/,
|
261 | loader: "eslint-loader",
|
262 | options: {
|
263 | failOnError: true
|
264 | }
|
265 | }
|
266 | ]
|
267 | }
|
268 | };
|
269 | ```
|
270 |
|
271 | ##### `outputReport` (default: `false`)
|
272 |
|
273 | Write the output of the errors to a file, for example a checkstyle xml file for use for reporting on Jenkins CI
|
274 |
|
275 | The `filePath` is relative to the webpack config: output.path
|
276 | You can pass in a different formatter for the output file, if none is passed in the default/configured formatter will be used
|
277 |
|
278 | ```js
|
279 | module.exports = {
|
280 | entry: "...",
|
281 | module: {
|
282 | rules: [
|
283 | {
|
284 | test: /\.js$/,
|
285 | exclude: /node_modules/,
|
286 | loader: "eslint-loader",
|
287 | options: {
|
288 | outputReport: {
|
289 | filePath: "checkstyle.xml",
|
290 | formatter: require("eslint/lib/formatters/checkstyle")
|
291 | }
|
292 | }
|
293 | }
|
294 | ]
|
295 | }
|
296 | };
|
297 | ```
|
298 |
|
299 | ## Gotchas
|
300 |
|
301 | ### NoErrorsPlugin
|
302 |
|
303 | `NoErrorsPlugin` prevents webpack from outputting anything into a bundle. So even ESLint warnings
|
304 | will fail the build. No matter what error settings are used for `eslint-loader`.
|
305 |
|
306 | So if you want to see ESLint warnings in console during development using `WebpackDevServer`
|
307 | remove `NoErrorsPlugin` from webpack config.
|
308 |
|
309 | ### Defining `configFile` or using `eslint -c path/.eslintrc`
|
310 |
|
311 | Bear in mind that when you define `configFile`, `eslint` doesn't automatically look for
|
312 | `.eslintrc` files in the directory of the file to be linted.
|
313 | More information is available in official eslint documentation in section [_Using Configuration Files_](http://eslint.org/docs/user-guide/configuring#using-configuration-files).
|
314 | See [#129](https://github.com/webpack-contrib/eslint-loader/issues/129).
|
315 |
|
316 | ---
|
317 |
|
318 | ## [Changelog](CHANGELOG.md)
|
319 |
|
320 | ## [License](LICENSE)
|