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" */
</script>

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

<!-- ✗ BAD -->
<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

Nothing.

👫 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