Fix: v-bind order in vue/attribute-order rule

Author: ydfzgyj

docs/rules/attributes-order.md

@@ -4,7 +4,7 @@
 
 ## :book: Rule Details
 
-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:
+This rule aims to enfore 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:
 - DEFINITION
 ex: 'is'
 - LIST_RENDERING
@@ -17,8 +17,8 @@ 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_ATTR
 ex: 'customProp="foo"'
 - EVENTS
@@ -48,7 +48,7 @@ ex: 'v-text', 'v-html'
   v-for="item in items"
   v-if="!visible"
   propOne="prop"
-  propTwo="prop"
+  :propTwo="prop"
   propThree="prop"
   @click="functionCall"
   v-text="textContent">
@@ -58,7 +58,7 @@ ex: 'v-text', 'v-html'
 ```html
 <div
   propOne="prop"
-  propTwo="prop"
+  :propTwo="prop"
   propThree="prop">
 </div>
 ```
@@ -86,7 +86,7 @@ Specify custom order of attribute groups
 :+1: Examples of **correct** code with custom order`:
 
 ```html
-<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
+<!-- 'vue/attribute-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
 <div
   propOne="prop"
   propTwo="prop"
@@ -95,7 +95,7 @@ Specify custom order of attribute groups
 ```
 
 ```html
-<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
+<!-- 'vue/attribute-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
 <div
   ref="header"
   is="header"
@@ -107,10 +107,10 @@ Specify custom order of attribute groups
 :-1: Examples of **incorrect** code with custom order`:
 
 ```html
-<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
+<!-- 'vue/attribute-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
 <div
   ref="header"
   propOne="prop"
   is="header">
 </div>
-```
+```

lib/rules/attributes-order.js

@@ -17,8 +17,8 @@ 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') {
@@ -37,13 +37,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_ATTR', 'EVENTS', 'CONTENT']
   if (context.options[0] && context.options[0].order) {
     attributeOrder = context.options[0].order
   }

tests/lib/rules/attributes-order.js

@@ -105,7 +105,7 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code:
-      `<template>
+        `<template>
           <div
             is="header"
             v-for="item in items"
@@ -164,7 +164,7 @@ tester.run('attributes-order', rule, {
             v-for="item in items"
             v-if="!visible"
             propone="prop"
-            proptwo="prop"
+            :proptwo="prop"
             propthree="prop"
             @click="functionCall"
             v-text="textContent">
@@ -185,7 +185,7 @@ tester.run('attributes-order', rule, {
             'RENDER_MODIFIERS',
             'GLOBAL',
             'UNIQUE',
-            'BINDING',
+            'TWO_WAY_BINDING',
             'OTHER_ATTR',
             'EVENTS',
             'CONTENT',
@@ -202,7 +202,7 @@ tester.run('attributes-order', rule, {
             'RENDER_MODIFIERS',
             'GLOBAL',
             'UNIQUE',
-            'BINDING',
+            'TWO_WAY_BINDING',
             'DEFINITION',
             'OTHER_ATTR',
             'EVENTS',
@@ -236,15 +236,15 @@ tester.run('attributes-order', rule, {
             model="baz"
             v-model="toggle"
             propOne="bar"
-            :bindingProp="foo">
+            :id="foo">
           </div>
         </template>`,
       errors: [{
         message: 'Attribute "v-model" should go before "model".',
         type: 'VDirectiveKey'
       },
       {
-        message: 'Attribute ":bindingProp" should go before "propOne".',
+        message: 'Attribute ":id" should go before "propOne".',
         type: 'VDirectiveKey'
       }]
     },
@@ -287,7 +287,7 @@ tester.run('attributes-order', rule, {
             'RENDER_MODIFIERS',
             'GLOBAL',
             'UNIQUE',
-            'BINDING',
+            'TWO_WAY_BINDING',
             'DEFINITION',
             'OTHER_ATTR',
             'EVENTS',