# svelte/prefer-class-directive

require class directives instead of ternary expressions

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

# 📖 Rule Details

This rule aims to replace a class with ternary operator with the class directive.

<script>
  /* eslint svelte/prefer-class-directive: ["error", {"prefer": "empty"}] */
  const selected = true;
</script>

<!-- ✓ GOOD -->
<button class:selected>foo</button>
<button class:selected={current === 'foo'}>foo</button>

<!-- ✗ BAD -->
<button class=
Unexpected class using the ternary operator. (svelte/prefer-class-directive){selected ? 'selected' : ''}>foo</button>
<button class=
Unexpected class using the ternary operator. (svelte/prefer-class-directive){current === 'foo' ? 'selected' : ''}>foo</button>

You cannot enforce this style by using prettier-plugin-svelte. That is, this rule does not conflict with prettier-plugin-svelte and can be used with prettier-plugin-svelte.

# 🔧 Options

{
  "svelte/html-quotes": [
    "error",
    {
      "prefer": "empty" // or "always"
    }
  ]
}

• prefer … Whether to apply this rule always or just when there’s an empty string. Default is "empty".
  • "empty" … Requires class directives only if one of the strings is empty.
  • "always" … Requires class directives always rather than interpolation.

# 👫 Related Rules

• svelte/prefer-style-directive

# 📚 Further Reading

• Svelte - Tutorial > 13. Classes / The class directive

# 🚀 Version

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

# 🔍 Implementation

• Rule source
• Test source