adding in attribute-order

Author: erindepew

Diff for: README.md

@@ -147,7 +147,7 @@ The `--fix` option on the command line automatically fixes problems reported by
 | :wrench: | [no-multi-spaces](./docs/rules/no-multi-spaces.md) | disallow multiple spaces |
 | :wrench: | [v-bind-style](./docs/rules/v-bind-style.md) | enforce `v-bind` directive style |
 | :wrench: | [v-on-style](./docs/rules/v-on-style.md) | enforce `v-on` directive style |
-
+| :wrench: | [attribute-order](./docs/rules/attribute-order.md) | enforce alphabetical ordering of properties and prioritizing vue-specific attributes |
 
 ### Variables
 

Diff for: docs/rules/attribute-order.md

@@ -0,0 +1,77 @@
+# enforce alphabetical ordering of properties and prioritizing vue-specific attributes (attribute-order)
+
+## Rule Details
+
+:+1: Examples of **correct** code`:
+
+```html
+
+<div
+	@click="handleClick"
+	:class="$style.myStyle"
+	v-for="(item, index) in items"
+	myProp="title"
+	ref="myComponent">
+</div>
+
+```
+
+```html
+
+<div
+	@click="handleClick"
+	:class="$style.myStyle"
+	v-if="itemExists"
+	:myProp="title"
+	ref="myComponent">
+</div>
+
+```
+
+```html
+
+<div
+	@click="handleClick"
+	:amount="34"
+	:class="$style.myStyle"
+	ref="myComponent">
+</div>
+
+```
+
+:-1: Examples of **incorrect** code`:
+
+```html
+
+<div
+	@click="handleClick"
+	v-for="(item, index) in items"
+	:class="$style.myStyle"
+	myProp="title"
+	ref="myComponent">
+</div>
+
+```
+
+```html
+
+<div
+	@click="handleClick"
+	v-if="itemExists"
+	:class="$style.myStyle"
+	myProp="title"
+	ref="myComponent">
+</div>
+
+```
+
+```html
+
+<div
+	:amount="34"
+	@click="handleClick"
+	:class="$style.myStyle"
+	ref="myComponent">
+</div>
+
+```

Diff for: lib/recommended-rules.js

@@ -5,6 +5,7 @@
  */
 module.exports = {
   "vue/attribute-hyphenation": "off",
+  "vue/attribute-order": "off",
   "vue/html-end-tags": "off",
   "vue/html-no-self-closing": "off",
   "vue/html-quotes": "off",

Diff for: lib/rules/attribute-order.js

@@ -0,0 +1,76 @@
+/**
+ * @fileoverview enforce alphabetical ordering of properties and prioritizing vue-specific attributes
+ * @author Erin Depew
+ */
+'use strict'
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+function getName (attribute) {
+  if (!attribute.directive) {
+    return attribute.key.name
+  }
+  if (attribute.key.name === 'bind') {
+    return attribute.key.argument || null
+  }
+  if (attribute.directive) {
+    return '@' + attribute.key.argument
+  }
+  return null
+}
+
+function create (context) {
+  const sourceCode = context.getSourceCode()
+  let attributeList
+  let previousNode
+
+  function reportIssue (node, previousNode, name) {
+    const currentNode = sourceCode.getText(node.key)
+    const prevNode = sourceCode.getText(previousNode.key)
+
+    context.report({
+      node: node.key,
+      loc: node.loc,
+      message: `Attribute ${currentNode} must go before ${prevNode}.`,
+      data: {
+        currentNode
+      }
+    })
+  }
+
+  return utils.defineTemplateBodyVisitor(context, {
+    'VStartTag' () {
+      attributeList = []
+    },
+    'VAttribute' (node) {
+      const name = getName(node)
+
+      if (attributeList.length && attributeList[attributeList.length - 1] < name && name) {
+        attributeList.push(name)
+        previousNode = node
+      } else if (attributeList.length === 0 && name) {
+        attributeList.push(name)
+        previousNode = node
+      } else {
+        reportIssue(node, previousNode, name)
+      }
+    }
+  })
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'enforce alphabetical ordering of properties and prioritizing vue-specific attributes',
+      category: 'Fill me in',
+      recommended: false
+    },
+    fixable: null,
+    schema: []
+  },
+
+  create
+}

Diff for: tests/lib/rules/attribute-order.js

@@ -0,0 +1,118 @@
+/**
+ * @fileoverview enforce alphabetical ordering of properties and prioritizing vue-specific attributes
+ * @author Erin Depew
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/attribute-order')
+
+var RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var tester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: {ecmaVersion: 2015}
+})
+tester.run('attribute-order', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom aria-test="bar" data-id="foo" myProp="prop"></custom></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom v-if="bar" data-id="foo" myProp="prop"></custom></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom v-if="bar" data-id="foo" :myProp="prop"></custom></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom aria-test="bar" :class="$style.foo" myProp="prop"></custom></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom @click="bar" :class="$style.foo" myProp="prop"></custom></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom @click="bar" :class="$style.foo" myProp="prop" ref="myComponent"></custom></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom @click="bar" v-for="(item, index) in items" :class="$style.foo" myProp="prop" ref="myComponent"></custom></div></template>'
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom data-id="foo" aria-test="bar" myProp="prop"></custom></div></template>',
+      errors: [{
+        message: 'Attribute aria-test must go before data-id.',
+        type: 'VIdentifier'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom data-id="foo" myProp="prop" v-if="bar" ></custom></div></template>',
+      errors: [{
+        message: 'Attribute v-if must go before myProp.',
+        type: 'VDirectiveKey'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom data-id="foo" :myProp="prop" v-if="bar"></custom></div></template>',
+      errors: [{
+        message: 'Attribute v-if must go before :myProp.',
+        type: 'VDirectiveKey'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :class="$style.foo"  aria-test="bar" myProp="prop"></custom></div></template>',
+      errors: [{
+        message: 'Attribute aria-test must go before :class.',
+        type: 'VIdentifier'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom @click="bar" myProp="prop" :class="$style.foo"></custom></div></template>',
+      errors: [{
+        message: 'Attribute :class must go before myProp.',
+        type: 'VDirectiveKey'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :class="$style.foo" @click="bar" myProp="prop" ref="myComponent"></custom></div></template>',
+      errors: [{
+        message: 'Attribute @click must go before :class.',
+        type: 'VDirectiveKey'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom v-for="(item, index) in items"  @click="bar" :class="$style.foo" myProp="prop" ref="myComponent"></custom></div></template>',
+      errors: [{
+        message: 'Attribute @click must go before v-for.',
+        type: 'VDirectiveKey'
+      }]
+    }
+  ]
+})