From a9ab7dbec262159dc511a6c65f71490e44a7825b Mon Sep 17 00:00:00 2001
From: YeonJuan <yeonjuan93@naver.com>
Date: Mon, 11 Aug 2025 22:18:38 +0900
Subject: [PATCH 1/4] feat: add pattern support to priority option in
 sort-attrs

---
 docs/rules/sort-attrs.md                      |  32 ++++-
 .../eslint-plugin/lib/rules/sort-attrs.js     |  59 +++++++++-
 .../tests/rules/sort-attrs.test.js            | 111 ++++++++++++++++++
 3 files changed, 194 insertions(+), 8 deletions(-)

diff --git a/docs/rules/sort-attrs.md b/docs/rules/sort-attrs.md
index 29ff4418..f2fb7ced 100644
--- a/docs/rules/sort-attrs.md
+++ b/docs/rules/sort-attrs.md
@@ -31,15 +31,20 @@ Examples of **correct** code for this rule:
 ```ts
 //...
 "@html-eslint/sort-attrs": ["error", {
-  "priority": Array<string>
+  "priority": Array<string | {pattern: string}>
 }]
 ```
 
 #### priority
 
-This option allows you to set an array of attributes keyㄴ.
+This option allows you to set an array of attribute names or pattern objects.
 When `priority` is defined, the specified attributes are sorted to the front with the highest priority.
 
+Priority items can be:
+
+- Strings: exact attribute name matches
+- Objects with `pattern` property: regular expression patterns to match attribute names
+
 The default value of `priority` is `["id", "type", "class", "style"]`.
 
 Examples of **incorrect** code for this rule with the default options (`{ "priority": ["id", "type", "class", "style"] }`).
@@ -71,3 +76,26 @@ Examples of **correct** code for this rule with the `{ "priority": ["id", "style
 ```html,correct
 <div id="foo" style="color:red" onclick="foo"></div>
 ```
+
+##### Pattern Support
+
+You can use regular expressions in priority items using the pattern object format:
+
+Examples of **correct** code for this rule with the `{ "priority": ["id", { "pattern": "data-.*" }, "style"] }` option:
+
+```html,correct
+<div id="foo" data-test="value" data-custom="attr" style="color:red" onclick="foo"></div>
+```
+
+In this example:
+
+- `id` has the highest priority (position 0)
+- Any attribute matching `data-.*` pattern has the second priority (position 1)
+- `style` has the third priority (position 2)
+- All other attributes are sorted alphabetically after the priority items
+
+Examples of **incorrect** code for this rule with the `{ "priority": ["id", { "pattern": "data-.*" }, "style"] }` option:
+
+```html,incorrect
+<div style="color:red" data-test="value" id="foo" onclick="foo"></div>
+```
diff --git a/packages/eslint-plugin/lib/rules/sort-attrs.js b/packages/eslint-plugin/lib/rules/sort-attrs.js
index dde86b4b..01d08c2f 100644
--- a/packages/eslint-plugin/lib/rules/sort-attrs.js
+++ b/packages/eslint-plugin/lib/rules/sort-attrs.js
@@ -3,7 +3,7 @@
  * @import {RuleFixer, RuleModule} from "../types";
  *
  * @typedef {Object} Option
- * @property {string[]} [Option.priority]
+ * @property {Array<string | {pattern: string}>} [Option.priority]
  */
 
 const { hasTemplate } = require("./utils/node");
@@ -37,9 +37,23 @@ module.exports = {
           priority: {
             type: "array",
             items: {
-              type: "string",
-              uniqueItems: true,
+              oneOf: [
+                {
+                  type: "string",
+                },
+                {
+                  type: "object",
+                  properties: {
+                    pattern: {
+                      type: "string",
+                    },
+                  },
+                  required: ["pattern"],
+                  additionalProperties: false,
+                },
+              ],
             },
+            uniqueItems: true,
           },
         },
         additionalProperties: false,
@@ -55,10 +69,43 @@ module.exports = {
       priority: ["id", "type", "class", "style"],
     };
     /**
-     * @type {string[]}
+     * @type {Array<string | {pattern: string}>}
      */
     const priority = option.priority || [];
 
+    /**
+     * @param {string} attrName
+     * @param {string | {pattern: string}} priorityItem
+     * @returns {boolean}
+     */
+    function matchesPriority(attrName, priorityItem) {
+      if (typeof priorityItem === "string") {
+        return attrName === priorityItem;
+      }
+      if (
+        priorityItem &&
+        typeof priorityItem === "object" &&
+        priorityItem.pattern
+      ) {
+        const regex = new RegExp(priorityItem.pattern, "u");
+        return regex.test(attrName);
+      }
+      return false;
+    }
+
+    /**
+     * @param {string} attrName
+     * @returns {number}
+     */
+    function getPriorityIndex(attrName) {
+      for (let i = 0; i < priority.length; i++) {
+        if (matchesPriority(attrName, priority[i])) {
+          return i;
+        }
+      }
+      return -1;
+    }
+
     /**
      * @param {Attribute} attrA
      * @param {Attribute} attrB
@@ -68,8 +115,8 @@ module.exports = {
       const keyA = attrA.key.value;
       const keyB = attrB.key.value;
 
-      const keyAReservedValue = priority.indexOf(keyA);
-      const keyBReservedValue = priority.indexOf(keyB);
+      const keyAReservedValue = getPriorityIndex(keyA);
+      const keyBReservedValue = getPriorityIndex(keyB);
       if (keyAReservedValue >= 0 && keyBReservedValue >= 0) {
         return keyAReservedValue - keyBReservedValue;
       } else if (keyAReservedValue >= 0) {
diff --git a/packages/eslint-plugin/tests/rules/sort-attrs.test.js b/packages/eslint-plugin/tests/rules/sort-attrs.test.js
index 7e722109..9c5ddfd1 100644
--- a/packages/eslint-plugin/tests/rules/sort-attrs.test.js
+++ b/packages/eslint-plugin/tests/rules/sort-attrs.test.js
@@ -40,6 +40,31 @@ ruleTester.run("sort-attrs", rule, {
         },
       },
     },
+    // Pattern tests
+    {
+      code: '<div id="foo" data-test="value" data-custom="attr" style="color:red" onclick="foo"></div>',
+      options: [
+        {
+          priority: ["id", { pattern: "data-.*" }, "style"],
+        },
+      ],
+    },
+    {
+      code: '<input id="foo" aria-label="test" aria-describedby="desc" type="text" value="test" />',
+      options: [
+        {
+          priority: ["id", { pattern: "aria-.*" }, "type"],
+        },
+      ],
+    },
+    {
+      code: '<button id="btn" ng-click="handler" ng-if="visible" class="button" type="submit"></button>',
+      options: [
+        {
+          priority: ["id", { pattern: "ng-.*" }, "class", "type"],
+        },
+      ],
+    },
     {
       code: `
 <button id="nice"
@@ -272,6 +297,73 @@ ruleTester.run("sort-attrs", rule, {
         },
       ],
     },
+    // Pattern invalid tests
+    {
+      code: '<div style="color:red" data-test="value" id="foo" onclick="foo"></div>',
+      output:
+        '<div id="foo" data-test="value" style="color:red" onclick="foo"></div>',
+      options: [
+        {
+          priority: ["id", { pattern: "data-.*" }, "style"],
+        },
+      ],
+      errors: [{ messageId: "unsorted" }],
+    },
+    {
+      code: '<div data-custom="attr" data-test="value" id="foo" style="color:red" onclick="foo"></div>',
+      output:
+        '<div id="foo" data-custom="attr" data-test="value" style="color:red" onclick="foo"></div>',
+      options: [
+        {
+          priority: ["id", { pattern: "data-.*" }, "style"],
+        },
+      ],
+      errors: [{ messageId: "unsorted" }],
+    },
+    {
+      code: '<input type="text" aria-describedby="desc" id="foo" aria-label="test" value="test" />',
+      output:
+        '<input id="foo" aria-describedby="desc" aria-label="test" type="text" value="test" />',
+      options: [
+        {
+          priority: ["id", { pattern: "aria-.*" }, "type"],
+        },
+      ],
+      errors: [{ messageId: "unsorted" }],
+    },
+    {
+      code: '<button class="button" ng-if="visible" id="btn" ng-click="handler" type="submit"></button>',
+      output:
+        '<button id="btn" ng-if="visible" ng-click="handler" class="button" type="submit"></button>',
+      options: [
+        {
+          priority: ["id", { pattern: "ng-.*" }, "class", "type"],
+        },
+      ],
+      errors: [{ messageId: "unsorted" }],
+    },
+    {
+      code: '<div v-model="data" v-if="show" id="container" v-on:click="handler" class="wrapper"></div>',
+      output:
+        '<div id="container" v-model="data" v-if="show" v-on:click="handler" class="wrapper"></div>',
+      options: [
+        {
+          priority: ["id", { pattern: "v-.*" }],
+        },
+      ],
+      errors: [{ messageId: "unsorted" }],
+    },
+    {
+      code: '<div data-value="2" custom="test" data-id="1" id="foo" data-name="bar"></div>',
+      output:
+        '<div id="foo" data-value="2" data-id="1" data-name="bar" custom="test"></div>',
+      options: [
+        {
+          priority: ["id", { pattern: "data-.*" }],
+        },
+      ],
+      errors: [{ messageId: "unsorted" }],
+    },
   ],
 });
 
@@ -280,6 +372,14 @@ templateRuleTester.run("[template] sort-attrs", rule, {
     {
       code: 'html`<input id="foo" type="checkbox" autocomplete="bar" checked />`',
     },
+    {
+      code: 'html`<div id="foo" data-test="value" data-custom="attr" style="color:red" onclick="foo"></div>`',
+      options: [
+        {
+          priority: ["id", { pattern: "data-.*" }, "style"],
+        },
+      ],
+    },
   ],
   invalid: [
     {
@@ -346,5 +446,16 @@ templateRuleTester.run("[template] sort-attrs", rule, {
         },
       ],
     },
+    {
+      code: 'html`<div style="color:red" data-test="value" id="foo" onclick="foo"></div>`',
+      output:
+        'html`<div id="foo" data-test="value" style="color:red" onclick="foo"></div>`',
+      options: [
+        {
+          priority: ["id", { pattern: "data-.*" }, "style"],
+        },
+      ],
+      errors: [{ messageId: "unsorted" }],
+    },
   ],
 });

From 6de614acd08d66b4c0d9711f03fc51098f9f0acf Mon Sep 17 00:00:00 2001
From: YeonJuan <yeonjuan93@naver.com>
Date: Mon, 11 Aug 2025 22:25:08 +0900
Subject: [PATCH 2/4] Update sort-attrs.test.js

---
 .../tests/rules/sort-attrs.test.js            | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/packages/eslint-plugin/tests/rules/sort-attrs.test.js b/packages/eslint-plugin/tests/rules/sort-attrs.test.js
index 9c5ddfd1..f7f8c5e7 100644
--- a/packages/eslint-plugin/tests/rules/sort-attrs.test.js
+++ b/packages/eslint-plugin/tests/rules/sort-attrs.test.js
@@ -65,6 +65,19 @@ ruleTester.run("sort-attrs", rule, {
         },
       ],
     },
+    {
+      code: '<div id="foo" data-test="value" data-custom="attr" aria-label="test" aria-describedby="desc" class="button" onclick="foo"></div>',
+      options: [
+        {
+          priority: [
+            "id",
+            { pattern: "data-.*" },
+            { pattern: "aria-.*" },
+            "class",
+          ],
+        },
+      ],
+    },
     {
       code: `
 <button id="nice"
@@ -364,6 +377,40 @@ ruleTester.run("sort-attrs", rule, {
       ],
       errors: [{ messageId: "unsorted" }],
     },
+    // Multiple patterns invalid tests
+    {
+      code: '<div aria-label="test" data-custom="attr" id="foo" ng-click="handler" class="button" data-test="value" aria-describedby="desc" onclick="foo"></div>',
+      output:
+        '<div id="foo" data-custom="attr" data-test="value" aria-label="test" aria-describedby="desc" class="button" ng-click="handler" onclick="foo"></div>',
+      options: [
+        {
+          priority: [
+            "id",
+            { pattern: "data-.*" },
+            { pattern: "aria-.*" },
+            "class",
+          ],
+        },
+      ],
+      errors: [{ messageId: "unsorted" }],
+    },
+    {
+      code: '<input v-model="value" type="text" data-id="123" aria-required="true" id="input" v-if="show" aria-label="Input" data-name="test"></input>',
+      output:
+        '<input id="input" data-id="123" data-name="test" aria-required="true" aria-label="Input" v-model="value" v-if="show" type="text"></input>',
+      options: [
+        {
+          priority: [
+            "id",
+            { pattern: "data-.*" },
+            { pattern: "aria-.*" },
+            { pattern: "v-.*" },
+            "type",
+          ],
+        },
+      ],
+      errors: [{ messageId: "unsorted" }],
+    },
   ],
 });
 
@@ -380,6 +427,19 @@ templateRuleTester.run("[template] sort-attrs", rule, {
         },
       ],
     },
+    {
+      code: 'html`<div id="foo" data-test="value" data-custom="attr" aria-label="test" aria-describedby="desc" class="button" onclick="foo"></div>`',
+      options: [
+        {
+          priority: [
+            "id",
+            { pattern: "data-.*" },
+            { pattern: "aria-.*" },
+            "class",
+          ],
+        },
+      ],
+    },
   ],
   invalid: [
     {

From 18d4607154064f9338eb4d5ce36fdf5f9f6ded73 Mon Sep 17 00:00:00 2001
From: YeonJuan <yeonjuan93@naver.com>
Date: Mon, 11 Aug 2025 22:25:48 +0900
Subject: [PATCH 3/4] Update .cspell.json

---
 .cspell.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.cspell.json b/.cspell.json
index 9c0cf4a5..692148eb 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -62,6 +62,7 @@
     "cout",
     "nodownload",
     "nofullscreen",
-    "controlslist"
+    "controlslist",
+    "describedby"
   ]
 }

From 00061fb672695c9fb33cb4739716da535b0672d2 Mon Sep 17 00:00:00 2001
From: YeonJuan <yeonjuan93@naver.com>
Date: Mon, 11 Aug 2025 22:44:19 +0900
Subject: [PATCH 4/4] Update sort-attrs.js

---
 .../eslint-plugin/lib/rules/sort-attrs.js     | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/eslint-plugin/lib/rules/sort-attrs.js b/packages/eslint-plugin/lib/rules/sort-attrs.js
index 01d08c2f..ca3edb9b 100644
--- a/packages/eslint-plugin/lib/rules/sort-attrs.js
+++ b/packages/eslint-plugin/lib/rules/sort-attrs.js
@@ -69,13 +69,21 @@ module.exports = {
       priority: ["id", "type", "class", "style"],
     };
     /**
-     * @type {Array<string | {pattern: string}>}
+     * @type {Array<string | {pattern: string, regex: RegExp}>}
      */
-    const priority = option.priority || [];
+    const priority = (option.priority || []).map((item) => {
+      if (item && typeof item === "object" && "pattern" in item) {
+        return {
+          ...item,
+          regex: new RegExp(item.pattern, "u"),
+        };
+      }
+      return item;
+    });
 
     /**
      * @param {string} attrName
-     * @param {string | {pattern: string}} priorityItem
+     * @param {string | {pattern: string, regex: RegExp}} priorityItem
      * @returns {boolean}
      */
     function matchesPriority(attrName, priorityItem) {
@@ -85,10 +93,9 @@ module.exports = {
       if (
         priorityItem &&
         typeof priorityItem === "object" &&
-        priorityItem.pattern
+        priorityItem.regex
       ) {
-        const regex = new RegExp(priorityItem.pattern, "u");
-        return regex.test(attrName);
+        return priorityItem.regex.test(attrName);
       }
       return false;
     }