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

Jump to bottom

Fix #1819: Enforce order between script and script setup #1825

Merged
merged 17 commits into from Apr 11, 2022
Merged

Fix #1819: Enforce order between script and script setup #1825

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
366977e
Fix #1819: Enforce order between script and script setup
doug-wade Mar 24, 2022
7ea4ac4
update defaults to match documentation
doug-wade Mar 24, 2022
9b9b218
Use CSS selector syntax
doug-wade Mar 27, 2022
04f0d14
remove incorrect documentation of default behavior for script setup
doug-wade Mar 27, 2022
918fca1
Fix bug with multiple not pseudo-selectors
doug-wade Apr 2, 2022
2a5c7c2
revert component tags order docs
doug-wade Apr 3, 2022
e24dd40
update docs
doug-wade Apr 3, 2022
7e0e965
Update error message
doug-wade Apr 3, 2022
4ef2308
update headers
doug-wade Apr 3, 2022
b947ce1
update docs more better
doug-wade Apr 3, 2022
10245d5
Update tests/lib/rules/component-tags-order.js
doug-wade Apr 10, 2022
ee7c60f
Update tests/lib/rules/component-tags-order.js
doug-wade Apr 10, 2022
6b572e6
Update tests/lib/rules/component-tags-order.js
doug-wade Apr 10, 2022
c19117a
Update tests/lib/rules/component-tags-order.js
doug-wade Apr 10, 2022
7a9fbbf
Update docs/rules/component-tags-order.md
doug-wade Apr 10, 2022
7207f19
don't move the message block
doug-wade Apr 10, 2022
3403195
Merge branch 'fix-1819' of https://github.com/doug-wade/eslint-plugin…
doug-wade Apr 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 16 additions & 9 deletions docs/rules/component-tags-order.md
View file
Open in desktop
Expand Up @@ -14,27 +14,28 @@ since: v6.1.0

## :book: Rule Details

This rule warns about the order of the `<script>`, `<template>` & `<style>` tags.
This rule warns about the order of the `<script>`, `<script setup>`, `<template>` & `<style>` tags.

## :wrench: Options

```json
{
"vue/component-tags-order": ["error", {
"order": [ [ "script", "template" ], "style" ]
"order": [ [ "script", "script/setup", "template" ], "style" ]
doug-wade marked this conversation as resolved.
Show resolved Hide resolved
}]
}
```

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

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

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

```vue
<!-- ✓ GOOD -->
<script>/* ... */</script>
<script setup>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
```
Expand All @@ -47,6 +48,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
<!-- ✓ GOOD -->
<template>...</template>
<script>/* ... */</script>
<script setup>/* ... */</script>
<style>/* ... */</style>
```

Expand All @@ -57,6 +59,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
```vue
<!-- ✗ BAD -->
<style>/* ... */</style>
<script setup>/* ... */</script>
<script>/* ... */</script>
<template>...</template>
```
Expand All @@ -65,48 +68,52 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags

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

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

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

</eslint-code-block>

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

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

</eslint-code-block>

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

<eslint-code-block fix :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', 'script/setup', 'style'] }]}">

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

</eslint-code-block>

<eslint-code-block fix :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', 'script/setup', 'style'] }]}">

```vue
<!-- ✗ BAD -->
<template>...</template>
<script>/* ... */</script>
<script setup>/* ... */</script>
<docs> documentation </docs>
<style>/* ... */</style>
```
Expand Down
21 changes: 18 additions & 3 deletions lib/rules/component-tags-order.js
View file
Open in desktop
Expand Up @@ -10,7 +10,10 @@

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

const DEFAULT_ORDER = Object.freeze([['script', 'template'], 'style'])
const DEFAULT_ORDER = Object.freeze([
doug-wade marked this conversation as resolved.
Show resolved Hide resolved
['script', 'script/setup', 'template'],
'style'
])

// ------------------------------------------------------------------------------
// Rule Definition
Expand Down Expand Up @@ -86,6 +89,12 @@ module.exports = {
}
return []
}
/**
* @param {VElement} element
*/
function isSetupScript(element) {
return element.name === 'script' && utils.getAttribute(element, 'setup')
}

return {
Program(node) {
Expand All @@ -101,6 +110,12 @@ module.exports = {
}
const firstUnordered = elements
.slice(0, index)
.map((e) => {
return {
element: e,
name: isSetupScript(e) ? 'script/setup' : e.name
}
})
.filter((e) => expectedIndex < getOrderPosition(e.name))
.sort(
(e1, e2) => getOrderPosition(e1.name) - getOrderPosition(e2.name)
Expand All @@ -113,12 +128,12 @@ module.exports = {
data: {
name: element.name,
firstUnorderedName: firstUnordered.name,
line: firstUnordered.loc.start.line
line: firstUnordered.element.loc.start.line
},
*fix(fixer) {
// insert element before firstUnordered
const fixedElements = elements.flatMap((it) => {
if (it === firstUnordered) {
if (it === firstUnordered.element) {
return [element, it]
} else if (it === element) {
return []
Expand Down
12 changes: 12 additions & 0 deletions tests/lib/rules/component-tags-order.js
View file
Open in desktop
Expand Up @@ -50,6 +50,8 @@ tester.run('component-tags-order', rule, {
'<template></template><script></script><docs></docs><style></style>',
'<script></script><template></template>',
'<template></template><script></script>',
'<script setup></script><script></script>',
'<docs></docs><template></template><script></script><script setup></script><style></style>',
`
<template>
</template>
Expand Down Expand Up @@ -102,6 +104,16 @@ tester.run('component-tags-order', rule, {
output: null,
options: [{ order: ['docs', 'script', 'template', 'style'] }]
},
{
code: '<script setup></script><script></script><template></template><style></style>',
output: null,
options: [{ order: ['script/setup', 'script', 'template', 'style'] }]
},
{
code: '<template></template><script setup></script><script></script><style></style>',
output: null,
options: [{ order: [['script/setup', 'script', 'template'], 'style'] }]
},
{
doug-wade marked this conversation as resolved.
Show resolved Hide resolved
code: '<template></template><docs></docs><script></script><style></style>',
output: null,
Expand Down