class-order rule

docs/rules/README.md

@@ -144,6 +144,7 @@ For example:
 | [vue/block-spacing](./block-spacing.md) | disallow or enforce spaces inside of blocks after opening block and before closing block | :wrench: |
 | [vue/brace-style](./brace-style.md) | enforce consistent brace style for blocks | :wrench: |
 | [vue/camelcase](./camelcase.md) | enforce camelcase naming convention |  |
+| [vue/class-order](./class-order.md) | enforce classnames order | :wrench: |
 | [vue/comma-dangle](./comma-dangle.md) | require or disallow trailing commas | :wrench: |
 | [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
 | [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots | :wrench: |

docs/rules/class-order.md

@@ -0,0 +1,21 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/class-order
+description: enforce classnames order
+---
+# vue/class-order
+> enforce classnames order
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :books: Further reading
+
+- [class-order]
+
+[class-order]: https://eslint.org/docs/rules/class-order
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/class-order.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/class-order.js)

lib/index.js

@@ -14,6 +14,7 @@ module.exports = {
     'block-spacing': require('./rules/block-spacing'),
     'brace-style': require('./rules/brace-style'),
     'camelcase': require('./rules/camelcase'),
+    'class-order': require('./rules/class-order'),
     'comma-dangle': require('./rules/comma-dangle'),
     'comment-directive': require('./rules/comment-directive'),
     'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),

lib/rules/class-order.js

@@ -0,0 +1,50 @@
+/**
+* @fileoverview Alphabetizes classnames.
+* @author Maciej Chmurski
+*/
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      url: 'https://eslint.vuejs.org/rules/class-order.html',
+      description: 'enforce classnames order',
+      category: undefined
+    },
+    fixable: 'code',
+    schema: []
+  },
+  create: context => {
+    return utils.defineTemplateBodyVisitor(context, {
+      "VAttribute[directive=false][key.name='class']" (node) {
+        const classList = node.value.value
+        const classListSorted = classList.split(' ').sort().join(' ')
+
+        if (classList !== classListSorted) {
+          context.report({
+            node,
+            loc: node.loc,
+            message: 'Classes should be ordered alphabetically.',
+            fix: (fixer) => fixer.replaceTextRange(
+              [node.value.range[0], node.value.range[1]], `"${classListSorted}"`
+            )
+          })
+        }
+      }
+    })
+  }
+}

tests/lib/rules/class-order.js

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview enforce ordering of classes
+ * @author Maciej Chmurski
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/class-order')
+var RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var tester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: { ecmaVersion: 2015 }
+})
+tester.run('class-order', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div class="a b"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div class="a"></div></template>'
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div class="b a"></div></template>',
+      output: '<template><div class="a b"></div></template>',
+      errors: [{
+        message: 'Classes should be ordered alphabetically.',
+        type: 'VAttribute'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code:
+        `<template>
+          <div class="c b a">
+          </div>
+        </template>`,
+      output:
+        `<template>
+          <div class="a b c">
+          </div>
+        </template>`,
+      errors: [
+        {
+          message: 'Classes should be ordered alphabetically.',
+          type: 'VAttribute'
+        }
+      ]
+    }
+  ]
+})