7a78f73853c25b8ac94f81050c91df296ed1432e01e78365dd5c0bddd91f7a79c621e1ba2e9096d0f9bafc5484e0ecb5ed63d5728d6bc0059b5df8a60840b5 7.4 KB

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