Skip to content

Commit

Permalink
Changed so that the names array can be specified in the one order opt…
Browse files Browse the repository at this point in the history 
…ion of the `vue/component-tags-order` rule, and the default setting has been changed. (#1189)
  • Loading branch information
@ota-meshi
ota-meshi committed Jun 5, 2020
1 parent 7dee01d commit 1700708
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 25 deletions.
17 changes: 9 additions & 8 deletions docs/rules/comment-directive.md
View file
Expand Up @@ -49,8 +49,8 @@ The `eslint-disable`-like comments can be used in the `<template>` and in the bl
</template>
<!-- eslint-disable-next-line vue/component-tags-order -->
<script>
</script>
<style>
</style>
```

</eslint-code-block>
Expand All @@ -60,15 +60,16 @@ The `eslint-disable` comments has no effect after one block.
<eslint-code-block :rules="{'vue/comment-directive': ['error'], 'vue/max-attributes-per-line': ['error'], 'vue/component-tags-order': ['error'] }">

```vue
<template>
</template>
<!-- eslint-disable vue/component-tags-order -->
<style> /* <- Warning has been disabled. */
<style>
</style>
<script> /* <- Warning are not disabled. */
<!-- eslint-disable -->
<script> /* <- Warning has been disabled. */
</script>
<template> <!-- <- Warning are not disabled. -->
</template>
```

</eslint-code-block>
Expand Down
28 changes: 25 additions & 3 deletions docs/rules/component-tags-order.md
View file
Expand Up @@ -18,14 +18,14 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
```json
{
"vue/component-tags-order": ["error", {
"order": ["script", "template", "style"]
"order": [ [ "script", "template" ], "style" ]
}]
}
```

- `order` (`string[]`) ... The order of top-level element names. default `["script", "template", "style"]`.
- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "template" ], "style" ]`.

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

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

Expand All @@ -40,6 +40,17 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags

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

```vue
<!-- ✓ GOOD -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
```

</eslint-code-block>

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

```vue
<!-- ✗ BAD -->
<style>/* ... */</style>
Expand All @@ -62,6 +73,17 @@ 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'] }]}">

```vue
<!-- ✗ BAD -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
```

</eslint-code-block>

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

<eslint-code-block :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
Expand Down
46 changes: 34 additions & 12 deletions lib/rules/component-tags-order.js
View file
Expand Up @@ -10,7 +10,7 @@

const utils = require('../utils')

const DEFAULT_ORDER = Object.freeze(['script', 'template', 'style'])
const DEFAULT_ORDER = Object.freeze([['script', 'template'], 'style'])

// ------------------------------------------------------------------------------
// Rule Definition
Expand All @@ -25,22 +25,44 @@ module.exports = {
url: 'https://eslint.vuejs.org/rules/component-tags-order.html'
},
fixable: null,
schema: {
type: 'array',
properties: {
order: {
type: 'array'
schema: [
{
type: 'object',
properties: {
order: {
type: 'array',
items: {
anyOf: [
{ type: 'string' },
{ type: 'array', items: { type: 'string' }, uniqueItems: true }
]
},
uniqueItems: true,
additionalItems: false
}
}
}
},
],
messages: {
unexpected:
'The <{{name}}> should be above the <{{firstUnorderedName}}> on line {{line}}.'
}
},
create(context) {
const order =
(context.options[0] && context.options[0].order) || DEFAULT_ORDER
/** @type {Map<string, number} */
const orderMap = new Map()
;(
(context.options[0] && context.options[0].order) ||
DEFAULT_ORDER
).forEach((nameOrNames, index) => {
if (Array.isArray(nameOrNames)) {
for (const name of nameOrNames) {
orderMap.set(name, index)
}
} else {
orderMap.set(nameOrNames, index)
}
})
const documentFragment =
context.parserServices.getDocumentFragment &&
context.parserServices.getDocumentFragment()
Expand Down Expand Up @@ -76,15 +98,15 @@ module.exports = {
const elements = getTopLevelHTMLElements()

elements.forEach((element, index) => {
const expectedIndex = order.indexOf(element.name)
const expectedIndex = orderMap.get(element.name)
if (expectedIndex < 0) {
return
}
const firstUnordered = elements
.slice(0, index)
.filter((e) => expectedIndex < order.indexOf(e.name))
.filter((e) => expectedIndex < orderMap.get(e.name))
.sort(
(e1, e2) => order.indexOf(e1.name) - order.indexOf(e2.name)
(e1, e2) => orderMap.get(e1.name) - orderMap.get(e2.name)
)[0]
if (firstUnordered) {
report(element, firstUnordered)
Expand Down
62 changes: 60 additions & 2 deletions tests/lib/rules/component-tags-order.js
View file
Expand Up @@ -22,10 +22,24 @@ tester.run('component-tags-order', rule, {
valid: [
// default
'<script></script><template></template><style></style>',
'<template></template><script></script><style></style>',
'<script> /*script*/ </script><template><div id="id">text <!--comment--> </div><br></template><style>.button{ color: red; }</style>',
'<docs></docs><script></script><template></template><style></style>',
'<script></script><docs></docs><template></template><style></style>',
'<docs></docs><template></template><script></script><style></style>',
'<template></template><script></script><docs></docs><style></style>',
'<script></script><template></template>',
'<template></template><script></script>',
`
<template>
</template>
<script>
</script>
<style>
</style>
`,
`
<script>
</script>
Expand All @@ -38,6 +52,11 @@ tester.run('component-tags-order', rule, {
`,

// order
{
code: '<script></script><template></template><style></style>',
output: null,
options: [{ order: ['script', 'template', 'style'] }]
},
{
code: '<template></template><script></script><style></style>',
output: null,
Expand Down Expand Up @@ -65,6 +84,12 @@ tester.run('component-tags-order', rule, {
output: null,
options: [{ order: ['docs', 'script', 'template', 'style'] }]
},
{
code:
'<template></template><docs></docs><script></script><style></style>',
output: null,
options: [{ order: [['docs', 'script', 'template'], 'style'] }]
},

`<script></script><style></style>`,

Expand All @@ -73,8 +98,24 @@ tester.run('component-tags-order', rule, {
'<template><div><!--test</div></template><style></style>'
],
invalid: [
{
code: '<style></style><template></template><script></script>',
errors: [
{
message: 'The <template> should be above the <style> on line 1.',
line: 1,
column: 16
},
{
message: 'The <script> should be above the <style> on line 1.',
line: 1,
column: 37
}
]
},
{
code: '<template></template><script></script><style></style>',
options: [{ order: ['script', 'template', 'style'] }],
errors: [
{
message: 'The <script> should be above the <template> on line 1.',
Expand All @@ -83,12 +124,27 @@ tester.run('component-tags-order', rule, {
}
]
},
{
code: `
<template></template>
<style></style>
<script></script>`,
errors: [
{
message: 'The <script> should be above the <style> on line 4.',
line: 6
}
]
},
{
code: `
<template></template>
<script></script>
<style></style>
`,
options: [{ order: ['script', 'template', 'style'] }],
errors: [
{
message: 'The <script> should be above the <template> on line 2.',
Expand Down Expand Up @@ -132,6 +188,7 @@ tester.run('component-tags-order', rule, {
<script></script>
<style></style>
`,
options: [{ order: ['script', 'template', 'style'] }],
errors: [
{
message: 'The <script> should be above the <template> on line 2.',
Expand All @@ -147,6 +204,7 @@ tester.run('component-tags-order', rule, {
<script></script>
<style></style>
`,
options: [{ order: ['script', 'template', 'style'] }],
errors: [
{
message: 'The <script> should be above the <template> on line 2.',
Expand Down Expand Up @@ -179,7 +237,7 @@ tester.run('component-tags-order', rule, {
line: 3
},
{
message: 'The <script> should be above the <template> on line 3.',
message: 'The <script> should be above the <style> on line 2.',
line: 4
}
]
Expand All @@ -197,7 +255,7 @@ tester.run('component-tags-order', rule, {
line: 4
},
{
message: 'The <script> should be above the <template> on line 4.',
message: 'The <script> should be above the <style> on line 2.',
line: 5
}
]
Expand Down

0 comments on commit 1700708

Please sign in to comment.