From 5bc45a406ef9222239c122d53a526f468cb7bbeb Mon Sep 17 00:00:00 2001
From: erindepew <erindepew@gmail.com>
Date: Thu, 4 Jan 2018 22:11:01 -0500
Subject: [PATCH 1/2] attribute order linting

---
 README.md                           |   1 +
 docs/rules/attributes-order.md      | 113 ++++++++++++++++++
 lib/index.js                        |   1 +
 lib/rules/attributes-order.js       | 104 +++++++++++++++++
 tests/lib/rules/attributes-order.js | 172 ++++++++++++++++++++++++++++
 5 files changed, 391 insertions(+)
 create mode 100644 docs/rules/attributes-order.md
 create mode 100644 lib/rules/attributes-order.js
 create mode 100644 tests/lib/rules/attributes-order.js

diff --git a/README.md b/README.md
index d6b4d7389..fa6c68d93 100644
--- a/README.md
+++ b/README.md
@@ -202,6 +202,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 
 |    | Rule ID | Description |
 |:---|:--------|:------------|
+|  | [vue/attributes-order](./docs/rules/attributes-order.md) | enforce order of attributes |
 | :wrench: | [vue/html-closing-bracket-newline](./docs/rules/html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets |
 | :wrench: | [vue/html-closing-bracket-spacing](./docs/rules/html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets |
 | :wrench: | [vue/script-indent](./docs/rules/script-indent.md) | enforce consistent indentation in `<script>` |
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
new file mode 100644
index 000000000..67b3cffea
--- /dev/null
+++ b/docs/rules/attributes-order.md
@@ -0,0 +1,113 @@
+# enforce order of attributes (vue/attributes-order)
+
+## :book: Rule Details
+
+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
+ex: 'v-for item in items'
+- CONDITIONALS
+ex: 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'
+- RENDER_MODIFIERS
+ex: 'v-once', 'v-pre'
+- GLOBAL
+ex: 'id'
+- UNIQUE
+ex: 'ref', 'key', 'slot'
+- BINDING
+ex: 'v-model', 'v-bind'
+- OTHER_ATTR
+ex: 'customProp="foo"'
+- EVENTS
+ex: '@click="functionCall"'
+- CONTENT
+ex: 'v-text', 'v-html'
+
+:+1: Examples of **correct** code`:
+
+```html
+<div
+  is="header"
+  v-for="item in items"
+  v-if="!visible"
+  v-once id="uniqueID"
+  ref="header"
+  v-model="headerData"
+  myProp="prop"
+  @click="functionCall"
+  v-text="textContent">
+</div>
+```
+
+```html
+<div
+  v-for="item in items"
+  v-if="!visible"
+  propOne="prop"
+  propTwo="prop"
+  propThree="prop"
+  @click="functionCall"
+  v-text="textContent">
+</div>
+```
+
+```html
+<div
+  propOne="prop"
+  propTwo="prop"
+  propThree="prop">
+</div>
+```
+
+:-1: Examples of **incorrect** code`:
+
+```html
+<div
+  ref="header"
+  v-for="item in items"
+  v-once id="uniqueID"
+  v-model="headerData"
+  myProp="prop"
+  v-if="!visible"
+  is="header"
+  @click="functionCall"
+  v-text="textContent">
+</div>
+```
+
+### `order`
+
+Specify custom order of attribute groups
+
+:+1: Examples of **correct** code with custom order`:
+
+```html
+<!-- 'vue/attribute-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
+<div
+  propOne="prop"
+  propTwo="prop"
+  is="header">
+</div>
+```
+
+```html
+<!-- 'vue/attribute-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
+<div
+  ref="header"
+  is="header"
+  propOne="prop"
+  propTwo="prop">
+</div>
+```
+
+:-1: Examples of **incorrect** code with custom order`:
+
+```html
+<!-- 'vue/attribute-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
+<div
+  ref="header"
+  propOne="prop"
+  is="header">
+</div>
+```
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
index dff5dd4c4..5f1406bf8 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -8,6 +8,7 @@
 module.exports = {
   rules: {
     'attribute-hyphenation': require('./rules/attribute-hyphenation'),
+    'attributes-order': require('./rules/attributes-order'),
     'comment-directive': require('./rules/comment-directive'),
     'html-closing-bracket-newline': require('./rules/html-closing-bracket-newline'),
     'html-closing-bracket-spacing': require('./rules/html-closing-bracket-spacing'),
diff --git a/lib/rules/attributes-order.js b/lib/rules/attributes-order.js
new file mode 100644
index 000000000..ecbde2db6
--- /dev/null
+++ b/lib/rules/attributes-order.js
@@ -0,0 +1,104 @@
+/**
+ * @fileoverview enforce ordering of attributes
+ * @author Erin Depew
+ */
+'use strict'
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+function getAttributeType (name, isDirective) {
+  if (isDirective) {
+    if (name === 'for') {
+      return 'LIST_RENDERING'
+    } else if (name === 'if' || name === 'else-if' || name === 'else' || name === 'show' || name === 'cloak') {
+      return 'CONDITIONALS'
+    } else if (name === 'pre' || name === 'once') {
+      return 'RENDER_MODIFIERS'
+    } else if (name === 'model' || name === 'bind') {
+      return 'BINDING'
+    } else if (name === 'on') {
+      return 'EVENTS'
+    } else if (name === 'html' || name === 'text') {
+      return 'CONTENT'
+    }
+  } else {
+    if (name === 'is') {
+      return 'DEFINITION'
+    } else if (name === 'id') {
+      return 'GLOBAL'
+    } else if (name === 'ref' || name === 'key' || name === 'slot') {
+      return 'UNIQUE'
+    } else {
+      return 'OTHER_ATTR'
+    }
+  }
+}
+function getPosition (attribute, attributeOrder) {
+  const 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']
+  if (context.options[0] && context.options[0].order) {
+    attributeOrder = context.options[0].order
+  }
+  let currentPosition
+  let previousNode
+
+  function reportIssue (node, previousNode) {
+    const currentNode = sourceCode.getText(node.key)
+    const prevNode = sourceCode.getText(previousNode.key)
+    context.report({
+      node: node.key,
+      loc: node.loc,
+      message: `Attribute "${currentNode}" should go before "${prevNode}".`,
+      data: {
+        currentNode
+      }
+    })
+  }
+
+  return utils.defineTemplateBodyVisitor(context, {
+    'VStartTag' () {
+      currentPosition = -1
+      previousNode = null
+    },
+    'VAttribute' (node) {
+      if ((currentPosition === -1) || (currentPosition <= getPosition(node, attributeOrder))) {
+        currentPosition = getPosition(node, attributeOrder)
+        previousNode = node
+      } else {
+        reportIssue(node, previousNode)
+      }
+    }
+  })
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'enforce order of attributes',
+      category: undefined,
+      recommended: false
+    },
+    fixable: null,
+    schema: {
+      type: 'array',
+      properties: {
+        order: {
+          items: {
+            type: 'string'
+          },
+          maxItems: 10,
+          minItems: 10
+        }
+      }
+    }
+  },
+  create
+}
diff --git a/tests/lib/rules/attributes-order.js b/tests/lib/rules/attributes-order.js
new file mode 100644
index 000000000..1b15c4159
--- /dev/null
+++ b/tests/lib/rules/attributes-order.js
@@ -0,0 +1,172 @@
+/**
+ * @fileoverview enforce ordering of attributes
+ * @author Erin Depew
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/attributes-order')
+var RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var tester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: { ecmaVersion: 2015 }
+})
+tester.run('attributes-order', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div is="header"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-for="item in items"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-if="!visible"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-else-if="!visible"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-else="!visible"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-show="!visible"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-cloak></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-pre></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-once></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div id="header"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div key="id"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-html="htmlContent"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-text="textContent"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-model="toggle"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-model="toggle" :bindingProp="foo" propOne="bar" model="baz"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @click="functionCall"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div myProp="prop"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div is="header" v-for="item in items" v-if="!visible" v-once id="uniqueID" ref="header" v-model="headerData" myProp="prop" @click="functionCall" v-text="textContent"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div is="header" v-for="item in items" v-if="!visible" v-once id="uniqueID" ref="header" :prop="headerData" myProp="prop" v-on:click="functionCall" v-text="textContent"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-for="item in items" v-if="!visible" propone="prop" proptwo="prop" propthree="prop"  @click="functionCall" v-text="textContent"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div propone="prop" proptwo="prop" propthree="prop"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div propone="prop" proptwo="prop" is="header"></div></template>',
+      options: [{ order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div ref="header" is="header" propone="prop" proptwo="prop"></div></template>',
+      options: [{ order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }]
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div v-cloak is="header"></div></template>',
+      errors: [{
+        message: 'Attribute "is" should go before "v-cloak".',
+        type: 'VIdentifier'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div id="uniqueID" v-cloak></div></template>',
+      errors: [{
+        message: 'Attribute "v-cloak" should go before "id".',
+        type: 'VDirectiveKey'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div  model="baz" v-model="toggle" propOne="bar" :bindingProp="foo"></div></template>',
+      errors: [{
+        message: 'Attribute "v-model" should go before "model".',
+        type: 'VDirectiveKey'
+      },
+      {
+        message: 'Attribute ":bindingProp" should go before "propOne".',
+        type: 'VDirectiveKey'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div data-id="foo" aria-test="bar" is="custom" myProp="prop"></div></template>',
+      errors: [{
+        message: 'Attribute "is" should go before "aria-test".',
+        type: 'VIdentifier'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div ref="header" propone="prop" is="header" ></div></template>',
+      options: [{ order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }],
+      errors: [{
+        message: 'Attribute "is" should go before "propone".',
+        type: 'VIdentifier'
+      }]
+    }
+  ]
+})

From b0b1fadb3f54af5f4232d28b77279acb76de4ead Mon Sep 17 00:00:00 2001
From: erindepew <erindepew@gmail.com>
Date: Tue, 6 Feb 2018 23:22:33 -0500
Subject: [PATCH 2/2] updating docs, tests and category

---
 docs/rules/attributes-order.md      |   7 +-
 lib/rules/attributes-order.js       |   3 +-
 tests/lib/rules/attributes-order.js | 148 ++++++++++++++++++++++++++--
 3 files changed, 144 insertions(+), 14 deletions(-)

diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 67b3cffea..f002033a1 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -16,11 +16,11 @@ ex: 'id'
 - UNIQUE
 ex: 'ref', 'key', 'slot'
 - BINDING
-ex: 'v-model', 'v-bind'
+ex: 'v-model', 'v-bind', ':property="foo"'
 - OTHER_ATTR
 ex: 'customProp="foo"'
 - EVENTS
-ex: '@click="functionCall"'
+ex: '@click="functionCall"', 'v-on="event"'
 - CONTENT
 ex: 'v-text', 'v-html'
 
@@ -31,7 +31,8 @@ ex: 'v-text', 'v-html'
   is="header"
   v-for="item in items"
   v-if="!visible"
-  v-once id="uniqueID"
+  v-once
+  id="uniqueID"
   ref="header"
   v-model="headerData"
   myProp="prop"
diff --git a/lib/rules/attributes-order.js b/lib/rules/attributes-order.js
index ecbde2db6..e5cd19dd5 100644
--- a/lib/rules/attributes-order.js
+++ b/lib/rules/attributes-order.js
@@ -83,8 +83,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce order of attributes',
-      category: undefined,
-      recommended: false
+      category: 'recommended'
     },
     fixable: null,
     schema: {
diff --git a/tests/lib/rules/attributes-order.js b/tests/lib/rules/attributes-order.js
index 1b15c4159..39c207160 100644
--- a/tests/lib/rules/attributes-order.js
+++ b/tests/lib/rules/attributes-order.js
@@ -84,11 +84,19 @@ tester.run('attributes-order', rule, {
     },
     {
       filename: 'test.vue',
-      code: '<template><div v-model="toggle" :bindingProp="foo" propOne="bar" model="baz"></div></template>'
+      code:
+      `<template>
+        <div
+          v-model="toggle"
+          :bindingProp="foo"
+          propOne="bar"
+          model="baz">
+        </div>
+      </template>`
     },
     {
       filename: 'test.vue',
-      code: '<template><div @click="functionCall"></div></template>'
+      code: '<template><div click="functionCall"></div></template>'
     },
     {
       filename: 'test.vue',
@@ -96,15 +104,72 @@ tester.run('attributes-order', rule, {
     },
     {
       filename: 'test.vue',
-      code: '<template><div is="header" v-for="item in items" v-if="!visible" v-once id="uniqueID" ref="header" v-model="headerData" myProp="prop" @click="functionCall" v-text="textContent"></div></template>'
+      code:
+      `<template>
+          <div
+            is="header"
+            v-for="item in items"
+            v-if="!visible"
+            v-once
+            id="uniqueID"
+            ref="header"
+            v-model="headerData"
+            myProp="prop"
+            @click="functionCall"
+            v-text="textContent">
+          </div>
+        </template>`
     },
     {
       filename: 'test.vue',
-      code: '<template><div is="header" v-for="item in items" v-if="!visible" v-once id="uniqueID" ref="header" :prop="headerData" myProp="prop" v-on:click="functionCall" v-text="textContent"></div></template>'
+      code:
+        `<template>
+          <div
+            is="header"
+            v-for="item in items"
+            v-if="!visible"
+            v-once
+            id="uniqueID"
+            ref="header"
+            v-model="headerData"
+            :myProp="prop"
+            v-on="functionCall"
+            v-text="textContent">
+          </div>
+        </template>`
     },
     {
       filename: 'test.vue',
-      code: '<template><div v-for="item in items" v-if="!visible" propone="prop" proptwo="prop" propthree="prop"  @click="functionCall" v-text="textContent"></div></template>'
+      code:
+        `<template>
+          <div
+            is="header"
+            v-for="item in items"
+            v-if="!visible"
+            v-once
+            id="uniqueID"
+            ref="header"
+            :prop="headerData"
+            myProp="prop"
+            v-on:click="functionCall"
+            v-text="textContent">
+          </div>
+        </template>`
+    },
+    {
+      filename: 'test.vue',
+      code:
+        `<template>
+          <div
+            v-for="item in items"
+            v-if="!visible"
+            propone="prop"
+            proptwo="prop"
+            propthree="prop"
+            @click="functionCall"
+            v-text="textContent">
+          </div>
+        </template>`
     },
     {
       filename: 'test.vue',
@@ -113,12 +178,36 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code: '<template><div propone="prop" proptwo="prop" is="header"></div></template>',
-      options: [{ order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }]
+      options: [
+        { order:
+          ['LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            'UNIQUE',
+            'BINDING',
+            'OTHER_ATTR',
+            'EVENTS',
+            'CONTENT',
+            'DEFINITION']
+        }]
     },
     {
       filename: 'test.vue',
       code: '<template><div ref="header" is="header" propone="prop" proptwo="prop"></div></template>',
-      options: [{ order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }]
+      options: [
+        { order:
+          ['LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            'UNIQUE',
+            'BINDING',
+            'DEFINITION',
+            'OTHER_ATTR',
+            'EVENTS',
+            'CONTENT']
+        }]
     }
   ],
 
@@ -141,7 +230,15 @@ tester.run('attributes-order', rule, {
     },
     {
       filename: 'test.vue',
-      code: '<template><div  model="baz" v-model="toggle" propOne="bar" :bindingProp="foo"></div></template>',
+      code:
+        `<template>
+          <div
+            model="baz"
+            v-model="toggle"
+            propOne="bar"
+            :bindingProp="foo">
+          </div>
+        </template>`,
       errors: [{
         message: 'Attribute "v-model" should go before "model".',
         type: 'VDirectiveKey'
@@ -151,6 +248,27 @@ tester.run('attributes-order', rule, {
         type: 'VDirectiveKey'
       }]
     },
+    {
+      filename: 'test.vue',
+      code:
+        `<template>
+          <div
+            :bindingProp="foo"
+            model="baz"
+            v-on="functionCall"
+            v-model="toggle"
+            propOne="bar">
+          </div>
+        </template>`,
+      errors: [{
+        message: 'Attribute "v-model" should go before "v-on".',
+        type: 'VDirectiveKey'
+      },
+      {
+        message: 'Attribute "propOne" should go before "v-on".',
+        type: 'VIdentifier'
+      }]
+    },
     {
       filename: 'test.vue',
       code: '<template><div data-id="foo" aria-test="bar" is="custom" myProp="prop"></div></template>',
@@ -162,7 +280,19 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code: '<template><div ref="header" propone="prop" is="header" ></div></template>',
-      options: [{ order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }],
+      options: [
+        { order:
+          ['LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            'UNIQUE',
+            'BINDING',
+            'DEFINITION',
+            'OTHER_ATTR',
+            'EVENTS',
+            'CONTENT']
+        }],
       errors: [{
         message: 'Attribute "is" should go before "propone".',
         type: 'VIdentifier'