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

doug-wade · Mar 24, 2022 · 5eafa3b · 5eafa3b
1 parent 8f09420
commit 5eafa3b
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 19 deletions.
diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
@@ -5,6 +5,7 @@ title: vue/component-tags-order
 description: enforce order of component top-level elements
 since: v6.1.0
 ---
+
 # vue/component-tags-order
 
 > enforce order of component top-level elements
@@ -20,9 +21,12 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 ```json
 {
-  "vue/component-tags-order": ["error", {
-    "order": [ [ "script", "template" ], "style" ]
-  }]
+  "vue/component-tags-order": [
+    "error",
+    {
+      "order": [["script", "template"], "style"]
+    }
+  ]
 }
 ```
 
@@ -34,9 +38,13 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 ```vue
 <!-- ✓ GOOD -->
-<script>/* ... */</script>
+<script>
+/* ... */
+</script>
 <template>...</template>
-<style>/* ... */</style>
+<style>
+/* ... */
+</style>
 ```
 
 </eslint-code-block>
@@ -46,8 +54,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>
@@ -56,8 +68,12 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 ```vue
 <!-- ✗ BAD -->
-<style>/* ... */</style>
-<script>/* ... */</script>
+<style>
+/* ... */
+</style>
+<script>
+/* ... */
+</script>
 <template>...</template>
 ```
 
@@ -70,8 +86,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>
@@ -80,9 +100,13 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 ```vue
 <!-- ✗ BAD -->
-<script>/* ... */</script>
+<script>
+/* ... */
+</script>
 <template>...</template>
-<style>/* ... */</style>
+<style>
+/* ... */
+</style>
 ```
 
 </eslint-code-block>
@@ -95,8 +119,12 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 <!-- ✓ GOOD -->
 <docs> documentation </docs>
 <template>...</template>
-<script>/* ... */</script>
-<style>/* ... */</style>
+<script>
+/* ... */
+</script>
+<style>
+/* ... */
+</style>
 ```
 
 </eslint-code-block>
@@ -106,9 +134,13 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 ```vue
 <!-- ✗ BAD -->
 <template>...</template>
-<script>/* ... */</script>
+<script>
+/* ... */
+</script>
 <docs> documentation </docs>
-<style>/* ... */</style>
+<style>
+/* ... */
+</style>
 ```
 
 </eslint-code-block>

diff --git a/lib/rules/component-tags-order.js b/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 []

diff --git a/tests/lib/rules/component-tags-order.js b/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,