Skip to content

Commit 2cd1959

Browse files
mysticateamysticatea
committed
update attributes-order
1 parent f7a3056 commit 2cd1959

File tree

1 file changed

+110
-111
lines changed

1 file changed

+110
-111
lines changed

‎docs/rules/attributes-order.md

Lines changed: 110 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -6,129 +6,128 @@
66
## :book: Rule Details
77

88
This rule aims to enforce ordering of component attributes. The default order is specified in the [Vue styleguide](https://vuejs.org/v2/style-guide/#Element-attribute-order-recommended) and is:
9-
- DEFINITION
10-
ex: 'is'
11-
- LIST_RENDERING
12-
ex: 'v-for item in items'
13-
- CONDITIONALS
14-
ex: 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'
15-
- RENDER_MODIFIERS
16-
ex: 'v-once', 'v-pre'
17-
- GLOBAL
18-
ex: 'id'
19-
- UNIQUE
20-
ex: 'ref', 'key', 'slot'
21-
- TWO\_WAY\_BINDING
22-
ex: 'v-model'
23-
- OTHER_DIRECTIVES
24-
ex: 'v-custom-directive'
25-
- OTHER_ATTR
26-
ex: 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="foo"'
27-
- EVENTS
28-
ex: '@click="functionCall"', 'v-on="event"'
29-
- CONTENT
30-
ex: 'v-text', 'v-html'
31-
32-
:+1: Examples of **correct** code`:
33-
34-
```html
35-
<div
36-
is="header"
37-
v-for="item in items"
38-
v-if="!visible"
39-
v-once
40-
id="uniqueID"
41-
ref="header"
42-
v-model="headerData"
43-
my-prop="prop"
44-
@click="functionCall"
45-
v-text="textContent">
46-
</div>
47-
```
489

49-
```html
50-
<div
51-
v-for="item in items"
52-
v-if="!visible"
53-
prop-one="prop"
54-
:prop-two="prop"
55-
prop-three="prop"
56-
@click="functionCall"
57-
v-text="textContent">
58-
</div>
10+
- `DEFINITION`
11+
ex: 'is'
12+
- `LIST_RENDERING`
13+
ex: 'v-for item in items'
14+
- `CONDITIONALS`
15+
ex: 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'
16+
- `RENDER_MODIFIERS`
17+
ex: 'v-once', 'v-pre'
18+
- `GLOBAL`
19+
ex: 'id'
20+
- `UNIQUE`
21+
ex: 'ref', 'key', 'slot'
22+
- `TWO_WAY_BINDING`
23+
ex: 'v-model'
24+
- `OTHER_DIRECTIVES`
25+
ex: 'v-custom-directive'
26+
- `OTHER_ATTR`
27+
ex: 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="foo"'
28+
- `EVENTS`
29+
ex: '@click="functionCall"', 'v-on="event"'
30+
- `CONTENT`
31+
ex: 'v-text', 'v-html'
32+
33+
### the default order
34+
35+
<eslint-code-block :rules="{'vue/attributes-order': ['error']}">
5936
```
60-
61-
```html
62-
<div
63-
prop-one="prop"
64-
:prop-two="prop"
65-
prop-three="prop">
66-
</div>
37+
<template>
38+
<!-- ✓ GOOD -->
39+
<div
40+
is="header"
41+
v-for="item in items"
42+
v-if="!visible"
43+
v-once
44+
id="uniqueID"
45+
ref="header"
46+
v-model="headerData"
47+
my-prop="prop"
48+
@click="functionCall"
49+
v-text="textContent">
50+
</div>
51+
<div
52+
v-for="item in items"
53+
v-if="!visible"
54+
prop-one="prop"
55+
:prop-two="prop"
56+
prop-three="prop"
57+
@click="functionCall"
58+
v-text="textContent">
59+
</div>
60+
<div
61+
prop-one="prop"
62+
:prop-two="prop"
63+
prop-three="prop">
64+
</div>
65+
66+
<!-- ✗ BAD -->
67+
<div
68+
ref="header"
69+
v-for="item in items"
70+
v-once
71+
id="uniqueID"
72+
v-model="headerData"
73+
my-prop="prop"
74+
v-if="!visible"
75+
is="header"
76+
@click="functionCall"
77+
v-text="textContent">
78+
</div>
79+
</template>
6780
```
81+
</eslint-code-block>
6882

69-
:-1: Examples of **incorrect** code`:
70-
71-
```html
72-
<div
73-
ref="header"
74-
v-for="item in items"
75-
v-once
76-
id="uniqueID"
77-
v-model="headerData"
78-
my-prop="prop"
79-
v-if="!visible"
80-
is="header"
81-
@click="functionCall"
82-
v-text="textContent">
83-
</div>
84-
```
85-
86-
### `order`
87-
88-
Specify custom order of attribute groups
83+
### custom orders
8984

90-
:+1: Examples of **correct** code with custom order`:
85+
#### `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
9186

92-
```html
93-
<!-- 'vue/attributes-order': [2, { order: ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', ['BINDING', 'OTHER_ATTR'], 'EVENTS', 'CONTENT'] }] -->
94-
<div
95-
is="header"
96-
prop-one="prop"
97-
:prop-two="prop">
98-
</div>
87+
<eslint-code-block :rules="{'vue/attributes-order': ['error', {order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
9988
```
100-
101-
```html
102-
<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
103-
<div
104-
prop-one="prop"
105-
prop-two="prop"
106-
is="header">
107-
</div>
108-
```
109-
110-
```html
111-
<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
112-
<div
113-
ref="header"
114-
is="header"
115-
prop-one="prop"
116-
prop-two="prop">
117-
</div>
89+
<template>
90+
<!-- ✓ GOOD -->
91+
<div
92+
ref="header"
93+
is="header"
94+
prop-one="prop"
95+
prop-two="prop">
96+
</div>
97+
98+
<!-- ✗ BAD -->
99+
<div
100+
ref="header"
101+
prop-one="prop"
102+
is="header">
103+
</div>
104+
</template>
118105
```
106+
</eslint-code-block>
119107

120-
:-1: Examples of **incorrect** code with custom order`:
108+
#### `[['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
121109

122-
```html
123-
<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
124-
<div
125-
ref="header"
126-
prop-one="prop"
127-
is="header">
128-
</div>
110+
<eslint-code-block :rules="{'vue/attributes-order': ['error', {order: [['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
111+
```
112+
<template>
113+
<!-- ✓ GOOD -->
114+
<div
115+
ref="header"
116+
is="header"
117+
prop-one="prop"
118+
prop-two="prop">
119+
</div>
120+
<div
121+
is="header"
122+
ref="header"
123+
prop-one="prop"
124+
prop-two="prop">
125+
</div>
126+
</template>
129127
```
128+
</eslint-code-block>
130129

131-
## Related links
130+
## :books: Further reading
132131

133132
- [Style guide - Element attribute order](https://vuejs.org/v2/style-guide/#Element-attribute-order-recommended)
134133

0 commit comments

Comments
 (0)