} */
+ const groupMap = new Map();
+
+ for (let i = 0; i < attributes.length; i++) {
+ const attr = attributes[i];
+ const attrName = attr.key.value;
+ const groupIndex = findAttributeGroup(attrName, groups);
+
+ if (groupIndex !== -1) {
+ if (!groupMap.has(groupIndex)) {
+ groupMap.set(groupIndex, []);
+ }
+ const groupList = groupMap.get(groupIndex);
+ if (groupList) {
+ groupList.push({
+ attrName,
+ index: i,
+ groupIndex
+ });
+ }
+ }
+ }
+
+ // Check each group for violations
+ for (const [groupIndex, attrInfos] of groupMap) {
+ if (attrInfos.length <= 1) {
+ continue;
+ }
+
+ const group = groups[groupIndex];
+ const indices = attrInfos.map(info => info.index);
+ const foundAttrs = attrInfos.map(info => info.attrName);
+
+ const firstIndex = Math.min(...indices);
+ const lastIndex = Math.max(...indices);
+
+ // Check if indices are consecutive
+ const sortedIndices = [...indices].sort((a, b) => a - b);
+ const isConsecutive = sortedIndices.every(
+ (index, i) => i === 0 || index === sortedIndices[i - 1] + 1
+ );
+
+ if (!isConsecutive) {
+ // Grouping violation: attributes are not together
+ const separatorAttrs = [];
+ for (let i = firstIndex + 1; i < lastIndex; i++) {
+ if (!indices.includes(i)) {
+ separatorAttrs.push(attributes[i].key.value);
+ }
+ }
+
+ context.report({
+ loc: {
+ start: attributes[firstIndex].loc.start,
+ end: attributes[lastIndex].loc.end,
+ },
+ messageId: MESSAGE_IDS.NOT_GROUPED,
+ data: {
+ attrs: foundAttrs.join(", "),
+ separator: separatorAttrs.join(", "),
+ },
+ fix(fixer) {
+ return fixAttributeOrder(
+ fixer,
+ attributes,
+ indices,
+ group,
+ foundAttrs
+ );
+ },
+ });
+ return; // Only report one violation at a time
+ } else {
+ // Check ordering violation: attributes are together but in wrong order
+ const isRegexGroup = group.length === 1 &&
+ typeof group[0] === "string" &&
+ group[0].startsWith("/") &&
+ group[0].endsWith("/");
+
+ let isCorrectOrder;
+ /** @type {string[]} */
+ let expectedOrder;
+
+ if (isRegexGroup) {
+ // For regex groups, sort alphabetically
+ expectedOrder = [...foundAttrs].sort();
+ isCorrectOrder = foundAttrs.every((attr, i) => attr === expectedOrder[i]);
+ } else {
+ // For string groups, follow the defined order
+ expectedOrder = group.filter((pattern) => {
+ return foundAttrs.some(attr => matchesPattern(attr, pattern));
+ });
+
+ // Create a mapping of expected positions
+ const expectedPositions = new Map();
+ let position = 0;
+ for (const pattern of expectedOrder) {
+ for (const attr of foundAttrs) {
+ if (matchesPattern(attr, pattern) && !expectedPositions.has(attr)) {
+ expectedPositions.set(attr, position++);
+ }
+ }
+ }
+
+ isCorrectOrder = foundAttrs.every(
+ (attr, i) => {
+ const expectedPos = expectedPositions.get(attr);
+ return expectedPos === i;
+ }
+ );
+ }
+
+ if (!isCorrectOrder) {
+ context.report({
+ loc: {
+ start: attributes[firstIndex].loc.start,
+ end: attributes[lastIndex].loc.end,
+ },
+ messageId: MESSAGE_IDS.WRONG_ORDER,
+ data: {
+ attrs: foundAttrs.join(", "),
+ expectedOrder: isRegexGroup ? expectedOrder.join(", ") : foundAttrs.sort((a, b) => {
+ const aIndex = expectedOrder.findIndex(pattern => matchesPattern(a, pattern));
+ const bIndex = expectedOrder.findIndex(pattern => matchesPattern(b, pattern));
+ return aIndex - bIndex;
+ }).join(", "),
+ },
+ fix(fixer) {
+ return fixAttributeOrder(
+ fixer,
+ attributes,
+ indices,
+ group,
+ foundAttrs
+ );
+ },
+ });
+ return; // Only report one violation at a time
+ }
+ }
+ }
+ }
+
+ /**
+ * Fix attribute order by grouping and sorting them correctly
+ * @param {*} fixer
+ * @param {Attribute[]} attributes
+ * @param {number[]} indices
+ * @param {string[]} group
+ * @param {string[]} foundAttrs
+ */
+ function fixAttributeOrder(fixer, attributes, indices, group, foundAttrs) {
+ const sourceCode = getSourceCode(context);
+ const source = sourceCode.getText();
+
+ // Get the attributes that need to be reordered
+ const attrsToReorder = indices.map((i) => attributes[i]);
+
+ // Sort them according to the group order
+ const isRegexGroup = group.length === 1 &&
+ typeof group[0] === "string" &&
+ group[0].startsWith("/") &&
+ group[0].endsWith("/");
+
+ if (isRegexGroup) {
+ // For regex groups, sort alphabetically
+ attrsToReorder.sort((a, b) => a.key.value.localeCompare(b.key.value));
+ } else {
+ // For string groups, follow the defined order
+ const expectedOrder = group.filter((pattern) => {
+ return foundAttrs.some(attr => matchesPattern(attr, pattern));
+ });
+ attrsToReorder.sort((a, b) => {
+ const aIndex = expectedOrder.findIndex(pattern => matchesPattern(a.key.value, pattern));
+ const bIndex = expectedOrder.findIndex(pattern => matchesPattern(b.key.value, pattern));
+ return aIndex - bIndex;
+ });
+ }
+
+ // Create a fixed version of all attributes by building the new arrangement
+ const fixed = [];
+ let groupInserted = false;
+ const targetInsertIndex = Math.min(...indices); // Insert grouped attrs at position of first occurrence
+
+ for (let i = 0; i < attributes.length; i++) {
+ if (i === targetInsertIndex && !groupInserted) {
+ // Insert the grouped/reordered attributes at the position of first occurrence
+ fixed.push(...attrsToReorder);
+ groupInserted = true;
+ } else if (!indices.includes(i)) {
+ // Only add non-grouped attributes
+ fixed.push(attributes[i]);
+ }
+ // Skip attributes that are part of the group (they're already inserted above)
+ }
+
+ // Build the replacement text
+ let result = "";
+ for (let i = 0; i < fixed.length; i++) {
+ const attr = fixed[i];
+ result += source.slice(attr.range[0], attr.range[1]);
+
+ // Add spacing between attributes
+ if (i < fixed.length - 1) {
+ result += " ";
+ }
+ }
+
+ return fixer.replaceTextRange(
+ [attributes[0].range[0], attributes[attributes.length - 1].range[1]],
+ result
+ );
+ }
+
+ return createVisitors(context, {
+ Tag(node) {
+ checkAttributes(node.attributes);
+ },
+ ScriptTag(node) {
+ checkAttributes(node.attributes);
+ },
+ StyleTag(node) {
+ checkAttributes(node.attributes);
+ },
+ });
+ },
+};
diff --git a/packages/eslint-plugin/lib/rules/index.js b/packages/eslint-plugin/lib/rules/index.js
index 1a3113c0..9d8929a6 100644
--- a/packages/eslint-plugin/lib/rules/index.js
+++ b/packages/eslint-plugin/lib/rules/index.js
@@ -51,6 +51,7 @@ const noDuplicateClass = require("./no-duplicate-class");
const noEmptyHeadings = require("./no-empty-headings");
const noInvalidEntity = require("./no-invalid-entity");
const noDuplicateInHead = require("./no-duplicate-in-head");
+const groupAttrs = require("./group-attrs");
// import new rule here ↑
// DO NOT REMOVE THIS COMMENT
@@ -108,6 +109,7 @@ const rules = {
"no-empty-headings": noEmptyHeadings,
"no-invalid-entity": noInvalidEntity,
"no-duplicate-in-head": noDuplicateInHead,
+ "group-attrs": groupAttrs,
// export new rule here ↑
// DO NOT REMOVE THIS COMMENT
};
diff --git a/packages/eslint-plugin/tests/rules/group-attrs.test.js b/packages/eslint-plugin/tests/rules/group-attrs.test.js
new file mode 100644
index 00000000..64cfb0ab
--- /dev/null
+++ b/packages/eslint-plugin/tests/rules/group-attrs.test.js
@@ -0,0 +1,440 @@
+const createRuleTester = require("../rule-tester");
+const rule = require("../../lib/rules/group-attrs");
+
+const ruleTester = createRuleTester();
+const templateRuleTester = createRuleTester("espree");
+
+ruleTester.run("group-attrs", rule, {
+ valid: [
+ // Basic valid cases
+ {
+ code: '',
+ },
+ {
+ code: '',
+ },
+ {
+ code: '
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Examples of **correct** code for this rule:
+
+```html
+
+
+
+
+