Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d611cd8

Browse files
Merge pull request #205 from vuejs/style-guide-alignment
Style Guide Alignment
2 parents 947096f + 43432b2 commit d611cd8

File tree

138 files changed

+2218
-2353
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

138 files changed

+2218
-2353
lines changed

‎.eslintignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
node_modules
2-
lib/recommended-rules.js
2+
lib/*-rules.js
33
coverage
44
.nyc_output

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
/tests/integrations/*/node_modules
44
/node_modules
55
/test.*
6+
yarn.lock

‎README.md

Lines changed: 68 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -75,87 +75,109 @@ Vue.component('AsyncComponent', (resolve, reject) => {
7575
## :gear: Configs
7676

7777
This plugin provides two predefined configs:
78-
- `plugin:vue/base` - contains necessary settings for this plugin to work properly
79-
- `plugin:vue/recommended` - extends base config with recommended rules (the ones with check mark :white_check_mark: in the table below)
78+
- `plugin:vue/base` - Settings and rules to enable correct ESLint parsing
79+
- `plugin:vue/essential` - Above, plus rules to prevent errors or unintended behavior
80+
- `plugin:vue/strongly-recommended` - Above, plus rules to considerably improve code readability and/or dev experience
81+
- `plugin:vue/recommended` - Above, plus rules to enforce subjective community defaults to ensure consistency
8082

8183
## :bulb: Rules
8284

83-
Rules are grouped by category to help you understand their purpose.
85+
Rules are grouped by priority to help you understand their purpose. The `--fix` option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
8486

85-
No rules are enabled by `plugin:vue/base` config. The `plugin:vue/recommended` config enables rules that report common problems, which have a check mark :white_check_mark: below.
87+
<!--RULES_TABLE_START-->
8688

87-
The `--fix` option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
89+
### Base Rules (Enabling Correct ESLint Parsing)
8890

89-
<!--RULES_TABLE_START-->
91+
Enforce all the rules in this category, as well as all higher priority rules, with:
9092

91-
### Possible Errors
93+
``` json
94+
"extends": "plugin:vue/base"
95+
```
9296

9397
| | Rule ID | Description |
9498
|:---|:--------|:------------|
99+
| | [jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |
100+
101+
102+
### Priority A: Essential (Error Prevention)
103+
104+
Enforce all the rules in this category, as well as all higher priority rules, with:
105+
106+
``` json
107+
"extends": "plugin:vue/essential"
108+
```
109+
110+
| | Rule ID | Description |
111+
|:---|:--------|:------------|
112+
| | [no-async-in-computed-properties](./docs/rules/no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |
95113
| | [no-dupe-keys](./docs/rules/no-dupe-keys.md) | disallow duplication of field names |
96-
| :white_check_mark: | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>` |
114+
| | [no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplication of attributes |
115+
| | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>` |
97116
| | [no-reserved-keys](./docs/rules/no-reserved-keys.md) | disallow overwriting reserved keys |
98117
| | [no-shared-component-data](./docs/rules/no-shared-component-data.md) | enforce component's data property to be a function |
118+
| | [no-side-effects-in-computed-properties](./docs/rules/no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |
99119
| | [no-template-key](./docs/rules/no-template-key.md) | disallow `key` attribute on `<template>` |
120+
| | [no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>` |
100121
| | [no-unused-vars](./docs/rules/no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |
122+
| | [require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements |
101123
| | [require-render-return](./docs/rules/require-render-return.md) | enforce render function to always return value |
124+
| | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives |
102125
| | [require-valid-default-prop](./docs/rules/require-valid-default-prop.md) | enforce props default values to be valid |
103126
| | [return-in-computed-property](./docs/rules/return-in-computed-property.md) | enforce that a return statement is present in computed property |
104-
| :white_check_mark: | [valid-template-root](./docs/rules/valid-template-root.md) | enforce valid template root |
105-
| :white_check_mark: | [valid-v-bind](./docs/rules/valid-v-bind.md) | enforce valid `v-bind` directives |
106-
| :white_check_mark: | [valid-v-cloak](./docs/rules/valid-v-cloak.md) | enforce valid `v-cloak` directives |
107-
| :white_check_mark: | [valid-v-else-if](./docs/rules/valid-v-else-if.md) | enforce valid `v-else-if` directives |
108-
| :white_check_mark: | [valid-v-else](./docs/rules/valid-v-else.md) | enforce valid `v-else` directives |
109-
| :white_check_mark: | [valid-v-for](./docs/rules/valid-v-for.md) | enforce valid `v-for` directives |
110-
| :white_check_mark: | [valid-v-html](./docs/rules/valid-v-html.md) | enforce valid `v-html` directives |
111-
| :white_check_mark: | [valid-v-if](./docs/rules/valid-v-if.md) | enforce valid `v-if` directives |
112-
| :white_check_mark: | [valid-v-model](./docs/rules/valid-v-model.md) | enforce valid `v-model` directives |
113-
| :white_check_mark: | [valid-v-on](./docs/rules/valid-v-on.md) | enforce valid `v-on` directives |
114-
| :white_check_mark: | [valid-v-once](./docs/rules/valid-v-once.md) | enforce valid `v-once` directives |
115-
| :white_check_mark: | [valid-v-pre](./docs/rules/valid-v-pre.md) | enforce valid `v-pre` directives |
116-
| :white_check_mark: | [valid-v-show](./docs/rules/valid-v-show.md) | enforce valid `v-show` directives |
117-
| :white_check_mark: | [valid-v-text](./docs/rules/valid-v-text.md) | enforce valid `v-text` directives |
118-
119-
120-
### Best Practices
121-
122-
| | Rule ID | Description |
123-
|:---|:--------|:------------|
124-
| :wrench: | [html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style |
125-
| | [no-async-in-computed-properties](./docs/rules/no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |
126-
| :white_check_mark: | [no-confusing-v-for-v-if](./docs/rules/no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element |
127-
| | [no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplication of attributes |
128-
| | [no-side-effects-in-computed-properties](./docs/rules/no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |
129-
| :white_check_mark: | [no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>` |
130-
| | [order-in-components](./docs/rules/order-in-components.md) | enforce order of properties in components |
131-
| :white_check_mark: | [require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements |
132-
| | [require-default-prop](./docs/rules/require-default-prop.md) | require default value for props |
133-
| | [require-prop-types](./docs/rules/require-prop-types.md) | require type definitions in props |
134-
| :white_check_mark: | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives |
135-
| | [this-in-template](./docs/rules/this-in-template.md) | enforce usage of `this` in template |
136-
137-
138-
### Stylistic Issues
127+
| | [valid-template-root](./docs/rules/valid-template-root.md) | enforce valid template root |
128+
| | [valid-v-bind](./docs/rules/valid-v-bind.md) | enforce valid `v-bind` directives |
129+
| | [valid-v-cloak](./docs/rules/valid-v-cloak.md) | enforce valid `v-cloak` directives |
130+
| | [valid-v-else-if](./docs/rules/valid-v-else-if.md) | enforce valid `v-else-if` directives |
131+
| | [valid-v-else](./docs/rules/valid-v-else.md) | enforce valid `v-else` directives |
132+
| | [valid-v-for](./docs/rules/valid-v-for.md) | enforce valid `v-for` directives |
133+
| | [valid-v-html](./docs/rules/valid-v-html.md) | enforce valid `v-html` directives |
134+
| | [valid-v-if](./docs/rules/valid-v-if.md) | enforce valid `v-if` directives |
135+
| | [valid-v-model](./docs/rules/valid-v-model.md) | enforce valid `v-model` directives |
136+
| | [valid-v-on](./docs/rules/valid-v-on.md) | enforce valid `v-on` directives |
137+
| | [valid-v-once](./docs/rules/valid-v-once.md) | enforce valid `v-once` directives |
138+
| | [valid-v-pre](./docs/rules/valid-v-pre.md) | enforce valid `v-pre` directives |
139+
| | [valid-v-show](./docs/rules/valid-v-show.md) | enforce valid `v-show` directives |
140+
| | [valid-v-text](./docs/rules/valid-v-text.md) | enforce valid `v-text` directives |
141+
142+
143+
### Priority B: Strongly Recommended (Improving Readability)
144+
145+
Enforce all the rules in this category, as well as all higher priority rules, with:
146+
147+
``` json
148+
"extends": "plugin:vue/strongly-recommended"
149+
```
139150

140151
| | Rule ID | Description |
141152
|:---|:--------|:------------|
142153
| :wrench: | [attribute-hyphenation](./docs/rules/attribute-hyphenation.md) | enforce attribute naming style in template |
154+
| :wrench: | [html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style |
143155
| :wrench: | [html-indent](./docs/rules/html-indent.md) | enforce consistent indentation in `<template>` |
144-
| | [html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes |
145156
| :wrench: | [html-self-closing](./docs/rules/html-self-closing.md) | enforce self-closing style |
146157
| | [max-attributes-per-line](./docs/rules/max-attributes-per-line.md) | enforce the maximum number of attributes per line |
147158
| :wrench: | [mustache-interpolation-spacing](./docs/rules/mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations |
148159
| :wrench: | [name-property-casing](./docs/rules/name-property-casing.md) | enforce specific casing for the name property in Vue components |
149160
| :wrench: | [no-multi-spaces](./docs/rules/no-multi-spaces.md) | disallow multiple spaces |
161+
| | [require-default-prop](./docs/rules/require-default-prop.md) | require default value for props |
162+
| | [require-prop-types](./docs/rules/require-prop-types.md) | require type definitions in props |
150163
| :wrench: | [v-bind-style](./docs/rules/v-bind-style.md) | enforce `v-bind` directive style |
151164
| :wrench: | [v-on-style](./docs/rules/v-on-style.md) | enforce `v-on` directive style |
152165

153166

154-
### Variables
167+
### Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
168+
169+
Enforce all the rules in this category, as well as all higher priority rules, with:
170+
171+
``` json
172+
"extends": "plugin:vue/recommended"
173+
```
155174

156175
| | Rule ID | Description |
157176
|:---|:--------|:------------|
158-
| :white_check_mark: | [jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |
177+
| | [html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes |
178+
| | [no-confusing-v-for-v-if](./docs/rules/no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element |
179+
| | [order-in-components](./docs/rules/order-in-components.md) | enforce order of properties in components |
180+
| | [this-in-template](./docs/rules/this-in-template.md) | enforce usage of `this` in template |
159181

160182
### Deprecated
161183

‎docs/rules/attribute-hyphenation.md

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,41 +15,25 @@ Default casing is set to `always`
1515
:+1: Examples of **correct** code`:
1616

1717
```html
18-
<template>
19-
<foo my-prop="prop">
20-
<a onClick="return false"></a>
21-
</foo>
22-
</template>
18+
<MyComponent my-prop="prop"/>
2319
```
2420

2521
:-1: Examples of **incorrect** code`:
2622

2723
```html
28-
<template>
29-
<foo myProp="prop">
30-
<a onClick="return false"></a>
31-
</foo>
32-
</template>
24+
<MyComponent myProp="prop"/>
3325
```
3426

3527
### `"never"` - Don't use hyphenated name. (It errors on hyphens except `data-` and `aria-`.)
3628

3729
:+1: Examples of **correct** code`:
3830

3931
```html
40-
<template>
41-
<foo myProp="prop">
42-
<a onClick="return false"></a>
43-
</foo>
44-
</template>
32+
<MyComponent myProp="prop"/>
4533
```
4634

4735
:-1: Examples of **incorrect** code`:
4836

4937
```html
50-
<template>
51-
<foo my-prop="prop">
52-
<a onClick="return false"></a>
53-
</foo>
54-
</template>
38+
<MyComponent my-prop="prop"/>
5539
```

‎docs/rules/html-end-tags.md

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,21 @@ This rule reports the following elements:
1717
:-1: Examples of **incorrect** code for this rule:
1818

1919
```html
20-
<template>
21-
<div>
22-
<div>
23-
<p>
24-
<p>
25-
<input></input>
26-
<br></br>
27-
</div>
28-
</template>
20+
<div>
21+
<p>
22+
<p>
23+
<input></input>
24+
<br></br>
2925
```
3026

3127
:+1: Examples of **correct** code for this rule:
3228

3329
```html
34-
<template>
35-
<div>
36-
<div></div>
37-
<p></p>
38-
<p></p>
39-
<div />
40-
<input>
41-
<br>
42-
</div>
43-
</template>
30+
<div></div>
31+
<p></p>
32+
<p></p>
33+
<input>
34+
<br>
4435
```
4536

4637
## :wrench: Options

‎docs/rules/html-indent.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
6565
}
6666
```
6767

68-
- `type` (`number | "tab"`) ... The type of indentation. Default is `4`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
68+
- `type` (`number | "tab"`) ... The type of indentation. Default is `2`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
6969
- `attribute` (`integer`) ... The multiplier of indentation for attributes. Default is `1`.
7070
- `closeBracket` (`integer`) ... The multiplier of indentation for right brackets. Default is `0`.
7171
- `ignores` (`string[]`) ... The selector to ignore nodes. The AST spec is [here](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md). You can use [esquery](https://github.com/estools/esquery#readme) to select nodes. Default is an empty array.

‎docs/rules/html-quotes.md

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,43 +15,27 @@ This rule reports the quotes of attributes if it is different to configured quot
1515
:-1: Examples of **incorrect** code for this rule:
1616

1717
```html
18-
<template>
19-
<div>
20-
<img src='./logo.png'>
21-
<img src=./logo.png>
22-
</div>
23-
</template>
18+
<img src='./logo.png'>
19+
<img src=./logo.png>
2420
```
2521

2622
:+1: Examples of **correct** code for this rule:
2723

2824
```html
29-
<template>
30-
<div>
31-
<img src="./logo.png">
32-
</div>
33-
</template>
25+
<img src="./logo.png">
3426
```
3527

3628
:-1: Examples of **incorrect** code for this rule with `"single"` option:
3729

3830
```html
39-
<template>
40-
<div>
41-
<img src="./logo.png">
42-
<img src=./logo.png>
43-
</div>
44-
</template>
31+
<img src="./logo.png">
32+
<img src=./logo.png>
4533
```
4634

4735
:+1: Examples of **correct** code for this rule with `"single"` option:
4836

4937
```html
50-
<template>
51-
<div>
52-
<img src='./logo.png'>
53-
</div>
54-
</template>
38+
<img src='./logo.png'>
5539
```
5640

5741
## :wrench: Options

‎docs/rules/html-self-closing.md

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44

55
In Vue.js template, we can use either two styles for elements which don't have their content.
66

7-
1. `<your-component></your-component>`
8-
2. `<your-component />` (self-closing)
7+
1. `<YourComponent></YourComponent>`
8+
2. `<YourComponent/>` (self-closing)
99

1010
Self-closing is simple and shorter, but it's not supported in raw HTML.
1111
This rule helps you to unify the self-closing style.
@@ -16,20 +16,20 @@ This rule has options which specify self-closing style for each context.
1616

1717
```json
1818
{
19-
"html-self-closing": [2, {
20-
"html": {
21-
"normal": "never",
22-
"void": "never",
23-
"component": "always"
24-
},
25-
"svg": "always",
26-
"math": "always"
27-
}]
19+
"html-self-closing": ["error", {
20+
"html": {
21+
"void": "never",
22+
"normal": "always",
23+
"component": "always"
24+
},
25+
"svg": "always",
26+
"math": "always"
27+
}]
2828
}
2929
```
3030

31-
- `html.normal` (`"never"` by default) ... The style of well-known HTML elements except void elements.
3231
- `html.void` (`"never"` by default) ... The style of well-known HTML void elements.
32+
- `html.normal` (`"always"` by default) ... The style of well-known HTML elements except void elements.
3333
- `html.component` (`"always"` by default) ... The style of Vue.js custom components.
3434
- `svg`(`"always"` by default) .... The style of well-known SVG elements.
3535
- `math`(`"always"` by default) .... The style of well-known MathML elements.
@@ -45,25 +45,18 @@ Every option can be set to one of the following values:
4545
:-1: Examples of **incorrect** code for this rule:
4646

4747
```html
48-
/*eslint html-self-closing: "error"*/
49-
50-
<template>
51-
<div />
52-
<img />
53-
<your-component></your-component>
54-
<svg><path d=""></path></svg>
55-
</template>
48+
<div></div>
49+
<img/>
50+
<img></img>
51+
<MyComponent/></MyComponent>
52+
<svg><path d=""></path></svg>
5653
```
5754

5855
:+1: Examples of **correct** code for this rule:
5956

6057
```html
61-
/*eslint html-self-closing: "error"*/
62-
63-
<template>
64-
<div></div>
65-
<img>
66-
<your-component />
67-
<svg><path d="" /></svg>
68-
</template>
58+
<div/>
59+
<img>
60+
<MyComponent/>
61+
<svg><path d=""/></svg>
6962
```

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /