adding in alphabetical ordering within groupings (#1022)

vuejs · Feb 16, 2020 · 8cd3a41 · 8cd3a41
1 parent b394ca6
commit 8cd3a41
Show file tree

Hide file tree

Showing 3 changed files with 392 additions and 175 deletions.
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
@@ -105,11 +105,57 @@ This rule aims to enforce ordering of component attributes. The default order is
       "OTHER_ATTR",
       "EVENTS",
       "CONTENT"
-    ]
+    ],
+    "alphabetical": true
   }]
 }
 ```
 
+### Alphabetical order 
+<eslint-code-block fix :rules="{'vue/attributes-order': ['error', {alphabetical: true}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+    <div
+      a-custom-prop="value"
+      :another-custom-prop="value"
+      :blue-color="false"
+      boolean-prop
+      z-prop="Z"
+      v-on:[c]="functionCall"
+      @change="functionCall"
+      v-on:click="functionCall"
+      @input="functionCall"
+      v-text="textContent">
+    </div>
+
+  <!-- ✗ BAD -->
+    <div
+      z-prop="Z"
+      a-prop="A">
+    </div>
+
+    <div
+      @input="bar"
+      @change="foo">
+    </div>
+
+    <div
+      v-on:click="functionCall"
+      v-on:[c]="functionCall">
+    </div>
+
+    <div
+      :a-prop="A"
+      :z-prop="Z">
+    </div>
+
+</template>
+```
+
+</eslint-code-block>
+
 ### Custom orders
 
 #### `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`

diff --git a/lib/rules/attributes-order.js b/lib/rules/attributes-order.js
@@ -22,6 +22,14 @@ const ATTRS = {
   CONTENT: 'CONTENT'
 }
 
+function getAttributeName (attribute, sourceCode) {
+  const isBind = attribute.directive && attribute.key.name.name === 'bind'
+  debugger
+  return isBind
+    ? (attribute.key.argument ? sourceCode.getText(attribute.key.argument) : '')
+    : (attribute.directive ? sourceCode.getText(attribute.key.argument) : attribute.key.name)
+}
+
 function getAttributeType (attribute, sourceCode) {
   const isBind = attribute.directive && attribute.key.name.name === 'bind'
   const name = isBind
@@ -64,6 +72,14 @@ function getPosition (attribute, attributePosition, sourceCode) {
   return attributePosition.hasOwnProperty(attributeType) ? attributePosition[attributeType] : -1
 }
 
+function isAlphabetical (prevNode, currNode, sourceCode) {
+  const isSameType = getAttributeType(prevNode, sourceCode) === getAttributeType(currNode, sourceCode)
+  if (isSameType) {
+    return getAttributeName(prevNode, sourceCode) < getAttributeName(currNode, sourceCode)
+  }
+  return true
+}
+
 function create (context) {
   const sourceCode = context.getSourceCode()
   let attributeOrder = [ATTRS.DEFINITION, ATTRS.LIST_RENDERING, ATTRS.CONDITIONALS, ATTRS.RENDER_MODIFIERS, ATTRS.GLOBAL, ATTRS.UNIQUE, ATTRS.TWO_WAY_BINDING, ATTRS.OTHER_DIRECTIVES, ATTRS.OTHER_ATTR, ATTRS.EVENTS, ATTRS.CONTENT]
@@ -110,7 +126,11 @@ function create (context) {
       previousNode = null
     },
     'VAttribute' (node) {
-      if ((currentPosition === -1) || (currentPosition <= getPosition(node, attributePosition, sourceCode))) {
+      let inAlphaOrder = true
+      if (currentPosition !== -1 && (context.options[0] && context.options[0].alphabetical)) {
+        inAlphaOrder = isAlphabetical(previousNode, node, sourceCode)
+      }
+      if ((currentPosition === -1) || ((currentPosition <= getPosition(node, attributePosition, sourceCode)) && inAlphaOrder)) {
         currentPosition = getPosition(node, attributePosition, sourceCode)
         previousNode = node
       } else {