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 341bccf

Browse files
tinyminsmichalsnik
authored andcommitted
Add support for grouping ordered attributes (#471)
1 parent c49a2e2 commit 341bccf

File tree

3 files changed

+94
-11
lines changed

3 files changed

+94
-11
lines changed

‎docs/rules/attributes-order.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,16 @@ Specify custom order of attribute groups
9090
:+1: Examples of **correct** code with custom order`:
9191

9292
```html
93-
<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
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>
99+
```
100+
101+
```html
102+
<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
94103
<div
95104
prop-one="prop"
96105
prop-two="prop"

‎lib/rules/attributes-order.js

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,11 @@ function getAttributeType (name, isDirective) {
3838
}
3939
}
4040
}
41-
function getPosition (attribute, attributeOrder) {
42-
let attributeType
43-
if (attribute.directive && attribute.key.name === 'bind') {
44-
attributeType = getAttributeType(attribute.key.argument, false)
45-
} else {
46-
attributeType = getAttributeType(attribute.key.name, attribute.directive)
47-
}
48-
return attributeOrder.indexOf(attributeType)
41+
function getPosition (attribute, attributePosition) {
42+
const attributeType = attribute.directive && attribute.key.name === 'bind'
43+
? getAttributeType(attribute.key.argument, false)
44+
: getAttributeType(attribute.key.name, attribute.directive)
45+
return attributePosition.hasOwnProperty(attributeType) ? attributePosition[attributeType] : -1
4946
}
5047

5148
function create (context) {
@@ -54,6 +51,14 @@ function create (context) {
5451
if (context.options[0] && context.options[0].order) {
5552
attributeOrder = context.options[0].order
5653
}
54+
const attributePosition = {}
55+
attributeOrder.forEach((item, i) => {
56+
if (item instanceof Array) {
57+
item.forEach((attr) => {
58+
attributePosition[attr] = i
59+
})
60+
} else attributePosition[item] = i
61+
})
5762
let currentPosition
5863
let previousNode
5964

@@ -101,8 +106,8 @@ function create (context) {
101106
previousNode = null
102107
},
103108
'VAttribute' (node) {
104-
if ((currentPosition === -1) || (currentPosition <= getPosition(node, attributeOrder))) {
105-
currentPosition = getPosition(node, attributeOrder)
109+
if ((currentPosition === -1) || (currentPosition <= getPosition(node, attributePosition))) {
110+
currentPosition = getPosition(node, attributePosition)
106111
previousNode = node
107112
} else {
108113
reportIssue(node, previousNode)

‎tests/lib/rules/attributes-order.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,33 @@ tester.run('attributes-order', rule, {
249249
'OTHER_DIRECTIVES'
250250
]
251251
}]
252+
},
253+
{
254+
filename: 'test.vue',
255+
code:
256+
`<template>
257+
<div
258+
v-if="!visible"
259+
class="content"
260+
:class="className"
261+
v-text="textContent"
262+
>
263+
</div>
264+
</template>`,
265+
options: [
266+
{ order:
267+
[
268+
'CONDITIONALS',
269+
'LIST_RENDERING',
270+
'RENDER_MODIFIERS',
271+
'DEFINITION',
272+
'EVENTS',
273+
'UNIQUE',
274+
['BINDING', 'OTHER_ATTR'],
275+
'CONTENT',
276+
'GLOBAL'
277+
]
278+
}]
252279
}
253280
],
254281

@@ -515,6 +542,48 @@ tester.run('attributes-order', rule, {
515542
nodeType: 'VIdentifier'
516543
}
517544
]
545+
},
546+
{
547+
code:
548+
`<template>
549+
<div
550+
class="content"
551+
v-if="!visible"
552+
:class="className"
553+
v-text="textContent"
554+
>
555+
</div>
556+
</template>`,
557+
options: [
558+
{ order:
559+
[
560+
'CONDITIONALS',
561+
'LIST_RENDERING',
562+
'RENDER_MODIFIERS',
563+
'DEFINITION',
564+
'EVENTS',
565+
'UNIQUE',
566+
['BINDING', 'OTHER_ATTR'],
567+
'CONTENT',
568+
'GLOBAL'
569+
]
570+
}],
571+
output:
572+
`<template>
573+
<div
574+
v-if="!visible"
575+
class="content"
576+
:class="className"
577+
v-text="textContent"
578+
>
579+
</div>
580+
</template>`,
581+
errors: [
582+
{
583+
message: 'Attribute "v-if" should go before "class".',
584+
nodeType: 'VIdentifier'
585+
}
586+
]
518587
}
519588
]
520589
})

0 commit comments

Comments
(0)

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