Skip to content

Commit 978ddd3

Browse files
chrisvfritzchrisvfritz
committed
update documentation examples to match style guide
1 parent e419479 commit 978ddd3

Some content is hidden

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

58 files changed

+720
-938
lines changed

‎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-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
```

‎docs/rules/jsx-uses-vars.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ This rule only has an effect when the `no-unused-vars` rule is enabled.
1010
Without this rule this code triggers warning:
1111

1212
```js
13-
import Hello from './Hello';
13+
import HelloWorld from './HelloWorld';
1414

1515
export default {
1616
render () {
1717
return (
18-
<Hello msg="world"></Hello>
18+
<HelloWorld msg="world"/>
1919
)
2020
},
2121
};

‎docs/rules/max-attributes-per-line.md

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,33 @@ There is a configurable number of attributes that are acceptable in one-line cas
1414
:-1: Examples of **incorrect** code for this rule:
1515

1616
```html
17-
<component lorem="1" ipsum="2" dolor="3" sit="4">
18-
</component>
17+
<MyComponent lorem="1" ipsum="2"/>
1918

20-
<component
19+
<MyComponent
20+
lorem="1" ipsum="2"
21+
/>
22+
23+
<MyComponent
2124
lorem="1" ipsum="2"
2225
dolor="3"
23-
sit="4"
24-
>
25-
</component>
26+
/>
2627
```
2728

2829
:+1: Examples of **correct** code for this rule:
2930

3031
```html
31-
<component lorem="1" ipsum="2" dolor="3">
32-
</component>
32+
<MyComponent lorem="1"/>
33+
34+
<MyComponent
35+
lorem="1"
36+
ipsum="2"
37+
/>
3338

34-
<component
39+
<MyComponent
3540
lorem="1"
3641
ipsum="2"
3742
dolor="3"
38-
sit="4"
39-
>
40-
</component>
43+
/>
4144
```
4245

4346
### :wrench: Options
@@ -55,67 +58,67 @@ There is a configurable number of attributes that are acceptable in one-line cas
5558
```
5659

5760
#### `allowFirstLine`
61+
5862
For multi-line declarations, defines if allows attributes to be put in the first line. (Default false)
5963

6064
:-1: Example of **incorrect** code for this setting:
65+
6166
```html
62-
// [{ "multiline": { "allowFirstLine": false }}]
63-
<component foo="John" bar="Smith"
64-
foobar={5555555}>
65-
</component>;
67+
<!-- [{ "multiline": { "allowFirstLine": false }}] -->
68+
<MyComponent foo="John"
69+
bar="Smith"
70+
/>
6671
```
6772

6873
:+1: Example of **correct** code for this setting:
74+
6975
```html
70-
// [{ "multiline": { "allowFirstLine": false }}]
71-
<component
76+
<!-- [{ "multiline": { "allowFirstLine": false }}] -->
77+
<MyComponent
7278
foo="John"
7379
bar="Smith"
74-
foobar={5555555}
75-
>
76-
</component>;
80+
/>
7781
```
7882

79-
8083
#### `singleline`
81-
Number of maximum attributes per line when the opening tag is in a single line. (Default is 3)
84+
85+
Number of maximum attributes per line when the opening tag is in a single line. (Default is 1)
8286

8387
:-1: Example of **incorrect** code for this setting:
8488
```html
85-
// [{"singleline": 2,}]
86-
<component foo="John" bar="Smith" foobar={5555555}></component>;
89+
<!-- [{"singleline": 1}] -->
90+
<MyComponent foo="John" bar="Smith"/>
8791
```
8892

8993
:+1: Example of **correct** code for this setting:
9094
```html
91-
// [{"singleline": 3,}]
92-
<component foo="John" bar="Smith" foobar={5555555}></component>;
95+
<!-- [{"singleline": 1}] -->
96+
<MyComponent foo="John"/>
9397
```
9498

95-
9699
#### `multiline`
100+
97101
Number of maximum attributes per line when a tag is in multiple lines. (Default is 1)
98102

99103
:-1: Example of **incorrect** code for this setting:
104+
100105
```html
101-
// [{"multiline": 1}]
102-
<component foo="John" bar="Smith"
103-
foobar={5555555}>
104-
</component>;
106+
<!-- [{"multiline": 1}] -->
107+
<MyComponent
108+
foo="John" bar="Smith"
109+
/>
105110
```
106111

107112
:+1: Example of **correct** code for this setting:
113+
108114
```html
109-
// [{"multiline": 1}]
110-
<component
115+
<!-- [{"multiline": 1}] -->
116+
<MyComponent
111117
foo="John"
112118
bar="Smith"
113-
foobar={5555555}
114-
>
115-
</component>;
119+
/>
116120
```
117121

118122
## When Not To Use It
119123

120124
If you do not want to check the number of attributes declared per line you can disable this rule.
121-

0 commit comments

Comments
 (0)