feat: add suggestion fixer in no-duplicate-attrs (#307)

Author: yeonjuan

packages/eslint-plugin/lib/rules/no-duplicate-attrs.js

@@ -3,13 +3,16 @@
  * @typedef { import("@html-eslint/types").StyleTag } StyleTag
  * @typedef { import("@html-eslint/types").ScriptTag } ScriptTag
  * @typedef { import("../types").RuleModule<[]> } RuleModule
+ * @typedef { import("@html-eslint/types").Attribute } Attribute
+ * @typedef { import("../types").SuggestionReportDescriptor } SuggestionReportDescriptor
  */
 
 const { RULE_CATEGORY } = require("../constants");
 const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   DUPLICATE_ATTRS: "duplicateAttrs",
+  REMOVE_ATTR: "removeAttr",
 };
 
 /**
@@ -26,14 +29,33 @@ module.exports = {
     },
 
     fixable: null,
+    hasSuggestions: true,
     schema: [],
     messages: {
       [MESSAGE_IDS.DUPLICATE_ATTRS]:
         "The attribute '{{attrName}}' is duplicated.",
+      [MESSAGE_IDS.REMOVE_ATTR]:
+        "Remove this duplicate '{{attrName}}' attribute.",
     },
   },
 
   create(context) {
+    /**
+     * @param {Attribute} node
+     * @returns {SuggestionReportDescriptor[]}
+     */
+    function getSuggestions(node) {
+      return [
+        {
+          messageId: MESSAGE_IDS.REMOVE_ATTR,
+          fix: (fixer) => fixer.removeRange(node.range),
+          data: {
+            attrName: node.key.value,
+          },
+        },
+      ];
+    }
+
     /**
      * @param {Tag | StyleTag | ScriptTag} node
      */
@@ -48,6 +70,7 @@ module.exports = {
                 attrName: attr.key.value,
               },
               messageId: MESSAGE_IDS.DUPLICATE_ATTRS,
+              suggest: getSuggestions(attr),
             });
           } else {
             attrsSet.add(attr.key.value.toLowerCase());

packages/eslint-plugin/tests/rules/no-duplicate-attrs.test.js

@@ -36,6 +36,15 @@ ruleTester.run("no-duplicate-attrs", rule, {
       errors: [
         {
           message: "The attribute 'foo' is duplicated.",
+          suggestions: [
+            {
+              messageId: "removeAttr",
+              data: {
+                attrName: "foo",
+              },
+              output: `<div foo="foo1" > </div>`,
+            },
+          ],
         },
       ],
     },
@@ -44,6 +53,15 @@ ruleTester.run("no-duplicate-attrs", rule, {
       errors: [
         {
           message: "The attribute 'foo' is duplicated.",
+          suggestions: [
+            {
+              messageId: "removeAttr",
+              data: {
+                attrName: "foo",
+              },
+              output: `<div foo > </div>`,
+            },
+          ],
         },
       ],
     },
@@ -63,6 +81,22 @@ ruleTester.run("no-duplicate-attrs", rule, {
       errors: [
         {
           message: "The attribute 'class' is duplicated.",
+          suggestions: [
+            {
+              messageId: "removeAttr",
+              output: `
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+      class="feather feather-home"
+      
+      >
+      <path d="M3 919"></path>
+      <polyline points="9 22"></polyline>
+    </svg>
+          `
+                .split("\n")
+                .join("\r\n"),
+            },
+          ],
         },
       ],
     },
@@ -76,9 +110,31 @@ ruleTester.run("no-duplicate-attrs", rule, {
       errors: [
         {
           message: "The attribute 'ID' is duplicated.",
+          suggestions: [
+            {
+              messageId: "removeAttr",
+              output: `
+<div id="1"
+     
+     Id="1"
+ ></div>
+      `,
+            },
+          ],
         },
         {
           message: "The attribute 'Id' is duplicated.",
+          suggestions: [
+            {
+              messageId: "removeAttr",
+              output: `
+<div id="1"
+     ID="1"
+     
+ ></div>
+      `,
+            },
+          ],
         },
       ],
     },
@@ -103,6 +159,12 @@ templateRuleTester.run("[template] no-duplicate-attrs", rule, {
       errors: [
         {
           message: "The attribute 'foo' is duplicated.",
+          suggestions: [
+            {
+              messageId: "removeAttr",
+              output: `html\`<div foo="\${id1}" > </div>\`;`,
+            },
+          ],
         },
       ],
     },
@@ -111,6 +173,12 @@ templateRuleTester.run("[template] no-duplicate-attrs", rule, {
       errors: [
         {
           message: "The attribute 'foo' is duplicated.",
+          suggestions: [
+            {
+              messageId: "removeAttr",
+              output: `html\`<div foo > </div>\`;`,
+            },
+          ],
         },
       ],
     },