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

Author: doug-wade

docs/rules/component-tags-order.md

@@ -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" ]
   }]
 }
 ```
 
-- `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>
 ```
@@ -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>
 ```
 
@@ -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>
 ```
@@ -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>
 ```

lib/rules/component-tags-order.js

@@ -86,6 +86,12 @@ module.exports = {
       }
       return []
     }
+    /**
+     * @param {VElement} element
+     */
+    function isSetupScript(element) {
+      return element.name === 'script' && utils.getAttribute(element, 'setup')
+    }
 
     return {
       Program(node) {
@@ -101,6 +107,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)
@@ -113,12 +125,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 []

tests/lib/rules/component-tags-order.js

@@ -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>
@@ -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'] }]
+    },
     {
       code: '<template></template><docs></docs><script></script><style></style>',
       output: null,