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