fix: ignore attribute key with templates (#393)

* fix: ignore attribute key with templates

* Update no-duplicate-attrs.test.js

* Update no-duplicate-attrs.js

Author: yeonjuan

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

@@ -6,6 +6,7 @@
 const { RULE_CATEGORY } = require("../constants");
 const { createVisitors } = require("./utils/visitors");
 const { getRuleUrl } = require("./utils/rule");
+const { hasTemplate } = require("./utils/node");
 
 const MESSAGE_IDS = {
   DUPLICATE_ATTRS: "duplicateAttrs",
@@ -61,7 +62,10 @@ module.exports = {
       if (Array.isArray(node.attributes)) {
         const attrsSet = new Set();
         node.attributes.forEach((attr) => {
-          if (attr.key && attrsSet.has(attr.key.value.toLowerCase())) {
+          if (hasTemplate(attr.key)) {
+            return;
+          }
+          if (attrsSet.has(attr.key.value.toLowerCase())) {
             context.report({
               node: attr,
               data: {

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

@@ -29,6 +29,21 @@ ruleTester.run("no-duplicate-attrs", rule, {
         .split("\n")
         .join("\r\n"),
     },
+    {
+      code: `
+      <input
+    {{#aria_label}}aria-label="{{aria_label}}"{{/aria_label}}
+    {{^aria_label}}aria-labelledby="pl-big-o-input-{{uuid}}-label"{{/aria_label}}
+/>
+      `,
+      languageOptions: {
+        parserOptions: {
+          templateEngineSyntax: {
+            "{{": "}}",
+          },
+        },
+      },
+    },
   ],
   invalid: [
     {
@@ -138,6 +153,30 @@ ruleTester.run("no-duplicate-attrs", rule, {
         },
       ],
     },
+    {
+      code: `<div foo foo {{aa}} {{aa}}> </div>`,
+      languageOptions: {
+        parserOptions: {
+          templateEngineSyntax: {
+            "{{": "}}",
+          },
+        },
+      },
+      errors: [
+        {
+          message: "The attribute 'foo' is duplicated.",
+          suggestions: [
+            {
+              messageId: "removeAttr",
+              data: {
+                attrName: "foo",
+              },
+              output: `<div foo  {{aa}} {{aa}}> </div>`,
+            },
+          ],
+        },
+      ],
+    },
   ],
 });