Skip to content

Commit 116eb34

Browse files
mysticateamysticatea
committed
update max-attributes-per-line
1 parent fe78932 commit 116eb34

File tree

1 file changed

+66
-85
lines changed

1 file changed

+66
-85
lines changed

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

Lines changed: 66 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55

66
Limits the maximum number of attributes/properties per line to improve readability.
77

8-
98
## :book: Rule Details
109

1110
This rule aims to enforce a number of attributes per line in templates.
@@ -14,43 +13,39 @@ An attribute is considered to be in a new line when there is a line break betwee
1413

1514
There is a configurable number of attributes that are acceptable in one-line case (default 1), as well as how many attributes are acceptable per line in multi-line case (default 1).
1615

17-
:-1: Examples of **incorrect** code for this rule:
18-
19-
```html
20-
<MyComponent lorem="1" ipsum="2"/>
21-
22-
<MyComponent
23-
lorem="1" ipsum="2"
24-
/>
25-
26-
<MyComponent
27-
lorem="1" ipsum="2"
28-
dolor="3"
29-
/>
16+
<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error']}">
3017
```
31-
32-
:+1: Examples of **correct** code for this rule:
33-
34-
```html
35-
<MyComponent lorem="1"/>
36-
37-
<MyComponent
38-
lorem="1"
39-
ipsum="2"
40-
/>
41-
42-
<MyComponent
43-
lorem="1"
44-
ipsum="2"
45-
dolor="3"
46-
/>
18+
<template>
19+
<!-- ✓ GOOD -->
20+
<MyComponent lorem="1"/>
21+
<MyComponent
22+
lorem="1"
23+
ipsum="2"
24+
/>
25+
<MyComponent
26+
lorem="1"
27+
ipsum="2"
28+
dolor="3"
29+
/>
30+
31+
<!-- ✗ BAD -->
32+
<MyComponent lorem="1" ipsum="2"/>
33+
<MyComponent
34+
lorem="1" ipsum="2"
35+
/>
36+
<MyComponent
37+
lorem="1" ipsum="2"
38+
dolor="3"
39+
/>
40+
</template>
4741
```
42+
</eslint-code-block>
4843

49-
### :wrench: Options
44+
## :wrench: Options
5045

5146
```json
5247
{
53-
"vue/max-attributes-per-line": [2, {
48+
"vue/max-attributes-per-line": ["error", {
5449
"singleline": 1,
5550
"multiline": {
5651
"max": 1,
@@ -60,73 +55,59 @@ There is a configurable number of attributes that are acceptable in one-line cas
6055
}
6156
```
6257

63-
#### `allowFirstLine`
64-
65-
For multi-line declarations, defines if allows attributes to be put in the first line. (Default false)
58+
- `singleline` (`number`) ... The number of maximum attributes per line when the opening tag is in a single line. Default is `1`.
59+
- `multiline.max` (`number`) ... The max number of attributes per line when the opening tag is in multiple lines. Default is `1`. This can be `{ multiline: 1 }` instead of `{ multiline: { max: 1 }}` if you don't configure `allowFirstLine` property.
60+
- `multiline.allowFirstLine` (`boolean`) ... If `true`, it allows attributes on the same line as that tag name. Default is `false`.
6661

67-
:-1: Example of **incorrect** code for this setting:
62+
### `{ "singleline": 3 }`
6863

69-
```html
70-
<!-- [{ "multiline": { "allowFirstLine": false }}] -->
71-
<MyComponent foo="John"
72-
bar="Smith"
73-
/>
64+
<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {singleline: 3}]}">
7465
```
66+
<template>
67+
<!-- ✓ GOOD -->
68+
<MyComponent lorem="1" ipsum="2" dolor="3" />
7569
76-
:+1: Example of **correct** code for this setting:
77-
78-
```html
79-
<!-- [{ "multiline": { "allowFirstLine": false }}] -->
80-
<MyComponent
81-
foo="John"
82-
bar="Smith"
83-
/>
70+
<!-- ✗ BAD -->
71+
<MyComponent lorem="1" ipsum="2" dolor="3" sit="4" />
72+
</template>
8473
```
74+
</eslint-code-block>
8575

86-
#### `singleline`
87-
88-
Number of maximum attributes per line when the opening tag is in a single line. (Default is 1)
76+
### `{ multiline: 2 }`
8977

90-
:-1: Example of **incorrect** code for this setting:
91-
```html
92-
<!-- [{"singleline": 1}] -->
93-
<MyComponent foo="John" bar="Smith"/>
78+
<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {multiline: 2}]}">
9479
```
95-
96-
:+1: Example of **correct** code for this setting:
97-
```html
98-
<!-- [{"singleline": 1}] -->
99-
<MyComponent foo="John"/>
80+
<template>
81+
<!-- ✓ GOOD -->
82+
<MyComponent
83+
lorem="1" ipsum="2"
84+
dolor="3"
85+
/>
86+
87+
<!-- ✗ BAD -->
88+
<MyComponent
89+
lorem="1" ipsum="2" dolor="3"
90+
sit="4"
91+
/>
92+
</template>
10093
```
94+
</eslint-code-block>
10195

102-
#### `multiline`
103-
104-
Number of maximum attributes per line when a tag is in multiple lines. (Default is 1)
105-
106-
:-1: Example of **incorrect** code for this setting:
96+
### `{ multiline: 1, allowFirstLine: true }`
10797

108-
```html
109-
<!-- [{"multiline": 1}] -->
110-
<MyComponent
111-
foo="John" bar="Smith"
112-
/>
98+
<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {multiline: { allowFirstLine: true }}]}">
11399
```
114-
115-
:+1: Example of **correct** code for this setting:
116-
117-
```html
118-
<!-- [{"multiline": 1}] -->
119-
<MyComponent
120-
foo="John"
121-
bar="Smith"
122-
/>
100+
<template>
101+
<!-- ✓ GOOD -->
102+
<MyComponent lorem="1"
103+
ipsum="2"
104+
dolor="3"
105+
/>
106+
</template>
123107
```
108+
</eslint-code-block>
124109

125-
## When Not To Use It
126-
127-
If you do not want to check the number of attributes declared per line you can disable this rule.
128-
129-
## Related links
110+
## :books: Further reading
130111

131112
- [Style guide - Multi attribute elements](https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended)
132113

0 commit comments

Comments
 (0)