quotes

This rule enforces consistent use of quotes for attribute values (' or ").

How to use

.eslintrc.js

module.exports = {
  rules: {
    "@html-eslint/quotes": "error",
  },
};

This rule has two options, a string option and an object option.

String option (quote style):
1. "double" (default) enforces the use of double quotes (")
2. "single" enforces the use of single quotes (')
Object option:
1. "enforceTemplatedAttrValue": false (default) does not enforce quote style inside template expressions
2. "enforceTemplatedAttrValue": true enforces quote style inside templated attribute values, which also means bare templated attributes are disallowed

Examples of incorrect code for this rule with the default "double" option:

<div id='foo'></div>

Examples of correct code for this rule with the default "double" option:

<div id="foo"></div>
<div id='containing "double" quotes'></div>

Examples of incorrect code for this rule with the "double" and enforceTemplatedAttrValue: true:

html`<div id=${value}></div>`;
html`<div id='${value}'></div>`;

Examples of correct code for this rule with the "double" and enforceTemplatedAttrValue: true:

html`<div id="${value}"></div>`;

Examples of incorrect code for this rule with the "single" option:

<div id="foo"></div>

Examples of correct code for this rule with the default "single" option:

<div id='foo'></div>
<div id="containing 'single' quotes"></div>

Examples of incorrect code for this rule with the "single" and enforceTemplatedAttrValue: true:

html`<div id=${value}></div>`;
html`<div id="${value}"></div>`;

Examples of correct code for this rule with the "single" and enforceTemplatedAttrValue: true:

html`<div id='${value}'></div>`;