diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 913368f71..e7b9a6209 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -18,10 +18,12 @@ ex: 'v-once', 'v-pre'
ex: 'id'
- UNIQUE
ex: 'ref', 'key', 'slot'
-- BINDING
-ex: 'v-model', 'v-bind', ':property="foo"'
+- TWO\_WAY\_BINDING
+ex: 'v-model'
+- OTHER_DIRECTIVES
+ex: 'v-custom-directive'
- OTHER_ATTR
-ex: 'customProp="foo"'
+ex: 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="foo"'
- EVENTS
ex: '@click="functionCall"', 'v-on="event"'
- CONTENT
@@ -38,7 +40,7 @@ ex: 'v-text', 'v-html'
id="uniqueID"
ref="header"
v-model="headerData"
- myProp="prop"
+ my-prop="prop"
@click="functionCall"
v-text="textContent">
@@ -48,9 +50,9 @@ ex: 'v-text', 'v-html'
+
```
```html
-
+
+ prop-one="prop"
+ prop-two="prop">
```
:-1: Examples of **incorrect** code with custom order`:
```html
-
+
```
diff --git a/lib/rules/attributes-order.js b/lib/rules/attributes-order.js
index 04a5f7717..6faa60502 100644
--- a/lib/rules/attributes-order.js
+++ b/lib/rules/attributes-order.js
@@ -17,12 +17,14 @@ function getAttributeType (name, isDirective) {
return 'CONDITIONALS'
} else if (name === 'pre' || name === 'once') {
return 'RENDER_MODIFIERS'
- } else if (name === 'model' || name === 'bind') {
- return 'BINDING'
+ } else if (name === 'model') {
+ return 'TWO_WAY_BINDING'
} else if (name === 'on') {
return 'EVENTS'
} else if (name === 'html' || name === 'text') {
return 'CONTENT'
+ } else {
+ return 'OTHER_DIRECTIVES'
}
} else {
if (name === 'is') {
@@ -37,13 +39,18 @@ function getAttributeType (name, isDirective) {
}
}
function getPosition (attribute, attributeOrder) {
- const attributeType = getAttributeType(attribute.key.name, attribute.directive)
+ let attributeType
+ if (attribute.directive && attribute.key.name === 'bind') {
+ attributeType = getAttributeType(attribute.key.argument, false)
+ } else {
+ attributeType = getAttributeType(attribute.key.name, attribute.directive)
+ }
return attributeOrder.indexOf(attributeType)
}
function create (context) {
const sourceCode = context.getSourceCode()
- let attributeOrder = ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT']
+ let attributeOrder = ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']
if (context.options[0] && context.options[0].order) {
attributeOrder = context.options[0].order
}
diff --git a/tests/lib/rules/attributes-order.js b/tests/lib/rules/attributes-order.js
index 9366ac130..ece0b262a 100644
--- a/tests/lib/rules/attributes-order.js
+++ b/tests/lib/rules/attributes-order.js
@@ -82,6 +82,10 @@ tester.run('attributes-order', rule, {
filename: 'test.vue',
code: '
'
},
+ {
+ filename: 'test.vue',
+ code: '
'
+ },
{
filename: 'test.vue',
code:
@@ -105,7 +109,7 @@ tester.run('attributes-order', rule, {
{
filename: 'test.vue',
code:
- `
+ `
@@ -185,7 +189,8 @@ tester.run('attributes-order', rule, {
'RENDER_MODIFIERS',
'GLOBAL',
'UNIQUE',
- 'BINDING',
+ 'TWO_WAY_BINDING',
+ 'OTHER_DIRECTIVES',
'OTHER_ATTR',
'EVENTS',
'CONTENT',
@@ -202,8 +207,9 @@ tester.run('attributes-order', rule, {
'RENDER_MODIFIERS',
'GLOBAL',
'UNIQUE',
- 'BINDING',
+ 'TWO_WAY_BINDING',
'DEFINITION',
+ 'OTHER_DIRECTIVES',
'OTHER_ATTR',
'EVENTS',
'CONTENT']
@@ -220,9 +226,9 @@ tester.run('attributes-order', rule, {
is="header"
v-on:click="functionCall"
ref="header"
- :prop="headerData"
v-text="textContent"
id="uniqueID"
+ :prop="headerData"
myProp="prop"
>
@@ -236,10 +242,11 @@ tester.run('attributes-order', rule, {
'DEFINITION',
'EVENTS',
'UNIQUE',
- 'BINDING',
+ 'TWO_WAY_BINDING',
'CONTENT',
'GLOBAL',
- 'OTHER_ATTR'
+ 'OTHER_ATTR',
+ 'OTHER_DIRECTIVES'
]
}]
}
@@ -272,7 +279,7 @@ tester.run('attributes-order', rule, {
model="baz"
v-model="toggle"
propOne="bar"
- :bindingProp="foo">
+ :id="foo">
`,
output:
@@ -280,7 +287,7 @@ tester.run('attributes-order', rule, {