From 37a03ed7ca9be498341851a0131cfe85a68dba86 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Wed, 9 Jun 2021 18:01:47 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20finish=20sort=20orde?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/rules/README.md               |  4 ++--
 docs/rules/component-tags-order.md | 15 ++++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 5b2d22293..3d4a9b2e3 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -167,7 +167,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
-| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements |  |
+| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: |
 | [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  |
 | [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  |
 | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
@@ -283,7 +283,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
-| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements |  |
+| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: |
 | [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  |
 | [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  |
 | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
index bd47f2d8c..9b053ab21 100644
--- a/docs/rules/component-tags-order.md
+++ b/docs/rules/component-tags-order.md
@@ -10,6 +10,7 @@ since: v6.1.0
 > enforce order of component top-level elements
 
 - :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :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.
 
 ## :book: Rule Details
 
@@ -29,7 +30,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 ### `{ "order": [ [ "script", "template" ], "style" ] }` (default)
 
-<eslint-code-block :rules="{'vue/component-tags-order': ['error']}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error']}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -40,7 +41,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/component-tags-order': ['error']}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error']}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -51,7 +52,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/component-tags-order': ['error']}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error']}">
 
 ```vue
 <!-- ✗ BAD -->
@@ -64,7 +65,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 ### `{ "order": ["template", "script", "style"] }`
 
-<eslint-code-block :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -75,7 +76,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
 
 ```vue
 <!-- ✗ BAD -->
@@ -88,7 +89,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 ### `{ "order": ["docs", "template", "script", "style"] }`
 
-<eslint-code-block :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', 'style'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -100,7 +101,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 </eslint-code-block>
 
-<eslint-code-block :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', 'style'] }]}">
 
 ```vue
 <!-- ✗ BAD -->

From 1bba5677b03ea5a1ebacd76af5e4bbe8bdd7fa92 Mon Sep 17 00:00:00 2001
From: lsdsjy <lsdsjy@163.com>
Date: Wed, 2 Mar 2022 16:43:10 +0800
Subject: [PATCH 2/4] Auto-fix for vue/component-tags-order

---
 lib/rules/component-tags-order.js       |  51 +++++++----
 tests/lib/rules/component-tags-order.js | 117 +++++++++++++++++++++---
 2 files changed, 136 insertions(+), 32 deletions(-)

diff --git a/lib/rules/component-tags-order.js b/lib/rules/component-tags-order.js
index dc7da9725..afb624f9f 100644
--- a/lib/rules/component-tags-order.js
+++ b/lib/rules/component-tags-order.js
@@ -24,7 +24,7 @@ module.exports = {
       categories: ['vue3-recommended', 'recommended'],
       url: 'https://eslint.vuejs.org/rules/component-tags-order.html'
     },
-    fixable: null,
+    fixable: 'code',
     schema: [
       {
         type: 'object',
@@ -87,30 +87,13 @@ module.exports = {
       return []
     }
 
-    /**
-     * @param {VElement} element
-     * @param {VElement} firstUnorderedElement
-     */
-    function report(element, firstUnorderedElement) {
-      context.report({
-        node: element,
-        loc: element.loc,
-        messageId: 'unexpected',
-        data: {
-          name: element.name,
-          firstUnorderedName: firstUnorderedElement.name,
-          line: firstUnorderedElement.loc.start.line
-        }
-      })
-    }
-
     return {
       Program(node) {
         if (utils.hasInvalidEOF(node)) {
           return
         }
         const elements = getTopLevelHTMLElements()
-
+        const sourceCode = context.getSourceCode()
         elements.forEach((element, index) => {
           const expectedIndex = getOrderPosition(element.name)
           if (expectedIndex < 0) {
@@ -123,7 +106,35 @@ module.exports = {
               (e1, e2) => getOrderPosition(e1.name) - getOrderPosition(e2.name)
             )[0]
           if (firstUnordered) {
-            report(element, firstUnordered)
+            context.report({
+              node: element,
+              loc: element.loc,
+              messageId: 'unexpected',
+              data: {
+                name: element.name,
+                firstUnorderedName: firstUnordered.name,
+                line: firstUnordered.loc.start.line
+              },
+              *fix(fixer) {
+                // insert element before firstUnordered
+                const fixedElements = elements.flatMap((it) => {
+                  if (it === firstUnordered) {
+                    return [element, it]
+                  } else if (it === element) {
+                    return []
+                  }
+                  return [it]
+                })
+                for (let i = elements.length - 1; i >= 0; i--) {
+                  if (elements[i] !== fixedElements[i]) {
+                    yield fixer.replaceTextRange(
+                      elements[i].range,
+                      sourceCode.text.slice(...fixedElements[i].range)
+                    )
+                  }
+                }
+              }
+            })
           }
         })
       }
diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index 0c40d4997..0ef9b6220 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -9,6 +9,25 @@
 
 const rule = require('../../../lib/rules/component-tags-order')
 const RuleTester = require('eslint').RuleTester
+const assert = require('assert')
+const { ESLint } = require('../../eslint-compat')
+
+// Initialize linter.
+const eslint = new ESLint({
+  overrideConfig: {
+    parser: require.resolve('vue-eslint-parser'),
+    parserOptions: {
+      ecmaVersion: 2015
+    },
+    plugins: ['vue'],
+    rules: {
+      'vue/comment-directive': 'error',
+      'vue/component-tags-order': 'error'
+    }
+  },
+  useEslintrc: false,
+  plugins: { vue: require('../../../lib/index') }
+})
 
 // ------------------------------------------------------------------------------
 // Tests
@@ -108,7 +127,8 @@ tester.run('component-tags-order', rule, {
           line: 1,
           column: 37
         }
-      ]
+      ],
+      output: '<template></template><style></style><script></script>'
     },
     {
       code: '<template></template><script></script><style></style>',
@@ -119,7 +139,8 @@ tester.run('component-tags-order', rule, {
           line: 1,
           column: 22
         }
-      ]
+      ],
+      output: '<script></script><template></template><style></style>'
     },
     {
       code: `
@@ -133,7 +154,14 @@ tester.run('component-tags-order', rule, {
           message: 'The <script> should be above the <style> on line 4.',
           line: 6
         }
-      ]
+      ],
+      output:
+        '\n' +
+        '        <template></template>\n' +
+        '\n' +
+        '        <script></script>\n' +
+        '\n' +
+        '        <style></style>'
     },
     {
       code: `
@@ -147,7 +175,13 @@ tester.run('component-tags-order', rule, {
           message: 'The <script> should be above the <template> on line 2.',
           line: 3
         }
-      ]
+      ],
+      output:
+        '\n' +
+        '        <script></script>\n' +
+        '        <template></template>\n' +
+        '        <style></style>\n' +
+        '      '
     },
     {
       code: `
@@ -161,7 +195,13 @@ tester.run('component-tags-order', rule, {
           message: 'The <template> should be above the <script> on line 2.',
           line: 3
         }
-      ]
+      ],
+      output:
+        '\n' +
+        '        <template></template>\n' +
+        '        <script></script>\n' +
+        '        <style></style>\n' +
+        '      '
     },
     {
       code: `
@@ -176,7 +216,14 @@ tester.run('component-tags-order', rule, {
           message: 'The <docs> should be above the <template> on line 2.',
           line: 3
         }
-      ]
+      ],
+      output:
+        '\n' +
+        '        <docs></docs>\n' +
+        '        <template></template>\n' +
+        '        <script></script>\n' +
+        '        <style></style>\n' +
+        '      '
     },
     {
       code: `
@@ -191,7 +238,14 @@ tester.run('component-tags-order', rule, {
           message: 'The <script> should be above the <template> on line 2.',
           line: 4
         }
-      ]
+      ],
+      output:
+        '\n' +
+        '        <script></script>\n' +
+        '        <template></template>\n' +
+        '        <docs></docs>\n' +
+        '        <style></style>\n' +
+        '      '
     },
     {
       code: `
@@ -207,7 +261,15 @@ tester.run('component-tags-order', rule, {
           message: 'The <script> should be above the <template> on line 2.',
           line: 5
         }
-      ]
+      ],
+      output:
+        '\n' +
+        '        <script></script>\n' +
+        '        <template></template>\n' +
+        '        <docs>\n' +
+        '        </docs>\n' +
+        '        <style></style>\n' +
+        '      '
     },
     {
       code: `
@@ -220,7 +282,9 @@ tester.run('component-tags-order', rule, {
           message: 'The <template> should be above the <script> on line 2.',
           line: 3
         }
-      ]
+      ],
+      output:
+        '\n        <template></template>\n        <script></script>\n      '
     },
     {
       code: `
@@ -237,7 +301,13 @@ tester.run('component-tags-order', rule, {
           message: 'The <script> should be above the <style> on line 2.',
           line: 4
         }
-      ]
+      ],
+      output:
+        '\n' +
+        '        <template></template>\n' +
+        '        <style></style>\n' +
+        '        <script></script>\n' +
+        '      '
     },
     {
       code: `
@@ -255,7 +325,14 @@ tester.run('component-tags-order', rule, {
           message: 'The <script> should be above the <style> on line 2.',
           line: 5
         }
-      ]
+      ],
+      output:
+        '\n' +
+        '        <template></template>\n' +
+        '        <style></style>\n' +
+        '        <docs></docs>\n' +
+        '        <script></script>\n' +
+        '      '
     },
     // no <template>
     {
@@ -268,7 +345,23 @@ tester.run('component-tags-order', rule, {
           message: 'The <script> should be above the <style> on line 2.',
           line: 3
         }
-      ]
+      ],
+      output: '\n        <script></script>\n        <style></style>\n      '
     }
   ]
 })
+
+describe('suppress reporting with eslint-disable-next-line', () => {
+  it('do not report if <!-- eslint-disable-next-line -->', async () => {
+    const code = `<style></style><template></template>
+    <!-- eslint-disable-next-line vue/component-tags-order -->
+    <script></script>`
+    const [{ messages }] = await eslint.lintText(code, { filePath: 'test.vue' })
+    assert.strictEqual(messages.length, 1)
+    // should not fix <script>
+    assert.strictEqual(
+      messages[0].fix.text,
+      '<template></template><style></style>'
+    )
+  })
+})

From 5f39e4dde4c78a7b6bd109896ae08e5f4fccdcc7 Mon Sep 17 00:00:00 2001
From: lsdsjy <lsdsjy@163.com>
Date: Fri, 4 Mar 2022 11:12:56 +0800
Subject: [PATCH 3/4] use fix:true and output for test case

Apply suggestions from code review

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
---
 tests/lib/rules/component-tags-order.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index 0ef9b6220..e14266bbd 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -26,7 +26,8 @@ const eslint = new ESLint({
     }
   },
   useEslintrc: false,
-  plugins: { vue: require('../../../lib/index') }
+  plugins: { vue: require('../../../lib/index') },
+  fix: true
 })
 
 // ------------------------------------------------------------------------------
@@ -356,12 +357,14 @@ describe('suppress reporting with eslint-disable-next-line', () => {
     const code = `<style></style><template></template>
     <!-- eslint-disable-next-line vue/component-tags-order -->
     <script></script>`
-    const [{ messages }] = await eslint.lintText(code, { filePath: 'test.vue' })
-    assert.strictEqual(messages.length, 1)
+    const [{ messages, output }] = await eslint.lintText(code, { filePath: 'test.vue' })
+    assert.strictEqual(messages.length, 0)
     // should not fix <script>
     assert.strictEqual(
-      messages[0].fix.text,
-      '<template></template><style></style>'
+      output,
+      `<template></template><style></style>
+    <!-- eslint-disable-next-line vue/component-tags-order -->
+    <script></script>`
     )
   })
 })

From 9136100b675bf74cc24b0741cab2a831af0ffdb8 Mon Sep 17 00:00:00 2001
From: lsdsjy <lsdsjy@163.com>
Date: Fri, 4 Mar 2022 15:58:38 +0800
Subject: [PATCH 4/4] fix lint

---
 tests/lib/rules/component-tags-order.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index e14266bbd..1992d6fd2 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -357,7 +357,9 @@ describe('suppress reporting with eslint-disable-next-line', () => {
     const code = `<style></style><template></template>
     <!-- eslint-disable-next-line vue/component-tags-order -->
     <script></script>`
-    const [{ messages, output }] = await eslint.lintText(code, { filePath: 'test.vue' })
+    const [{ messages, output }] = await eslint.lintText(code, {
+      filePath: 'test.vue'
+    })
     assert.strictEqual(messages.length, 0)
     // should not fix <script>
     assert.strictEqual(