Add new attributes order for dynamic and static props

docs/rules/attributes-order.md

@@ -35,7 +35,11 @@ This rule aims to enforce ordering of component attributes. The default order is
 - `OTHER_DIRECTIVES`
   e.g. 'v-custom-directive'
 - `OTHER_ATTR`
-  e.g. 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="foo"'
+  alias for '[OTHER_ATTR_DYNAMIC, OTHER_ATTR_STATIC]'
+- `OTHER_ATTR_DYNAMIC`
+  e.g. 'v-bind:prop="foo"', ':prop="foo"'
+- `OTHER_ATTR_STATIC`
+  e.g. 'prop="foo"', 'custom-prop="foo"'
 - `EVENTS`
   e.g. '@click="functionCall"', 'v-on="event"'
 - `CONTENT`

lib/rules/attributes-order.js

@@ -20,6 +20,8 @@ const ATTRS = {
   TWO_WAY_BINDING: 'TWO_WAY_BINDING',
   OTHER_DIRECTIVES: 'OTHER_DIRECTIVES',
   OTHER_ATTR: 'OTHER_ATTR',
+  OTHER_ATTR_STATIC: 'OTHER_ATTR_STATIC',
+  OTHER_ATTR_DYNAMIC: 'OTHER_ATTR_DYNAMIC',
   EVENTS: 'EVENTS',
   CONTENT: 'CONTENT'
 }
@@ -153,7 +155,10 @@ function getAttributeType(attribute) {
     case 'slot-scope':
       return ATTRS.SLOT
     default:
-      return ATTRS.OTHER_ATTR
+      if (attribute.directive) {
+        return ATTRS.OTHER_ATTR_DYNAMIC
+      }
+      return ATTRS.OTHER_ATTR_STATIC
   }
 }
 
@@ -191,6 +196,7 @@ function isAlphabetical(prevNode, currNode, sourceCode) {
  */
 function create(context) {
   const sourceCode = context.getSourceCode()
+  const otherAttrs = [ATTRS.OTHER_ATTR_DYNAMIC, ATTRS.OTHER_ATTR_STATIC]
   let attributeOrder = [
     ATTRS.DEFINITION,
     ATTRS.LIST_RENDERING,
@@ -200,17 +206,27 @@ function create(context) {
     [ATTRS.UNIQUE, ATTRS.SLOT],
     ATTRS.TWO_WAY_BINDING,
     ATTRS.OTHER_DIRECTIVES,
-    ATTRS.OTHER_ATTR,
+    [ATTRS.OTHER_ATTR_DYNAMIC, ATTRS.OTHER_ATTR_STATIC],
     ATTRS.EVENTS,
     ATTRS.CONTENT
   ]
   if (context.options[0] && context.options[0].order) {
-    attributeOrder = context.options[0].order
+    attributeOrder = [...context.options[0].order]
   }
   const alphabetical = Boolean(
     context.options[0] && context.options[0].alphabetical
   )
 
+  for (const [index, item] of attributeOrder.entries()) {
+    if (Array.isArray(item) && item.includes(ATTRS.OTHER_ATTR)) {
+      const attributes = item.filter((i) => i !== ATTRS.OTHER_ATTR)
+      attributes.push(...otherAttrs)
+      attributeOrder[index] = attributes
+    } else if (item === ATTRS.OTHER_ATTR) {
+      attributeOrder[index] = otherAttrs
+    }
+  }
+
   /** @type { { [key: string]: number } } */
   const attributePosition = {}
   for (const [i, item] of attributeOrder.entries()) {

tests/lib/rules/attributes-order.js

@@ -483,6 +483,104 @@ tester.run('attributes-order', rule, {
         </div>
       </template>`,
       options: [{ order: ['LIST_RENDERING', 'CONDITIONALS'] }]
+    },
+
+    // https://github.com/vuejs/eslint-plugin-vue/issues/1728
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          :prop-bind="prop"
+          prop-one="prop"
+          prop-two="prop">
+        </div>
+      </template>`,
+      options: [
+        {
+          order: ['OTHER_ATTR_DYNAMIC', 'OTHER_ATTR_STATIC'],
+          alphabetical: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          v-model="a
+          :class="b"
+          :is="c"
+          prop-one="d"
+          class="e"
+          prop-two="f">
+        </div>
+      </template>`,
+      options: [
+        {
+          order: ['TWO_WAY_BINDING', 'OTHER_ATTR_DYNAMIC', 'OTHER_ATTR_STATIC'],
+          alphabetical: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          prop-one="a"
+          prop-three="b"
+          :prop-two="c">
+        </div>
+      </template>`,
+      options: [
+        {
+          order: [
+            'DEFINITION',
+            'LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            ['UNIQUE', 'SLOT'],
+            'TWO_WAY_BINDING',
+            'OTHER_DIRECTIVES',
+            'OTHER_ATTR_STATIC',
+            'OTHER_ATTR_DYNAMIC',
+            'EVENTS',
+            'CONTENT'
+          ],
+          alphabetical: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          prop-one="a"
+          :prop-two="b"
+          prop-three="c">
+        </div>
+      </template>`,
+      options: [
+        {
+          order: [
+            'DEFINITION',
+            'LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            ['UNIQUE', 'SLOT'],
+            'TWO_WAY_BINDING',
+            'OTHER_DIRECTIVES',
+            ['OTHER_ATTR_STATIC', 'OTHER_ATTR_DYNAMIC'],
+            'EVENTS',
+            'CONTENT'
+          ],
+          alphabetical: false
+        }
+      ]
     }
   ],
 
@@ -1528,6 +1626,105 @@ tester.run('attributes-order', rule, {
           attr="foo"/>
       </template>`,
       errors: ['Attribute "@click" should go before "v-bind".']
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          v-bind:prop-one="a"
+          prop-two="b"
+          :prop-three="c"/>
+      </template>`,
+      options: [{ order: ['OTHER_ATTR_STATIC', 'OTHER_ATTR_DYNAMIC'] }],
+      output: `
+      <template>
+        <div
+          prop-two="b"
+          v-bind:prop-one="a"
+          :prop-three="c"/>
+      </template>`,
+      errors: ['Attribute "prop-two" should go before "v-bind:prop-one".']
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          :prop-one="a"
+          v-model="value"
+          prop-two="b"
+          :prop-three="c"
+          class="class"/>
+      </template>`,
+      options: [
+        {
+          order: [
+            'LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'TWO_WAY_BINDING',
+            'OTHER_DIRECTIVES',
+            'OTHER_ATTR_DYNAMIC',
+            'OTHER_ATTR_STATIC',
+            'EVENTS'
+          ]
+        }
+      ],
+      output: `
+      <template>
+        <div
+          v-model="value"
+          :prop-one="a"
+          :prop-three="c"
+          prop-two="b"
+          class="class"/>
+      </template>`,
+      errors: [
+        'Attribute "v-model" should go before ":prop-one".',
+        'Attribute ":prop-three" should go before "prop-two".'
+      ]
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          :prop-one="a"
+          v-model="value"
+          prop-two="b"
+          :prop-three="c"/>
+      </template>`,
+      options: [
+        {
+          order: [
+            'UNIQUE',
+            'LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            'TWO_WAY_BINDING',
+            'OTHER_DIRECTIVES',
+            ['OTHER_ATTR_STATIC', 'OTHER_ATTR_DYNAMIC'],
+            'EVENTS',
+            'CONTENT',
+            'DEFINITION',
+            'SLOT'
+          ]
+        }
+      ],
+      output: `
+      <template>
+        <div
+          v-model="value"
+          :prop-one="a"
+          prop-two="b"
+          :prop-three="c"/>
+      </template>`,
+      errors: ['Attribute "v-model" should go before ":prop-one".']
     }
   ]
 })