Skip to content

Feature/1463 #1512

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

Closed
wants to merge 3 commits into from
Closed

Feature/1463 #1512

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
59653b7
feat: 🎸 finish sort order
IWANABETHATGUY Jun 9, 2021
4194ec7
test: 💍 pass all test
IWANABETHATGUY Jun 10, 2021
9e64164
fix: 🐛 fix lint problem
IWANABETHATGUY Jun 10, 2021
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
4 changes: 2 additions & 2 deletions docs/rules/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
| Rule ID | Description | |
|:--------|:------------|:---|
| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | |
| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: |
| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` | |
| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots | |
| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack | |
Expand Down Expand Up @@ -262,7 +262,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
| Rule ID | Description | |
|:--------|:------------|:---|
| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | |
| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: |
| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` | |
| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots | |
| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack | |
Expand Down
15 changes: 8 additions & 7 deletions docs/rules/component-tags-order.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ since: v6.1.0
> enforce order of component top-level elements

- :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
- :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.

## :book: Rule Details

Expand All @@ -29,7 +30,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags

### `{ "order": [ [ "script", "template" ], "style" ] }` (default)

<eslint-code-block :rules="{'vue/component-tags-order': ['error']}">
<eslint-code-block fix :rules="{'vue/component-tags-order': ['error']}">

```vue
<!-- ✓ GOOD -->
Expand All @@ -40,7 +41,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags

</eslint-code-block>

<eslint-code-block :rules="{'vue/component-tags-order': ['error']}">
<eslint-code-block fix :rules="{'vue/component-tags-order': ['error']}">

```vue
<!-- ✓ GOOD -->
Expand All @@ -51,7 +52,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags

</eslint-code-block>

<eslint-code-block :rules="{'vue/component-tags-order': ['error']}">
<eslint-code-block fix :rules="{'vue/component-tags-order': ['error']}">

```vue
<!-- ✗ BAD -->
Expand All @@ -64,7 +65,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags

### `{ "order": ["template", "script", "style"] }`

<eslint-code-block :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">

```vue
<!-- ✓ GOOD -->
Expand All @@ -75,7 +76,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags

</eslint-code-block>

<eslint-code-block :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">

```vue
<!-- ✗ BAD -->
Expand All @@ -88,7 +89,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags

### `{ "order": ["docs", "template", "script", "style"] }`

<eslint-code-block :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">

```vue
<!-- ✓ GOOD -->
Expand All @@ -100,7 +101,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags

</eslint-code-block>

<eslint-code-block :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">

```vue
<!-- ✗ BAD -->
Expand Down
76 changes: 72 additions & 4 deletions lib/rules/component-tags-order.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ module.exports = {
categories: ['vue3-recommended', 'recommended'],
url: 'https://eslint.vuejs.org/rules/component-tags-order.html'
},
fixable: null,
fixable: 'code',
schema: [
{
type: 'object',
Expand Down Expand Up @@ -87,11 +87,43 @@ module.exports = {
return []
}

/**
*
*
* @param {{name: string, index: number}[]} list component tag list of the SFC
*/
function getSortedTagList(list) {
list.sort((a, b) => {
const ao = getOrderPosition(a.name)
const bo = getOrderPosition(b.name)
// if two tag has same order, keep the original position
if (ao === bo) {
return 0
} else {
// else sort the tag position by asc
return ao - bo
}
})
// if the tag is customize keep the original position
for (let i = 0; i < list.length; i++) {
const order = getOrderPosition(list[i].name)
if (order === -1) {
const [res] = list.splice(i, 1)

list.splice(res.index, 0, res)
}
}

return list
}

/**
* @param {VElement} element
* @param {VElement} firstUnorderedElement
* @param {string} code
* @param {number[]} replaceRange
*/
function report(element, firstUnorderedElement) {
function report(element, firstUnorderedElement, code, replaceRange) {
context.report({
node: element,
loc: element.loc,
Expand All @@ -100,6 +132,12 @@ module.exports = {
name: element.name,
firstUnorderedName: firstUnorderedElement.name,
line: firstUnorderedElement.loc.start.line
},
fix(fixer) {
return fixer.replaceTextRange(
[replaceRange[0], replaceRange[1]],
code
)
}
})
}
Expand All @@ -110,7 +148,8 @@ module.exports = {
return
}
const elements = getTopLevelHTMLElements()

/** @type {{element: VElement, firstUnordered: VElement}[]} */
const reportCandidates = []
elements.forEach((element, index) => {
const expectedIndex = getOrderPosition(element.name)
if (expectedIndex < 0) {
Expand All @@ -123,9 +162,38 @@ module.exports = {
(e1, e2) => getOrderPosition(e1.name) - getOrderPosition(e2.name)
)[0]
if (firstUnordered) {
report(element, firstUnordered)
reportCandidates.push({ element, firstUnordered })
}
})
if (reportCandidates.length) {
const replaceRange = [
elements[0].range[0],
elements[elements.length - 1].range[1]
]
const sortTagList = getSortedTagList(
elements.map((element, index) => ({
name: element.name,
index
}))
)
const sourceCode = context.getSourceCode().text
const reOrderedCode = Array.from(
{ length: elements.length },
(_, i) => {
const [start, end] = elements[sortTagList[i].index].range
const code = sourceCode.slice(start, end)
return code
}
).join('\n')
reportCandidates.forEach((error) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ota-meshi, i report each descriptor here, because i want to share the final souceFile, it could improve a little performance.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because i want to share the final souceFile, it could improve a little performance.

I think it's more important that suppressive comments work than performance. We need to change it to move only the reported element.

report(
error.element,
error.firstUnordered,
reOrderedCode,
replaceRange
)
})
}
}
}
}
Expand Down
90 changes: 74 additions & 16 deletions tests/lib/rules/component-tags-order.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,10 @@ tester.run('component-tags-order', rule, {
line: 1,
column: 37
}
]
],
output: `<template></template>
<script></script>
<style></style>`
},
{
code: '<template></template><script></script><style></style>',
Expand All @@ -119,7 +122,10 @@ tester.run('component-tags-order', rule, {
line: 1,
column: 22
}
]
],
output: `<script></script>
<template></template>
<style></style>`
},
{
code: `
Expand All @@ -133,7 +139,11 @@ tester.run('component-tags-order', rule, {
message: 'The <script> should be above the <style> on line 4.',
line: 6
}
]
],
output: `
<template></template>
<script></script>
<style></style>`
},
{
code: `
Expand All @@ -147,7 +157,12 @@ tester.run('component-tags-order', rule, {
message: 'The <script> should be above the <template> on line 2.',
line: 3
}
]
],
output: `
<script></script>
<template></template>
<style></style>
`
},
{
code: `
Expand All @@ -161,7 +176,12 @@ tester.run('component-tags-order', rule, {
message: 'The <template> should be above the <script> on line 2.',
line: 3
}
]
],
output: `
<template></template>
<script></script>
<style></style>
`
},
{
code: `
Expand All @@ -176,7 +196,13 @@ tester.run('component-tags-order', rule, {
message: 'The <docs> should be above the <template> on line 2.',
line: 3
}
]
],
output: `
<docs></docs>
<template></template>
<script></script>
<style></style>
`
},
{
code: `
Expand All @@ -191,23 +217,36 @@ tester.run('component-tags-order', rule, {
message: 'The <script> should be above the <template> on line 2.',
line: 4
}
]
],
output: `
<script></script>
<docs></docs>
<template></template>
<style></style>
`
},
{
code: `
<template></template>
<docs>
</docs>
<script></script>
<style></style>
<docs>
</docs>
<script></script>
<style></style>
`,
options: [{ order: ['script', 'template', 'style'] }],
errors: [
{
message: 'The <script> should be above the <template> on line 2.',
line: 5
}
]
],
output: `
<script></script>
<docs>
</docs>
<template></template>
<style></style>
`
},
{
code: `
Expand All @@ -220,7 +259,11 @@ tester.run('component-tags-order', rule, {
message: 'The <template> should be above the <script> on line 2.',
line: 3
}
]
],
output: `
<template></template>
<script></script>
`
},
{
code: `
Expand All @@ -237,7 +280,12 @@ tester.run('component-tags-order', rule, {
message: 'The <script> should be above the <style> on line 2.',
line: 4
}
]
],
output: `
<template></template>
<script></script>
<style></style>
`
},
{
code: `
Expand All @@ -255,7 +303,13 @@ tester.run('component-tags-order', rule, {
message: 'The <script> should be above the <style> on line 2.',
line: 5
}
]
],
output: `
<template></template>
<docs></docs>
<script></script>
<style></style>
`
},
// no <template>
{
Expand All @@ -268,7 +322,11 @@ tester.run('component-tags-order', rule, {
message: 'The <script> should be above the <style> on line 2.',
line: 3
}
]
],
output: `
<script></script>
<style></style>
`
}
]
})