Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Update] Make vue/attributes-order fixable #405

Merged
merged 21 commits into from
Apr 1, 2018
Merged

[Update] Make vue/attributes-order fixable #405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
98dbf8a
Add Vue.extend support, add missing info about Vue.mixin check in readme
michalsnik Jan 2, 2018
7c4a1d2
Docs: fixes wording in docs (#372)
samturrell Feb 1, 2018
cd22a28
Fix: fix script-indent to prevent removing <script> tag (fixes #367) …
mysticatea Feb 16, 2018
ee5cc0a
[Update] Make `vue/max-attributes-per-line` fixable (#380)
ota-meshi Feb 16, 2018
6861c81
Update: make `vue/order-in-components` fixable (#381)
ota-meshi Feb 17, 2018
5890808
Fix: no-async-in-computed-properties crash (fixes #390)
mysticatea Feb 16, 2018
e79dd8b
Fix: valid-v-on false positive (fixes #351)
mysticatea Feb 16, 2018
733172c
Fix: indent rules false positive (fixes #375)
mysticatea Feb 16, 2018
e887a8d
[New] Add `prop-name-casing`
Dec 10, 2017
22a3a75
fix message and category
Jan 4, 2018
a846dd1
fix category
Jan 4, 2018
b1a7cca
fix test message
Jan 4, 2018
17d8c2b
Set category to undefined
michalsnik Jan 6, 2018
789a2fc
Add more tests and fix edge case scenario
michalsnik Jan 28, 2018
e804ca2
attribute order linting
Jan 5, 2018
abbde6f
updating docs, tests and category
Feb 7, 2018
8a560ab
[Update] Make `vue/attributes-order` fixable
ota-meshi Feb 22, 2018
b89a182
Merge branch 'master' into develop/attributes-order--fixable
ota-meshi Feb 24, 2018
e61f2f8
[fix] That `vue/attributes-order` got duplicated when merging README
ota-meshi Feb 24, 2018
dbb945d
[add] messed order properties test case
ota-meshi Mar 29, 2018
ac03113
[fix] unify input on test case
ota-meshi Mar 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion lib/rules/attributes-order.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,31 @@ function create (context) {
message: `Attribute "${currentNode}" should go before "${prevNode}".`,
data: {
currentNode
},

fix (fixer) {
const attributes = node.parent.attributes
const shiftAttrs = attributes.slice(attributes.indexOf(previousNode), attributes.indexOf(node) + 1)

// If we can upgrade requirements to `eslint@>4.1.0`, this code can be replaced by:
// return shiftAttrs.map((attr, i) => {
// const text = attr === previousNode ? sourceCode.getText(node) : sourceCode.getText(shiftAttrs[i - 1])
// return fixer.replaceText(attr, text)
// })
const replaceDataList = shiftAttrs.map((attr, i) => {
const text = attr === previousNode ? sourceCode.getText(node) : sourceCode.getText(shiftAttrs[i - 1])
return {
range: attr.range,
text
}
})
const replaceRange = [previousNode.range[0], node.range[1]]
let text = sourceCode.text.slice(replaceRange[0], replaceRange[1])
replaceDataList.reverse().forEach((data) => {
const textRange = data.range.map(r => r - replaceRange[0])
text = text.slice(0, textRange[0]) + data.text + text.slice(textRange[1], text.length)
})
return fixer.replaceTextRange(replaceRange, text)
}
})
}
Expand All @@ -85,7 +110,7 @@ module.exports = {
description: 'enforce order of attributes',
category: 'recommended'
},
fixable: null,
fixable: 'code',
schema: {
type: 'array',
properties: {
Expand Down
213 changes: 213 additions & 0 deletions tests/lib/rules/attributes-order.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,13 +208,48 @@ tester.run('attributes-order', rule, {
'EVENTS',
'CONTENT']
}]
},
{
filename: 'test.vue',
code:
`<template>
<div
v-if="!visible"
v-for="item in items"
v-once
is="header"
v-on:click="functionCall"
ref="header"
:prop="headerData"
v-text="textContent"
id="uniqueID"
myProp="prop"
>
</div>
</template>`,
options: [
{ order:
[
'CONDITIONALS',
'LIST_RENDERING',
'RENDER_MODIFIERS',
'DEFINITION',
'EVENTS',
'UNIQUE',
'BINDING',
'CONTENT',
'GLOBAL',
'OTHER_ATTR'
]
}]
}
],

invalid: [
{
filename: 'test.vue',
code: '<template><div v-cloak is="header"></div></template>',
output: '<template><div is="header" v-cloak></div></template>',
errors: [{
message: 'Attribute "is" should go before "v-cloak".',
type: 'VIdentifier'
Expand All @@ -223,6 +258,7 @@ tester.run('attributes-order', rule, {
{
filename: 'test.vue',
code: '<template><div id="uniqueID" v-cloak></div></template>',
output: '<template><div v-cloak id="uniqueID"></div></template>',
errors: [{
message: 'Attribute "v-cloak" should go before "id".',
type: 'VDirectiveKey'
Expand All @@ -239,6 +275,15 @@ tester.run('attributes-order', rule, {
:bindingProp="foo">
</div>
</template>`,
output:
`<template>
<div
v-model="toggle"
model="baz"
:bindingProp="foo"
propOne="bar">
</div>
</template>`,
errors: [{
message: 'Attribute "v-model" should go before "model".',
type: 'VDirectiveKey'
Expand All @@ -260,6 +305,16 @@ tester.run('attributes-order', rule, {
propOne="bar">
</div>
</template>`,
output:
`<template>
<div
:bindingProp="foo"
model="baz"
v-model="toggle"
v-on="functionCall"
propOne="bar">
</div>
</template>`,
errors: [{
message: 'Attribute "v-model" should go before "v-on".',
type: 'VDirectiveKey'
Expand All @@ -272,6 +327,7 @@ tester.run('attributes-order', rule, {
{
filename: 'test.vue',
code: '<template><div data-id="foo" aria-test="bar" is="custom" myProp="prop"></div></template>',
output: '<template><div data-id="foo" is="custom" aria-test="bar" myProp="prop"></div></template>',
errors: [{
message: 'Attribute "is" should go before "aria-test".',
type: 'VIdentifier'
Expand All @@ -293,10 +349,167 @@ tester.run('attributes-order', rule, {
'EVENTS',
'CONTENT']
}],
output: '<template><div ref="header" is="header" propone="prop" ></div></template>',
errors: [{
message: 'Attribute "is" should go before "propone".',
type: 'VIdentifier'
}]
},
{
filename: 'test.vue',
code:
`<template>
<div v-cloak
is="header">
</div>
</template>`,
output:
`<template>
<div is="header"
v-cloak>
</div>
</template>`,
errors: [{
message: 'Attribute "is" should go before "v-cloak".',
type: 'VIdentifier'
}]
},
{
filename: 'test.vue',
code:
`<template>
<div
v-if="!visible"
v-for="item in items"
v-once
is="header"
v-on:click="functionCall"
ref="header"
:prop="headerData"
v-text="textContent"
id="uniqueID"
myProp="prop"
>
</div>
</template>`,
output:
`<template>
<div
v-for="item in items"
v-if="!visible"
is="header"
v-once
ref="header"
v-on:click="functionCall"
:prop="headerData"
id="uniqueID"
v-text="textContent"
myProp="prop"
>
</div>
</template>`,
errors: [
{
message: 'Attribute "v-for" should go before "v-if".',
type: 'VDirectiveKey'
},
{
message: 'Attribute "is" should go before "v-once".',
type: 'VIdentifier'
},
{
message: 'Attribute "ref" should go before "v-on:click".',
type: 'VIdentifier'
},
{
message: 'Attribute ":prop" should go before "v-on:click".',
type: 'VDirectiveKey'
},
{
message: 'Attribute "id" should go before "v-text".',
type: 'VIdentifier'
},
{
message: 'Attribute "myProp" should go before "v-text".',
type: 'VIdentifier'
}
]
},
{
filename: 'test.vue',
code:
`<template>
<div
v-if="!visible"
v-for="item in items"
v-once
is="header"
v-on:click="functionCall"
ref="header"
:prop="headerData"
v-text="textContent"
id="uniqueID"
myProp="prop"
>
</div>
</template>`,
options: [
{ order:
[
'EVENTS',
'BINDING',
'UNIQUE',
'DEFINITION',
'CONDITIONALS',
'LIST_RENDERING',
'RENDER_MODIFIERS',
'GLOBAL',
'OTHER_ATTR',
'CONTENT'
]
}],
output:
`<template>
<div
v-if="!visible"
v-for="item in items"
is="header"
v-once
v-on:click="functionCall"
ref="header"
:prop="headerData"
id="uniqueID"
v-text="textContent"
myProp="prop"
>
</div>
</template>`,
errors: [
{
message: 'Attribute "is" should go before "v-once".',
nodeType: 'VIdentifier'
},
{
message: 'Attribute "v-on:click" should go before "v-once".',
nodeType: 'VDirectiveKey'
},
{
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'
},
{
message: 'Attribute "myProp" should go before "v-text".',
nodeType: 'VIdentifier'
}
]
}
]
})