diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md index 913368f71..e7b9a6209 100644 --- a/docs/rules/attributes-order.md +++ b/docs/rules/attributes-order.md @@ -18,10 +18,12 @@ ex: 'v-once', 'v-pre' ex: 'id' - UNIQUE ex: 'ref', 'key', 'slot' -- BINDING -ex: 'v-model', 'v-bind', ':property="foo"' +- TWO\_WAY\_BINDING +ex: 'v-model' +- OTHER_DIRECTIVES +ex: 'v-custom-directive' - OTHER_ATTR -ex: 'customProp="foo"' +ex: 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="foo"' - EVENTS ex: '@click="functionCall"', 'v-on="event"' - CONTENT @@ -38,7 +40,7 @@ ex: 'v-text', 'v-html' id="uniqueID" ref="header" v-model="headerData" - myProp="prop" + my-prop="prop" @click="functionCall" v-text="textContent"> @@ -48,9 +50,9 @@ ex: 'v-text', 'v-html'
@@ -58,9 +60,9 @@ ex: 'v-text', 'v-html' ```html
+ prop-one="prop" + :prop-two="prop" + prop-three="prop">
``` @@ -70,9 +72,10 @@ ex: 'v-text', 'v-html'
+
``` ```html - +
+ prop-one="prop" + prop-two="prop">
``` :-1: Examples of **incorrect** code with custom order`: ```html - +
``` diff --git a/lib/rules/attributes-order.js b/lib/rules/attributes-order.js index 04a5f7717..6faa60502 100644 --- a/lib/rules/attributes-order.js +++ b/lib/rules/attributes-order.js @@ -17,12 +17,14 @@ function getAttributeType (name, isDirective) { return 'CONDITIONALS' } else if (name === 'pre' || name === 'once') { return 'RENDER_MODIFIERS' - } else if (name === 'model' || name === 'bind') { - return 'BINDING' + } else if (name === 'model') { + return 'TWO_WAY_BINDING' } else if (name === 'on') { return 'EVENTS' } else if (name === 'html' || name === 'text') { return 'CONTENT' + } else { + return 'OTHER_DIRECTIVES' } } else { if (name === 'is') { @@ -37,13 +39,18 @@ function getAttributeType (name, isDirective) { } } function getPosition (attribute, attributeOrder) { - const attributeType = getAttributeType(attribute.key.name, attribute.directive) + let attributeType + if (attribute.directive && attribute.key.name === 'bind') { + attributeType = getAttributeType(attribute.key.argument, false) + } else { + 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'] + let attributeOrder = ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] if (context.options[0] && context.options[0].order) { attributeOrder = context.options[0].order } diff --git a/tests/lib/rules/attributes-order.js b/tests/lib/rules/attributes-order.js index 9366ac130..ece0b262a 100644 --- a/tests/lib/rules/attributes-order.js +++ b/tests/lib/rules/attributes-order.js @@ -82,6 +82,10 @@ tester.run('attributes-order', rule, { filename: 'test.vue', code: '' }, + { + filename: 'test.vue', + code: '' + }, { filename: 'test.vue', code: @@ -105,7 +109,7 @@ tester.run('attributes-order', rule, { { filename: 'test.vue', code: - ``, @@ -289,7 +296,7 @@ tester.run('attributes-order', rule, { type: 'VDirectiveKey' }, { - message: 'Attribute ":bindingProp" should go before "propOne".', + message: 'Attribute ":id" should go before "propOne".', type: 'VDirectiveKey' }] }, @@ -343,8 +350,9 @@ tester.run('attributes-order', rule, { 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', - 'BINDING', + 'TWO_WAY_BINDING', 'DEFINITION', + 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] @@ -457,7 +465,7 @@ tester.run('attributes-order', rule, { { order: [ 'EVENTS', - 'BINDING', + 'TWO_WAY_BINDING', 'UNIQUE', 'DEFINITION', 'CONDITIONALS', @@ -465,6 +473,7 @@ tester.run('attributes-order', rule, { 'RENDER_MODIFIERS', 'GLOBAL', 'OTHER_ATTR', + 'OTHER_DIRECTIVES', 'CONTENT' ] }], @@ -497,10 +506,6 @@ tester.run('attributes-order', rule, { message: 'Attribute "ref" should go before "v-once".', nodeType: 'VIdentifier' }, - { - message: 'Attribute ":prop" should go before "v-once".', - nodeType: 'VDirectiveKey' - }, { message: 'Attribute "id" should go before "v-text".', nodeType: 'VIdentifier'