1 | # @vue/cli-plugin-eslint
|
2 |
|
3 | > eslint plugin for vue-cli
|
4 |
|
5 | ## Injected Commands
|
6 |
|
7 | - **`vue-cli-service lint`**
|
8 |
|
9 | ```
|
10 | Usage: vue-cli-service lint [options] [...files]
|
11 |
|
12 | Options:
|
13 |
|
14 | --format [formatter] specify formatter (default: codeframe)
|
15 | --no-fix do not fix errors
|
16 | --max-errors specify number of errors to make build failed (default: 0)
|
17 | --max-warnings specify number of warnings to make build failed (default: Infinity)
|
18 | ```
|
19 |
|
20 | Lints and fixes files. If no specific files are given, it lints all files in `src` and `tests`.
|
21 |
|
22 | Other [ESLint CLI options](https://eslint.org/docs/user-guide/command-line-interface#options) are also supported.
|
23 |
|
24 | ## Configuration
|
25 |
|
26 | ESLint can be configured via `.eslintrc` or the `eslintConfig` field in `package.json`. See the [ESLint configuration docs](https://eslint.org/docs/user-guide/configuring) for more detail.
|
27 |
|
28 | ::: tip
|
29 | The following option is under the section of [`vue.config.js`](https://cli.vuejs.org/config/#vue-config-js). It is respected only when `@vue/cli-plugin-eslint` is installed.
|
30 | :::
|
31 |
|
32 | Lint-on-save during development with `eslint-loader` is enabled by default. It can be disabled with the `lintOnSave` option in `vue.config.js`:
|
33 |
|
34 | ``` js
|
35 | module.exports = {
|
36 | lintOnSave: false
|
37 | }
|
38 | ```
|
39 |
|
40 | When set to `true`, `eslint-loader` will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation.
|
41 |
|
42 | To make lint errors show up in the browser overlay, you can use `lintOnSave: 'error'`. This will force `eslint-loader` to always emit errors. this also means lint errors will now cause the compilation to fail.
|
43 |
|
44 | Alternatively, you can configure the overlay to display both warnings and errors:
|
45 |
|
46 | ``` js
|
47 | // vue.config.js
|
48 | module.exports = {
|
49 | devServer: {
|
50 | overlay: {
|
51 | warnings: true,
|
52 | errors: true
|
53 | }
|
54 | }
|
55 | }
|
56 | ```
|
57 |
|
58 | When `lintOnSave` is a truthy value, `eslint-loader` will be applied in both development and production. If you want to disable `eslint-loader` during production build, you can use the following config:
|
59 |
|
60 | ``` js
|
61 | // vue.config.js
|
62 | module.exports = {
|
63 | lintOnSave: process.env.NODE_ENV !== 'production'
|
64 | }
|
65 | ```
|
66 |
|
67 | ## Installing in an Already Created Project
|
68 |
|
69 | ``` sh
|
70 | vue add eslint
|
71 | ```
|
72 |
|
73 | ## Injected webpack-chain Rules
|
74 |
|
75 | - `config.module.rule('eslint')`
|
76 | - `config.module.rule('eslint').use('eslint-loader')`
|