prefer-class-directive.md

pageClass	sidebarDepth	title	description	since
rule-details	0	svelte/prefer-class-directive	require class directives instead of ternary expressions	v0.0.1

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={selected ? 'selected' : ''}>foo</button>
<button class={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/prefer-class-directive": [
    "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