fix: handle template expression in quotes (#336)

* fix: handle template expression in quotes

* add comments

Author: yeonjuan

packages/eslint-plugin/lib/rules/quotes.js

@@ -9,6 +9,7 @@
  * @typedef { import("../types").RuleModule<[Option]> } RuleModule
  */
 
+const { NodeTypes } = require("es-html-parser");
 const { RULE_CATEGORY } = require("../constants");
 const { getSourceCode } = require("./utils/source-code");
 const { createVisitors } = require("./utils/visitors");
@@ -87,6 +88,13 @@ module.exports = {
       if (!attr.value || attr.value.value.includes(expectedQuote)) {
         return;
       }
+      /**
+       * Allow template expression.
+       * ex: html`<div foo=${foo}></div>`
+       */
+      if (attr.value.parts.some((part) => part.type === NodeTypes.Template)) {
+        return;
+      }
 
       if (attr.startWrapper && attr.endWrapper) {
         const [opening, closing] = getQuotes(attr);

packages/eslint-plugin/tests/rules/quotes.test.js

@@ -54,6 +54,16 @@ foo">
       code: `<img src='?size=50&amp;default=retro'>`,
       options: ["single"],
     },
+    {
+      code: `<img src={{foo}}>`,
+      languageOptions: {
+        parserOptions: {
+          templateEngineSyntax: {
+            "{{": "}}",
+          },
+        },
+      },
+    },
   ],
   invalid: [
     {
@@ -158,6 +168,11 @@ templateRuleTester.run("[template] quotes", rule, {
     {
       code: `html\`<div id = "\${foo}">\``,
     },
+    {
+      code: `
+const handler = () => {};
+html\`<div onclick=\${handler}></div>\``,
+    },
   ],
   invalid: [
     {