# svelte/html-quotes

enforce quotes style of HTML attributes

  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

# 📖 Rule Details

You can choose quotes of HTML attributes from:

  • Double quotes: <div class="foo">
  • Single quotes: <div class='foo'>
  • No quotes: <div class=foo>

This rule enforces the quotes style of HTML attributes.

<script>
  /* eslint svelte/html-quotes: "error" */
</script>

<!-- ✓ GOOD -->
<input type="text" bind:value={text} />
<img {src} alt="{name} dances." />

<!-- ✗ BAD -->
<input type=
Expected to be enclosed by double quotes. (svelte/html-quotes)
text
Unexpected to be enclosed by any quotes. (svelte/html-quotes)
 bind:value="{text}" />
<img src=
Unexpected to be enclosed by any quotes. (svelte/html-quotes)
"{src}"
Expected to be enclosed by double quotes. (svelte/html-quotes)
 alt='{name} dances.' />

# 🔧 Options

{
  "svelte/html-quotes": [
    "error",
    {
      "prefer": "double", // or "single"
      "dynamic": {
        "quoted": false,
        "avoidInvalidUnquotedInHTML": false
      }
    }
  ]
}
  • prefer … If "double", requires double quotes. If "single", requires single quotes.
  • dynamic … Settings for dynamic attribute values and directive values using curly braces.
    • quoted … If true, enforce the use of quotes. If false, do not allow the use of quotes. The default is false.
    • avoidInvalidUnquotedInHTML … If true, enforces the use of quotes if they are invalid as HTML attribute when not using quotes. The default is false.

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v0.5.0

# 🔍 Implementation