feat: add enforceTemplatedAttrValue option on quotes (#387)

* feat: add enforceTemplatedAttrValue on quotes

* Update quotes.md

* Update quotes.test.js

Author: yeonjuan

docs/rules/quotes.md

@@ -1,6 +1,6 @@
 # quotes
 
-This rule enforces enforces consistent use of quotes for attribute values (`'` or `"`).
+This rule enforces consistent use of quotes for attribute values (`'` or `"`).
 
 ## How to use
 
@@ -16,10 +16,14 @@ module.exports = {
 
 ### Options
 
-This rule has two options
+This rule accepts the following options
 
-- `"double"` (default): Requires the use of double quotes(`"`).
-- `"single"`: Requires the use of single quotes(`'`)
+1. Quote style (string):
+   - "double" (default): Enforces the use of double quotes (`"`).
+   - "single": Enforces the use of single quotes (`'`).
+2. `enforceTemplatedAttrValue` (boolean):
+   - false (default): Does not enforce quote style inside template expressions.
+   - true: Enforces quote style inside templated attribute values.
 
 #### "double"
 
@@ -30,13 +34,34 @@ Examples of **incorrect** code for this rule with the default `"double"` option:
 <div id='foo'></div>
 ```
 
+<!-- prettier-ignore-end -->
+
 Examples of **correct** code for this rule with the default `"double"` option:
 
 ```html,correct
 <div id="foo"></div>
 <div id='containing "double" quotes'></div>
 ```
 
+Examples of **incorrect** code for this rule with the `"double"` and `enforceTemplatedAttrValue: true`:
+
+<!-- prettier-ignore -->
+```js,incorrect
+html`<div id=${value}></div>`;
+html`<div id='${value}'></div>`;
+```
+
+<!-- prettier-ignore-end -->
+
+Examples of **correct** code for this rule with the `"double"` and `enforceTemplatedAttrValue: true`:
+
+<!-- prettier-ignore -->
+```js,correct
+html`<div id="${value}"></div>`;
+```
+
+<!-- prettier-ignore-end -->
+
 #### "single"
 
 Examples of **incorrect** code for this rule with the `"single"` option:
@@ -53,6 +78,27 @@ Examples of **correct** code for this rule with the default `"single"` option:
 <div id="containing 'single' quotes"></div>
 ```
 
+<!-- prettier-ignore-end -->
+
+Examples of **incorrect** code for this rule with the `"single"` and `enforceTemplatedAttrValue: true`:
+
+<!-- prettier-ignore -->
+```js,incorrect
+html`<div id=${value}></div>`;
+html`<div id="${value}"></div>`;
+```
+
+<!-- prettier-ignore-end -->
+
+Examples of **correct** code for this rule with the `"single"` and `enforceTemplatedAttrValue: true`:
+
+<!-- prettier-ignore -->
+```js,correct
+html`<div id='${value}'></div>`;
+```
+
+<!-- prettier-ignore-end -->
+
 ## Further Reading
 
 - [MDN - Quoting attributes](https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/HTML#Quoting_attributes)

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

@@ -3,7 +3,8 @@
  * @import {Attribute, Tag, ScriptTag, StyleTag} from "@html-eslint/types";
  * @import {RuleModule} from "../types";
  *
- * @typedef {"single" | "double"} Option
+ * @typedef {"single" | "double"} SingleOrQuoteOption
+ * @typedef {{enforceTemplatedAttrValue: boolean}} ObjectOption
  */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
@@ -25,7 +26,7 @@ const QUOTES_STYLES = {
 const QUOTES_CODES = [`"`, `'`];
 
 /**
- * @type {RuleModule<[Option]>}
+ * @type {RuleModule<[SingleOrQuoteOption, ObjectOption]>}
  */
 module.exports = {
   meta: {
@@ -43,6 +44,16 @@ module.exports = {
       {
         enum: [QUOTES_STYLES.SINGLE, QUOTES_STYLES.DOUBLE],
       },
+      {
+        type: "object",
+        properties: {
+          enforceTemplatedAttrValue: {
+            type: "boolean",
+            default: false,
+          },
+        },
+        additionalProperties: false,
+      },
     ],
     messages: {
       [MESSAGE_IDS.UNEXPECTED]:
@@ -58,6 +69,10 @@ module.exports = {
         ? context.options[0]
         : QUOTES_STYLES.DOUBLE;
     const expectedQuote = SELECTED_STYLE === QUOTES_STYLES.DOUBLE ? `"` : `'`;
+    const enforceTemplatedAttrValue =
+      context.options &&
+      context.options[1] &&
+      context.options[1].enforceTemplatedAttrValue;
 
     const sourceCode = getSourceCode(context);
 
@@ -91,7 +106,10 @@ module.exports = {
        * Allow template expression.
        * ex: html`<div foo=${foo}></div>`
        */
-      if (attr.value.parts.some((part) => part.type === NODE_TYPES.Template)) {
+      if (
+        !enforceTemplatedAttrValue &&
+        attr.value.parts.some((part) => part.type === NODE_TYPES.Template)
+      ) {
         return;
       }
 

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

@@ -173,6 +173,14 @@ templateRuleTester.run("[template] quotes", rule, {
 const handler = () => {};
 html\`<div onclick=\${handler}></div>\``,
     },
+    {
+      code: `html\`<div id = "\${foo}">\``,
+      options: ["double", { enforceTemplatedAttrValue: true }],
+    },
+    {
+      code: `html\`<div id = '\${foo}'>\``,
+      options: ["single", { enforceTemplatedAttrValue: true }],
+    },
   ],
   invalid: [
     {
@@ -184,5 +192,35 @@ html\`<div onclick=\${handler}></div>\``,
         },
       ],
     },
+    {
+      code: `html\`<div id = \${foo}>\``,
+      output: `html\`<div id = "\${foo}">\``,
+      options: ["double", { enforceTemplatedAttrValue: true }],
+      errors: [
+        {
+          messageId: "missing",
+        },
+      ],
+    },
+    {
+      code: `html\`<div id = '\${foo}'>\``,
+      output: `html\`<div id = "\${foo}">\``,
+      options: ["double", { enforceTemplatedAttrValue: true }],
+      errors: [
+        {
+          messageId: "unexpected",
+        },
+      ],
+    },
+    {
+      code: `html\`<div id = prefix_\${foo}>\``,
+      output: `html\`<div id = 'prefix_\${foo}'>\``,
+      options: ["single", { enforceTemplatedAttrValue: true }],
+      errors: [
+        {
+          messageId: "missing",
+        },
+      ],
+    },
   ],
 });