diff --git a/docs/rules/README.md b/docs/rules/README.md index 97117319f..cd0671c44 100644 --- a/docs/rules/README.md +++ b/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: | diff --git a/docs/rules/class-order.md b/docs/rules/class-order.md new file mode 100644 index 000000000..0c8233e01 --- /dev/null +++ b/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) diff --git a/lib/index.js b/lib/index.js index 6c727f241..4424b5562 100644 --- a/lib/index.js +++ b/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'), diff --git a/lib/rules/class-order.js b/lib/rules/class-order.js new file mode 100644 index 000000000..94cc56bcc --- /dev/null +++ b/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}"` + ) + }) + } + } + }) + } +} diff --git a/tests/lib/rules/class-order.js b/tests/lib/rules/class-order.js new file mode 100644 index 000000000..e6e931ac3 --- /dev/null +++ b/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: '' + }, + { + filename: 'test.vue', + code: '' + }, + { + filename: 'test.vue', + code: '' + } + ], + + invalid: [ + { + filename: 'test.vue', + code: '', + output: '', + errors: [{ + message: 'Classes should be ordered alphabetically.', + type: 'VAttribute' + }] + }, + { + filename: 'test.vue', + code: + ``, + output: + ``, + errors: [ + { + message: 'Classes should be ordered alphabetically.', + type: 'VAttribute' + } + ] + } + ] +})