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 116eb34

Browse files
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)

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