Skip to content

Commit 7c63e1e

Browse files
FloEdelmannFloEdelmann
authored
Rename vue/component-tags-order to vue/block-order (#2222)
1 parent 6dad5c2 commit 7c63e1e

File tree

8 files changed

+890
-173
lines changed

8 files changed

+890
-173
lines changed

‎docs/rules/block-order.md

+194
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/block-order
5+
description: enforce order of component top-level elements
6+
---
7+
# vue/block-order
8+
9+
> enforce order of component top-level elements
10+
11+
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
12+
- :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.
13+
14+
## :book: Rule Details
15+
16+
This rule warns about the order of the top-level tags, such as `<script>`, `<template>` & `<style>`.
17+
18+
## :wrench: Options
19+
20+
```json
21+
{
22+
"vue/block-order": ["error", {
23+
"order": [ [ "script", "template" ], "style" ]
24+
}]
25+
}
26+
```
27+
28+
- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "template" ], "style" ]`. May also be CSS selectors, such as `script[setup]` and `i18n:not([locale=en])`.
29+
30+
### `{ "order": [ [ "script", "template" ], "style" ] }` (default)
31+
32+
<eslint-code-block fix :rules="{'vue/block-order': ['error']}">
33+
34+
```vue
35+
<!-- ✓ GOOD -->
36+
<script>/* ... */</script>
37+
<template>...</template>
38+
<style>/* ... */</style>
39+
```
40+
41+
</eslint-code-block>
42+
43+
<eslint-code-block fix :rules="{'vue/block-order': ['error']}">
44+
45+
```vue
46+
<!-- ✓ GOOD -->
47+
<template>...</template>
48+
<script>/* ... */</script>
49+
<style>/* ... */</style>
50+
```
51+
52+
</eslint-code-block>
53+
54+
<eslint-code-block fix :rules="{'vue/block-order': ['error']}">
55+
56+
```vue
57+
<!-- ✗ BAD -->
58+
<style>/* ... */</style>
59+
<script>/* ... */</script>
60+
<template>...</template>
61+
```
62+
63+
</eslint-code-block>
64+
65+
### `{ "order": ["template", "script", "style"] }`
66+
67+
<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
68+
69+
```vue
70+
<!-- ✓ GOOD -->
71+
<template>...</template>
72+
<script>/* ... */</script>
73+
<style>/* ... */</style>
74+
```
75+
76+
</eslint-code-block>
77+
78+
<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
79+
80+
```vue
81+
<!-- ✗ BAD -->
82+
<script>/* ... */</script>
83+
<template>...</template>
84+
<style>/* ... */</style>
85+
```
86+
87+
</eslint-code-block>
88+
89+
### `{ "order": ["docs", "template", "script", "style"] }`
90+
91+
<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
92+
93+
```vue
94+
<!-- ✓ GOOD -->
95+
<docs> documentation </docs>
96+
<template>...</template>
97+
<script>/* ... */</script>
98+
<style>/* ... */</style>
99+
```
100+
101+
</eslint-code-block>
102+
103+
<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
104+
105+
```vue
106+
<!-- ✗ BAD -->
107+
<template>...</template>
108+
<script>/* ... */</script>
109+
<docs> documentation </docs>
110+
<style>/* ... */</style>
111+
```
112+
113+
</eslint-code-block>
114+
115+
### `{ 'order': ['template', 'script:not([setup])', 'script[setup]'] }`
116+
117+
<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'script:not([setup])', 'script[setup]'] }]}">
118+
119+
```vue
120+
<!-- ✓ GOOD -->
121+
<template>...</template>
122+
<script>/* ... */</script>
123+
<script setup>/* ... */</script>
124+
```
125+
126+
</eslint-code-block>
127+
128+
<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'script:not([setup])', 'script[setup]'] }]}">
129+
130+
```vue
131+
<!-- ✗ BAD -->
132+
<template>...</template>
133+
<script setup>/* ... */</script>
134+
<script>/* ... */</script>
135+
```
136+
137+
</eslint-code-block>
138+
139+
### `{ 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }`
140+
141+
<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }]}">
142+
143+
```vue
144+
<!-- ✓ GOOD -->
145+
<template>...</template>
146+
<style>/* ... */</style>
147+
<style scoped>/* ... */</style>
148+
```
149+
150+
</eslint-code-block>
151+
152+
<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }]}">
153+
154+
```vue
155+
<!-- ✗ BAD -->
156+
<template>...</template>
157+
<style scoped>/* ... */</style>
158+
<style>/* ... */</style>
159+
```
160+
161+
</eslint-code-block>
162+
163+
### `{ 'order': ['template', 'i18n:not([locale=en])', 'i18n[locale=en]'] }`
164+
165+
<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'i18n:not([locale=en])', 'i18n[locale=en]'] }]}">
166+
167+
```vue
168+
<!-- ✓ GOOD -->
169+
<template>...</template>
170+
<i18n locale="ja">/* ... */</i18n>
171+
<i18n locale="en">/* ... */</i18n>
172+
```
173+
174+
</eslint-code-block>
175+
176+
<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'i18n:not([locale=en])', 'i18n[locale=en]'] }]}">
177+
178+
```vue
179+
<!-- ✗ BAD -->
180+
<template>...</template>
181+
<i18n locale="en">/* ... */</i18n>
182+
<i18n locale="ja">/* ... */</i18n>
183+
```
184+
185+
</eslint-code-block>
186+
187+
## :books: Further Reading
188+
189+
- [Style guide - Single-file component top-level element order](https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order)
190+
191+
## :mag: Implementation
192+
193+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/block-order.js)
194+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/block-order.js)

‎docs/rules/component-tags-order.md

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ since: v6.1.0
99

1010
> enforce order of component top-level elements
1111
12+
- :no_entry_sign: This rule was **deprecated** and replaced by [vue/block-order](block-order.md) rule.
1213
- :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
1314
- :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.
1415

‎docs/rules/index.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
178178
| Rule ID | Description | | |
179179
|:--------|:------------|:--:|:--:|
180180
| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: | :three::two::hammer: |
181-
| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: | :three::two::hammer: |
181+
| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench::no_entry_sign: | :three::two::hammer: |
182182
| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` | | :three::two::warning: |
183183
| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots | | :three::two::warning: |
184184
| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack | | :three::two::hammer: |
@@ -207,6 +207,7 @@ For example:
207207
| Rule ID | Description | | |
208208
|:--------|:------------|:--:|:--:|
209209
| [vue/block-lang](./block-lang.md) | disallow use other than available `lang` | | :hammer: |
210+
| [vue/block-order](./block-order.md) | enforce order of component top-level elements | :wrench: | :hammer: |
210211
| [vue/block-tag-newline](./block-tag-newline.md) | enforce line breaks after opening and before closing block-level tags | :wrench: | :lipstick: |
211212
| [vue/component-api-style](./component-api-style.md) | enforce component API style | | :hammer: |
212213
| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: | :hammer: |
@@ -336,6 +337,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
336337

337338
| Rule ID | Replaced by |
338339
|:--------|:------------|
340+
| [vue/component-tags-order](./component-tags-order.md) | [vue/block-order](./block-order.md) |
339341
| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | [vue/valid-model-definition](./valid-model-definition.md) |
340342
| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | (no replacement) |
341343
| [vue/v-on-function-call](./v-on-function-call.md) | [vue/v-on-handler-style](./v-on-handler-style.md) |

‎lib/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ module.exports = {
1515
'attribute-hyphenation': require('./rules/attribute-hyphenation'),
1616
'attributes-order': require('./rules/attributes-order'),
1717
'block-lang': require('./rules/block-lang'),
18+
'block-order': require('./rules/block-order'),
1819
'block-spacing': require('./rules/block-spacing'),
1920
'block-tag-newline': require('./rules/block-tag-newline'),
2021
'brace-style': require('./rules/brace-style'),

0 commit comments

Comments
 (0)