You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/user-guide/README.md
+21-20
Original file line number
Diff line number
Diff line change
@@ -47,12 +47,12 @@ module.exports = {
47
47
See [the rule list](../rules/README.md) to get the `extends`&`rules` that this plugin provides.
48
48
49
49
:::warning Reporting rules
50
-
By default all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application report warnings. What does it mean? By default - nothing, but if you want - you can set up a treshold and break the build after a certain amount of warnings, instead of any. More informations[here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings).
50
+
By default all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application - report warnings. What does it mean? By default - nothing, but if you want - you can set up a treshold and break the build after a certain amount of warnings, instead of any. More information[here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings).
51
51
:::
52
52
53
-
### Running ESLint from command line
53
+
### Running ESLint from the command line
54
54
55
-
If you want to run `eslint` from command line, make sure you include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern because ESLint targets only `.js` files by default.
55
+
If you want to run `eslint` from the command line, make sure you include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern, because ESLint targets only `.js` files by default.
56
56
57
57
Examples:
58
58
@@ -65,9 +65,9 @@ eslint "src/**/*.{js,vue}"
65
65
If you installed [@vue/cli-plugin-eslint](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint) you should have `lint` script added in your `package.json`. That means you can just run `yarn lint` or `npm run lint`.
66
66
:::
67
67
68
-
#### How to use custom parser?
68
+
#### How to use a custom parser?
69
69
70
-
If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/package/babel-eslint) or [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser), you have to use `parserOptions.parser` option instead of `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, so this plugin doesn't work if you overwrote`parser` option.
70
+
If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/package/babel-eslint) or [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser), you have to use the `parserOptions.parser` option instead of the `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, this plugin doesn't work if you overwrite the`parser` option.
71
71
72
72
```diff
73
73
- "parser": "babel-eslint",
@@ -78,16 +78,16 @@ If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/p
78
78
}
79
79
```
80
80
81
-
### How ESLint detects components?
81
+
### How does ESLint detect components?
82
82
83
-
All component-related rules are being applied to code that passes any of the following checks:
83
+
All component-related rules are applied to code that passes any of the following checks:
84
84
85
85
*`Vue.component()` expression
86
86
*`Vue.extend()` expression
87
87
*`Vue.mixin()` expression
88
88
*`export default {}` in `.vue` or `.jsx` file
89
89
90
-
If you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment `// @vue/component` that marks object in the next line as a Vue component in any file, e.g.:
90
+
However, if you want to take advantage of the rules in any of your custom objects that are Vue components, you might need to use the special comment `// @vue/component` that marks an object in the next line as a Vue component in any file, e.g.:
You can use `<!-- eslint-disable -->`-like HTML comments in `<template>` of `.vue` files to disable a certain rule temporarily.
114
+
You can use `<!-- eslint-disable -->`-like HTML comments in the `<template>` of `.vue` files to disable a certain rule temporarily.
115
115
116
116
For example:
117
117
@@ -123,15 +123,15 @@ For example:
123
123
</template>
124
124
```
125
125
126
-
If you want to disallow `eslint-disable` functionality in `<template>`, disable [vue/comment-directive](../rules/comment-directive.md) rule.
126
+
If you want to disallow `eslint-disable` functionality in `<template>`, disable the [vue/comment-directive](../rules/comment-directive.md) rule.
127
127
128
128
## :computer: Editor integrations
129
129
130
130
#### Visual Studio Code
131
131
132
-
Use [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension that Microsoft provides officially.
132
+
Use the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension that Microsoft provides officially.
133
133
134
-
You have to configure the `eslint.validate` option of the extension to check `.vue` files because the extension targets only `*.js` or `*.jsx` files by default.
134
+
You have to configure the `eslint.validate` option of the extension to check `.vue` files, because the extension targets only `*.js` or `*.jsx` files by default.
135
135
136
136
Example **.vscode/settings.json**:
137
137
@@ -145,7 +145,7 @@ Example **.vscode/settings.json**:
145
145
}
146
146
```
147
147
148
-
If you use `Vetur` plugin, set `"vetur.validation.template": false` to avoid default Vetur template validation. Check out [vetur documentation](https://vuejs.github.io/vetur/linting-error.html) for more info.
148
+
If you use the `Vetur` plugin, set `"vetur.validation.template": false` to avoid default Vetur template validation. Check out [vetur documentation](https://vuejs.github.io/vetur/linting-error.html) for more info.
149
149
150
150
#### Sublime Text
151
151
@@ -165,32 +165,33 @@ In the menu go to `Preferences > Package Settings > SublimeLinter > Settings` an
165
165
166
166
#### Atom editor
167
167
168
-
You need to go into `Settings -> Packages -> linter-eslint`, under the option "List of scopes to run eslint on", add `text.html.vue`. You may need to restart Atom.
168
+
Go into `Settings -> Packages -> linter-eslint`, under the option "List of scopes to run eslint on", add `text.html.vue`. You may need to restart Atom.
169
169
170
170
#### IntelliJ IDEA / JetBrains WebStorm
171
171
172
172
In the **Settings/Preferences** dialog (`Cmd+,`/`Ctrl+Alt+S`), choose JavaScript under **Languages and Frameworks** and then choose **ESLint** under **Code Quality Tools**.
173
173
On the **ESLint page** that opens, select the *Enable* checkbox.
174
174
175
-
If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose **Apply ESLint Code Style Rules**on the context menu.
175
+
If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose **Apply ESLint Code Style Rules**in the context menu.
### What is the "Use the latest vue-eslint-parser" error?
182
182
183
-
The most rules of `eslint-plugin-vue` require `vue-eslint-parser` to check `<template>` ASTs.
183
+
Most `eslint-plugin-vue` rules require `vue-eslint-parser` to check `<template>` ASTs.
184
184
185
185
Make sure you have one of the following settings in your **.eslintrc**:
186
186
187
187
-`"extends": ["plugin:vue/recommended"]`
188
188
-`"extends": ["plugin:vue/base"]`
189
189
190
-
If you already use other parser (e.g. `"parser": "babel-eslint"`), please move it into `parserOptions`, so it doesn't collide with the `vue-eslint-parser` used by this plugin's configuration:
190
+
If you already use another parser (e.g. `"parser": "babel-eslint"`), please move it into `parserOptions`, so it doesn't collide with the `vue-eslint-parser` used by this plugin's configuration:
191
191
192
192
```diff
193
193
- "parser": "babel-eslint",
194
+
"parser": "vue-eslint-parser",
194
195
"parserOptions": {
195
196
+ "parser": "babel-eslint",
196
197
"ecmaVersion": 2017,
@@ -200,7 +201,7 @@ If you already use other parser (e.g. `"parser": "babel-eslint"`), please move i
200
201
201
202
See also: "[Use together with custom parsers](#use-together-with-custom-parsers)" section.
202
203
203
-
### Why doesn't it work on .vue file?
204
+
### Why doesn't it work on .vue files?
204
205
205
206
1. Make sure you don't have `eslint-plugin-html` in your config. The `eslint-plugin-html` extracts the content from `<script>` tags, but `eslint-plugin-vue` requires `<script>` tags and `<template>` tags in order to distinguish template and script in single file components.
206
207
@@ -212,5 +213,5 @@ See also: "[Use together with custom parsers](#use-together-with-custom-parsers)
212
213
```
213
214
214
215
2. Make sure your tool is set to lint `.vue` files.
215
-
- CLI targets only `.js` files by default. You have to specify additional extensions by`--ext` option or glob patterns. E.g. `eslint "src/**/*.{js,vue}"` or `eslint src --ext .vue`. If you use `@vue/cli-plugin-eslint` and the `vue-cli-service lint` command - you don't have to worry about it.
216
-
- If you are having issues with configuring editor please read [editor integrations](#editor-integrations)
216
+
- CLI targets only `.js` files by default. You have to specify additional extensions with the`--ext` option or glob patterns. E.g. `eslint "src/**/*.{js,vue}"` or `eslint src --ext .vue`. If you use `@vue/cli-plugin-eslint` and the `vue-cli-service lint` command - you don't have to worry about it.
217
+
- If you are having issues with configuring editor, please read [editor integrations](#editor-integrations)
0 commit comments