[Update] Make vue/attributes-order fixable

Author: ota-meshi

lib/rules/attributes-order.js

@@ -59,6 +59,31 @@ function create (context) {
       message: `Attribute "${currentNode}" should go before "${prevNode}".`,
       data: {
         currentNode
+      },
+
+      fix (fixer) {
+        const attributes = node.parent.attributes
+        const shiftAttrs = attributes.slice(attributes.indexOf(previousNode), attributes.indexOf(node) + 1)
+
+        // If we can upgrade requirements to `eslint@>4.1.0`, this code can be replaced by:
+        // return shiftAttrs.map((attr, i) => {
+        //   const text = attr === previousNode ? sourceCode.getText(node) : sourceCode.getText(shiftAttrs[i - 1])
+        //   return fixer.replaceText(attr, text)
+        // })
+        const replaceDataList = shiftAttrs.map((attr, i) => {
+          const text = attr === previousNode ? sourceCode.getText(node) : sourceCode.getText(shiftAttrs[i - 1])
+          return {
+            range: attr.range,
+            text
+          }
+        })
+        const replaceRange = [previousNode.range[0], node.range[1]]
+        let text = sourceCode.text.slice(replaceRange[0], replaceRange[1])
+        replaceDataList.reverse().forEach((data) => {
+          const textRange = data.range.map(r => r - replaceRange[0])
+          text = text.slice(0, textRange[0]) + data.text + text.slice(textRange[1], text.length)
+        })
+        return fixer.replaceTextRange(replaceRange, text)
       }
     })
   }
@@ -85,7 +110,7 @@ module.exports = {
       description: 'enforce order of attributes',
       category: 'recommended'
     },
-    fixable: null,
+    fixable: 'code',
     schema: {
       type: 'array',
       properties: {

tests/lib/rules/attributes-order.js

@@ -215,6 +215,7 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code: '<template><div v-cloak is="header"></div></template>',
+      output: '<template><div is="header" v-cloak></div></template>',
       errors: [{
         message: 'Attribute "is" should go before "v-cloak".',
         type: 'VIdentifier'
@@ -223,6 +224,7 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code: '<template><div id="uniqueID" v-cloak></div></template>',
+      output: '<template><div v-cloak id="uniqueID"></div></template>',
       errors: [{
         message: 'Attribute "v-cloak" should go before "id".',
         type: 'VDirectiveKey'
@@ -239,6 +241,15 @@ tester.run('attributes-order', rule, {
             :bindingProp="foo">
           </div>
         </template>`,
+      output:
+        `<template>
+          <div
+            v-model="toggle"
+            model="baz"
+            :bindingProp="foo"
+            propOne="bar">
+          </div>
+        </template>`,
       errors: [{
         message: 'Attribute "v-model" should go before "model".',
         type: 'VDirectiveKey'
@@ -260,6 +271,16 @@ tester.run('attributes-order', rule, {
             propOne="bar">
           </div>
         </template>`,
+      output:
+        `<template>
+          <div
+            :bindingProp="foo"
+            model="baz"
+            v-model="toggle"
+            v-on="functionCall"
+            propOne="bar">
+          </div>
+        </template>`,
       errors: [{
         message: 'Attribute "v-model" should go before "v-on".',
         type: 'VDirectiveKey'
@@ -272,6 +293,7 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code: '<template><div data-id="foo" aria-test="bar" is="custom" myProp="prop"></div></template>',
+      output: '<template><div data-id="foo" is="custom" aria-test="bar" myProp="prop"></div></template>',
       errors: [{
         message: 'Attribute "is" should go before "aria-test".',
         type: 'VIdentifier'
@@ -293,10 +315,30 @@ tester.run('attributes-order', rule, {
             'EVENTS',
             'CONTENT']
         }],
+      output: '<template><div ref="header" is="header" propone="prop" ></div></template>',
       errors: [{
         message: 'Attribute "is" should go before "propone".',
         type: 'VIdentifier'
       }]
+    },
+    {
+      filename: 'test.vue',
+      code:
+        `<template>
+          <div v-cloak
+            is="header">
+          </div>
+        </template>`,
+      output:
+        `<template>
+          <div is="header"
+            v-cloak>
+          </div>
+        </template>`,
+      errors: [{
+        message: 'Attribute "is" should go before "v-cloak".',
+        type: 'VIdentifier'
+      }]
     }
   ]
 })