Skip to content

Commit 18076fd

Browse files
719mediaota-meshi
andcommitted
Update README.md (#946)
* Update README.md * Update README.md grammar, copy note about parser down to 2nd example Co-authored-by: Yosuke Ota <[email protected]>
1 parent 5cce6e0 commit 18076fd

File tree

1 file changed

+21
-20
lines changed

1 file changed

+21
-20
lines changed

docs/user-guide/README.md

+21-20
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@ module.exports = {
4747
See [the rule list](../rules/README.md) to get the `extends` &amp; `rules` that this plugin provides.
4848

4949
:::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).
5151
:::
5252

53-
### Running ESLint from command line
53+
### Running ESLint from the command line
5454

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.
5656

5757
Examples:
5858

@@ -65,9 +65,9 @@ eslint "src/**/*.{js,vue}"
6565
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`.
6666
:::
6767

68-
#### How to use custom parser?
68+
#### How to use a custom parser?
6969

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.
7171

7272
```diff
7373
- "parser": "babel-eslint",
@@ -78,16 +78,16 @@ If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/p
7878
}
7979
```
8080

81-
### How ESLint detects components?
81+
### How does ESLint detect components?
8282

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:
8484

8585
* `Vue.component()` expression
8686
* `Vue.extend()` expression
8787
* `Vue.mixin()` expression
8888
* `export default {}` in `.vue` or `.jsx` file
8989

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.:
9191

9292
```js
9393
// @vue/component
@@ -111,7 +111,7 @@ Vue.component('AsyncComponent', (resolve, reject) => {
111111

112112
### Disabling rules via `<!-- eslint-disable -->`
113113

114-
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.
115115

116116
For example:
117117

@@ -123,15 +123,15 @@ For example:
123123
</template>
124124
```
125125

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.
127127

128128
## :computer: Editor integrations
129129

130130
#### Visual Studio Code
131131

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.
133133

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.
135135

136136
Example **.vscode/settings.json**:
137137

@@ -145,7 +145,7 @@ Example **.vscode/settings.json**:
145145
}
146146
```
147147

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.
149149

150150
#### Sublime Text
151151

@@ -165,32 +165,33 @@ In the menu go to `Preferences > Package Settings > SublimeLinter > Settings` an
165165

166166
#### Atom editor
167167

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.
169169

170170
#### IntelliJ IDEA / JetBrains WebStorm
171171

172172
In the **Settings/Preferences** dialog (`Cmd+,`/`Ctrl+Alt+S`), choose JavaScript under **Languages and Frameworks** and then choose **ESLint** under **Code Quality Tools**.
173173
On the **ESLint page** that opens, select the *Enable* checkbox.
174174

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.
176176

177177
read more: [JetBrains - ESLint](https://www.jetbrains.com/help/idea/eslint.html)
178178

179179
## :question: FAQ
180180

181181
### What is the "Use the latest vue-eslint-parser" error?
182182

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.
184184

185185
Make sure you have one of the following settings in your **.eslintrc**:
186186

187187
- `"extends": ["plugin:vue/recommended"]`
188188
- `"extends": ["plugin:vue/base"]`
189189

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:
191191

192192
```diff
193193
- "parser": "babel-eslint",
194+
"parser": "vue-eslint-parser",
194195
"parserOptions": {
195196
+ "parser": "babel-eslint",
196197
"ecmaVersion": 2017,
@@ -200,7 +201,7 @@ If you already use other parser (e.g. `"parser": "babel-eslint"`), please move i
200201

201202
See also: "[Use together with custom parsers](#use-together-with-custom-parsers)" section.
202203

203-
### Why doesn't it work on .vue file?
204+
### Why doesn't it work on .vue files?
204205

205206
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.
206207

@@ -212,5 +213,5 @@ See also: "[Use together with custom parsers](#use-together-with-custom-parsers)
212213
```
213214

214215
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

Comments
 (0)