Change vue/component-tags-order rule to allow name array to be specified with one order option

docs/rules/comment-directive.md

@@ -49,8 +49,8 @@ The `eslint-disable`-like comments can be used in the `<template>` and in the bl
 </template>
 
 <!-- eslint-disable-next-line vue/component-tags-order -->
-<script>
-</script>
+<style>
+</style>
 ```
 
 </eslint-code-block>
@@ -60,15 +60,16 @@ The `eslint-disable` comments has no effect after one block.
 <eslint-code-block :rules="{'vue/comment-directive': ['error'], 'vue/max-attributes-per-line': ['error'], 'vue/component-tags-order': ['error'] }">
 
 ```vue
-<template>
-</template>
-
-<!-- eslint-disable vue/component-tags-order -->
-<style> /* <- Warning has been disabled. */
+<style>
 </style>
 
-<script> /* <- Warning are not disabled. */
+<!-- eslint-disable -->
+<script> /* <- Warning has been disabled. */
 </script>
+
+<template> <!-- <- Warning are not disabled. -->
+</template>
+
 ```
 
 </eslint-code-block>

docs/rules/component-tags-order.md

@@ -18,14 +18,14 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 ```json
 {
   "vue/component-tags-order": ["error", {
-    "order": ["script", "template", "style"]
+    "order": [ [ "script", "template" ], "style" ]
   }]
 }
 ```
 
-- `order` (`string[]`) ... The order of top-level element names. default `["script", "template", "style"]`.
+- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "template" ], "style" ]`.
 
-### `{ "order": ["script", "template", "style"] }` (default)
+### `{ "order": [ [ "script", "template" ], "style" ] }` (default)
 
 <eslint-code-block :rules="{'vue/component-tags-order': ['error']}">
 
@@ -40,6 +40,17 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 <eslint-code-block :rules="{'vue/component-tags-order': ['error']}">
 
+```vue
+<!-- ✓ GOOD -->
+<template>...</template>
+<script>/* ... */</script>
+<style>/* ... */</style>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/component-tags-order': ['error']}">
+
 ```vue
 <!-- ✗ BAD -->
 <style>/* ... */</style>
@@ -62,6 +73,17 @@ 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'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<script>/* ... */</script>
+<template>...</template>
+<style>/* ... */</style>
+```
+
+</eslint-code-block>
+
 ### `{ "order": ["docs", "template", "script", "style"] }`
 
 <eslint-code-block :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">

lib/rules/component-tags-order.js

@@ -10,7 +10,7 @@
 
 const utils = require('../utils')
 
-const DEFAULT_ORDER = Object.freeze(['script', 'template', 'style'])
+const DEFAULT_ORDER = Object.freeze([['script', 'template'], 'style'])
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -25,22 +25,44 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/component-tags-order.html'
     },
     fixable: null,
-    schema: {
-      type: 'array',
-      properties: {
-        order: {
-          type: 'array'
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          order: {
+            type: 'array',
+            items: {
+              anyOf: [
+                { type: 'string' },
+                { type: 'array', items: { type: 'string' }, uniqueItems: true }
+              ]
+            },
+            uniqueItems: true,
+            additionalItems: false
+          }
         }
       }
-    },
+    ],
     messages: {
       unexpected:
         'The <{{name}}> should be above the <{{firstUnorderedName}}> on line {{line}}.'
     }
   },
   create(context) {
-    const order =
-      (context.options[0] && context.options[0].order) || DEFAULT_ORDER
+    /** @type {Map<string, number} */
+    const orderMap = new Map()
+    ;(
+      (context.options[0] && context.options[0].order) ||
+      DEFAULT_ORDER
+    ).forEach((nameOrNames, index) => {
+      if (Array.isArray(nameOrNames)) {
+        for (const name of nameOrNames) {
+          orderMap.set(name, index)
+        }
+      } else {
+        orderMap.set(nameOrNames, index)
+      }
+    })
     const documentFragment =
       context.parserServices.getDocumentFragment &&
       context.parserServices.getDocumentFragment()
@@ -76,15 +98,15 @@ module.exports = {
           const elements = getTopLevelHTMLElements()
 
           elements.forEach((element, index) => {
-            const expectedIndex = order.indexOf(element.name)
+            const expectedIndex = orderMap.get(element.name)
             if (expectedIndex < 0) {
               return
             }
             const firstUnordered = elements
               .slice(0, index)
-              .filter((e) => expectedIndex < order.indexOf(e.name))
+              .filter((e) => expectedIndex < orderMap.get(e.name))
               .sort(
-                (e1, e2) => order.indexOf(e1.name) - order.indexOf(e2.name)
+                (e1, e2) => orderMap.get(e1.name) - orderMap.get(e2.name)
               )[0]
             if (firstUnordered) {
               report(element, firstUnordered)

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

@@ -22,10 +22,24 @@ tester.run('component-tags-order', rule, {
   valid: [
     // default
     '<script></script><template></template><style></style>',
+    '<template></template><script></script><style></style>',
     '<script> /*script*/ </script><template><div id="id">text <!--comment--> </div><br></template><style>.button{ color: red; }</style>',
     '<docs></docs><script></script><template></template><style></style>',
     '<script></script><docs></docs><template></template><style></style>',
+    '<docs></docs><template></template><script></script><style></style>',
+    '<template></template><script></script><docs></docs><style></style>',
     '<script></script><template></template>',
+    '<template></template><script></script>',
+    `
+      <template>
+      </template>
+
+      <script>
+      </script>
+
+      <style>
+      </style>
+    `,
     `
       <script>
       </script>
@@ -38,6 +52,11 @@ tester.run('component-tags-order', rule, {
     `,
 
     // order
+    {
+      code: '<script></script><template></template><style></style>',
+      output: null,
+      options: [{ order: ['script', 'template', 'style'] }]
+    },
     {
       code: '<template></template><script></script><style></style>',
       output: null,
@@ -65,6 +84,12 @@ tester.run('component-tags-order', rule, {
       output: null,
       options: [{ order: ['docs', 'script', 'template', 'style'] }]
     },
+    {
+      code:
+        '<template></template><docs></docs><script></script><style></style>',
+      output: null,
+      options: [{ order: [['docs', 'script', 'template'], 'style'] }]
+    },
 
     `<script></script><style></style>`,
 
@@ -73,8 +98,24 @@ tester.run('component-tags-order', rule, {
     '<template><div><!--test</div></template><style></style>'
   ],
   invalid: [
+    {
+      code: '<style></style><template></template><script></script>',
+      errors: [
+        {
+          message: 'The <template> should be above the <style> on line 1.',
+          line: 1,
+          column: 16
+        },
+        {
+          message: 'The <script> should be above the <style> on line 1.',
+          line: 1,
+          column: 37
+        }
+      ]
+    },
     {
       code: '<template></template><script></script><style></style>',
+      options: [{ order: ['script', 'template', 'style'] }],
       errors: [
         {
           message: 'The <script> should be above the <template> on line 1.',
@@ -83,12 +124,27 @@ tester.run('component-tags-order', rule, {
         }
       ]
     },
+    {
+      code: `
+        <template></template>
+
+        <style></style>
+
+        <script></script>`,
+      errors: [
+        {
+          message: 'The <script> should be above the <style> on line 4.',
+          line: 6
+        }
+      ]
+    },
     {
       code: `
         <template></template>
         <script></script>
         <style></style>
       `,
+      options: [{ order: ['script', 'template', 'style'] }],
       errors: [
         {
           message: 'The <script> should be above the <template> on line 2.',
@@ -132,6 +188,7 @@ tester.run('component-tags-order', rule, {
         <script></script>
         <style></style>
       `,
+      options: [{ order: ['script', 'template', 'style'] }],
       errors: [
         {
           message: 'The <script> should be above the <template> on line 2.',
@@ -147,6 +204,7 @@ tester.run('component-tags-order', rule, {
         <script></script>
         <style></style>
       `,
+      options: [{ order: ['script', 'template', 'style'] }],
       errors: [
         {
           message: 'The <script> should be above the <template> on line 2.',
@@ -179,7 +237,7 @@ tester.run('component-tags-order', rule, {
           line: 3
         },
         {
-          message: 'The <script> should be above the <template> on line 3.',
+          message: 'The <script> should be above the <style> on line 2.',
           line: 4
         }
       ]
@@ -197,7 +255,7 @@ tester.run('component-tags-order', rule, {
           line: 4
         },
         {
-          message: 'The <script> should be above the <template> on line 4.',
+          message: 'The <script> should be above the <style> on line 2.',
           line: 5
         }
       ]