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 4 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
145 changes: 121 additions & 24 deletions docs/rules/component-tags-order.md
View file
Open in desktop
Expand Up @@ -14,29 +14,36 @@ 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" ]
}]
"vue/component-tags-order": [
"error",
{
"order": [["script", "template"], "style"]
}
]
}
```

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

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

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

```vue
<!-- ✓ GOOD -->
<script>/* ... */</script>
<script>
/* ... */
</script>
<template>...</template>
<style>/* ... */</style>
<style>
/* ... */
</style>
doug-wade marked this conversation as resolved.
Show resolved Hide resolved
```

</eslint-code-block>
Expand All @@ -46,8 +53,12 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
```vue
<!-- ✓ GOOD -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
<script>
/* ... */
</script>
<style>
/* ... */
</style>
```

</eslint-code-block>
Expand All @@ -56,59 +67,145 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags

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

</eslint-code-block>

### `{ "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'] }]}">
doug-wade marked this conversation as resolved.
Show resolved Hide resolved

```vue
<!-- ✓ GOOD -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
<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>/* ... */</script>
<script setup>
/* ... */
</script>
<script>
/* ... */
</script>
<template>...</template>
<style>/* ... */</style>
<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>
<style>/* ... */</style>
<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>
/* ... */
</script>
<script setup>
/* ... */
</script>
<docs> documentation </docs>
<style>/* ... */</style>
<style>
/* ... */
</style>
```

</eslint-code-block>

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

<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['[locale=en]', 'i18n[local=ja]', 'script', 'script[setup]', 'style:not([scoped])', 'style'] }]}">

```vue
<!-- ✓ GOOD -->
<i18n locale="en">
/* ... */
</i18n>
<i18n locale="ja">
/* ... */
</i18n>
<script>
/* ... */
</script>
<script setup>
/* ... */
</script>
<style>
/* ... */
</style>
<style scoped>
/* ... */
</style>
```

</eslint-code-block>

<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['[locale=en]', 'i18n[local=ja]', 'script', 'script[setup]', 'style:not([scoped])', 'style'] }]}">

```vue
<!-- ✗ BAD -->
<style>
/* ... */
</style>
<style scoped>
/* ... */
</style>
<i18n locale="en">
/* ... */
</i18n>
<i18n locale="ja">
/* ... */
</i18n>
<script>
/* ... */
</script>
<script setup>
/* ... */
</script>
```

</eslint-code-block>
Expand Down
100 changes: 80 additions & 20 deletions lib/rules/component-tags-order.js
View file
Open in desktop
Expand Up @@ -9,6 +9,7 @@
// ------------------------------------------------------------------------------

const utils = require('../utils')
const parser = require('postcss-selector-parser')

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

Expand Down Expand Up @@ -43,11 +44,7 @@ module.exports = {
},
additionalProperties: false
}
],
messages: {
unexpected:
'The <{{name}}> should be above the <{{firstUnorderedName}}> on line {{line}}.'
}
doug-wade marked this conversation as resolved.
Show resolved Hide resolved
]
},
/**
* @param {RuleContext} context - The rule context.
Expand All @@ -70,11 +67,74 @@ module.exports = {
})

/**
* @param {string} name
* @param {VElement} element
* @return {String}
*/
function getAttributeString(element) {
return element.startTag.attributes
.map((attribute) => {
if (attribute.value && attribute.value.type !== 'VLiteral') {
return ''
}

return `${attribute.key.name}${
attribute.value && attribute.value.value
? '=' + attribute.value.value
: ''
}`
})
.join(' ')
}

/**
* @param {String} ordering
* @param {VElement} element
* @return {Boolean} true if the element matches the selector, false otherwise
*/
function matches(ordering, element) {
let hasMatch = true
let isNegated = false

parser((selectors) => {
selectors.walk((selector) => {
switch (selector.type) {
case 'tag':
doug-wade marked this conversation as resolved.
Show resolved Hide resolved
hasMatch = hasMatch && selector.value === element.name
break
case 'pseudo':
isNegated = selector.value === ':not'
break
case 'attribute':
hasMatch =
hasMatch &&
utils.hasAttribute(
element,
selector.qualifiedAttribute,
selector.value
)
break
}
})
}).processSync(ordering)

if (isNegated) {
return !hasMatch
} else {
return hasMatch
}
}

/**
* @param {VElement} element
*/
function getOrderPosition(name) {
const num = orderMap.get(name)
return num == null ? -1 : num
function getOrderPosition(element) {
for (const [ordering, index] of orderMap.entries()) {
if (matches(ordering, element)) {
return index
}
}

return -1
}
const documentFragment =
context.parserServices.getDocumentFragment &&
Expand All @@ -95,26 +155,26 @@ module.exports = {
const elements = getTopLevelHTMLElements()
const sourceCode = context.getSourceCode()
elements.forEach((element, index) => {
const expectedIndex = getOrderPosition(element.name)
const expectedIndex = getOrderPosition(element)
if (expectedIndex < 0) {
return
}
const firstUnordered = elements
.slice(0, index)
.filter((e) => expectedIndex < getOrderPosition(e.name))
.sort(
(e1, e2) => getOrderPosition(e1.name) - getOrderPosition(e2.name)
)[0]
.filter((e) => expectedIndex < getOrderPosition(e))
.sort((e1, e2) => getOrderPosition(e1) - getOrderPosition(e2))[0]
if (firstUnordered) {
const firstUnorderedttributes = getAttributeString(firstUnordered)
const elementAttributes = getAttributeString(element)

context.report({
node: element,
loc: element.loc,
messageId: 'unexpected',
data: {
name: element.name,
firstUnorderedName: firstUnordered.name,
line: firstUnordered.loc.start.line
},
message: `The <${element.name}${
elementAttributes ? ' ' + elementAttributes : ''
}> should be above the <${firstUnordered.name}${
firstUnorderedttributes ? ' ' + firstUnorderedttributes : ''
}> on line ${firstUnordered.loc.start.line}.`,
*fix(fixer) {
// insert element before firstUnordered
const fixedElements = elements.flatMap((it) => {
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Expand Up @@ -56,6 +56,7 @@
"dependencies": {
"eslint-utils": "^3.0.0",
"natural-compare": "^1.4.0",
"postcss-selector-parser": "^6.0.9",
"semver": "^7.3.5",
"vue-eslint-parser": "^8.0.1"
},
Expand Down