From 7a19f2c4850ed98f0849d042129357c2939a1cbc Mon Sep 17 00:00:00 2001 From: Maciej Chmurski Date: Wed, 1 May 2019 18:36:38 +0200 Subject: [PATCH 1/8] class-order rule --- docs/rules/README.md | 1 + docs/rules/class-order.md | 21 +++++++++++ lib/index.js | 1 + lib/rules/class-order.js | 50 ++++++++++++++++++++++++ tests/lib/rules/class-order.js | 69 ++++++++++++++++++++++++++++++++++ 5 files changed, 142 insertions(+) create mode 100644 docs/rules/class-order.md create mode 100644 lib/rules/class-order.js create mode 100644 tests/lib/rules/class-order.js diff --git a/docs/rules/README.md b/docs/rules/README.md index e1c88ff56..0b031f7a4 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 d2d3d0e15..d437d6ee9 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' + } + ] + } + ] +}) From 37a9421fba99e2b78ec60dbc165980eff1c1d721 Mon Sep 17 00:00:00 2001 From: Maciej Chmurski Date: Mon, 11 Nov 2019 15:42:08 +0100 Subject: [PATCH 2/8] support ascii whitespace, add tests --- docs/rules/README.md | 2 +- docs/rules/class-order.md | 21 ----------- docs/rules/static-class-names-order.md | 37 +++++++++++++++++++ lib/index.js | 2 +- ...s-order.js => static-class-names-order.js} | 13 ++++++- ...s-order.js => static-class-names-order.js} | 26 ++++++++----- 6 files changed, 67 insertions(+), 34 deletions(-) delete mode 100644 docs/rules/class-order.md create mode 100644 docs/rules/static-class-names-order.md rename lib/rules/{class-order.js => static-class-names-order.js} (73%) rename tests/lib/rules/{class-order.js => static-class-names-order.js} (70%) diff --git a/docs/rules/README.md b/docs/rules/README.md index 0b031f7a4..df79dff88 100644 --- a/docs/rules/README.md +++ b/docs/rules/README.md @@ -144,7 +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/static-class-names-order](./static-class-names-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 deleted file mode 100644 index 0c8233e01..000000000 --- a/docs/rules/class-order.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -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/docs/rules/static-class-names-order.md b/docs/rules/static-class-names-order.md new file mode 100644 index 000000000..bf4af282e --- /dev/null +++ b/docs/rules/static-class-names-order.md @@ -0,0 +1,37 @@ +--- +pageClass: rule-details +sidebarDepth: 0 +title: vue/static-class-names-order +description: enforce classnames order +--- +# vue/static-class-names-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 + +- [static-class-names-order] + +[static-class-names-order]: https://eslint.org/docs/rules/static-class-names-order + +## :mag: Implementation + +- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/static-class-names-order.js) +- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/static-class-names-order.js) + +### Example + + + +```vue +