New: Add vue/attribute-order rule (#209)

Author: erindepew

README.md

@@ -204,6 +204,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>` |

docs/rules/attributes-order.md

@@ -0,0 +1,114 @@
+# 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', ':property="foo"'
+- OTHER_ATTR
+ex: 'customProp="foo"'
+- EVENTS
+ex: '@click="functionCall"', 'v-on="event"'
+- 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>
+```

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'),

lib/rules/attributes-order.js

@@ -0,0 +1,103 @@
+/**
+ * @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: 'recommended'
+    },
+    fixable: null,
+    schema: {
+      type: 'array',
+      properties: {
+        order: {
+          items: {
+            type: 'string'
+          },
+          maxItems: 10,
+          minItems: 10
+        }
+      }
+    }
+  },
+  create
+}