prefer-class-directive.md

Pattern: Missing use of class directive

Issue: -

Description

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.

📚 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