shorthand-directive.md

pageClass	sidebarDepth	title	description	since
rule-details	0	svelte/shorthand-directive	enforce use of shorthand syntax in directives	v0.24.0

svelte/shorthand-directive

enforce use of shorthand syntax in directives

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

📖 Rule Details

This rule enforces the use of the shorthand syntax in directives.

<script>
  /* eslint svelte/shorthand-directive: "error" */
  let value = 'hello!'
  let active = true
  let color = 'red'
</script>

<!-- ✓ GOOD -->
<input bind:value>
<div class:active>...</div>
<div style:color>...</div>

<!-- ✗ BAD -->
<input bind:value={value}>
<div class:active={active}>...</div>
<div style:color={color}>...</div>

🔧 Options

{
  "svelte/shorthand-directive": [
    "error",
    {
      "prefer": "always" // "never"
    }
  ]
}

• prefer
  • "always" ... Expects that the shorthand will be used whenever possible. This is default.
  • "never" ... Ensures that no shorthand is used in any directive.

👫 Related Rules

• svelte/shorthand-attribute

🚀 Version

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

🔍 Implementation

• Rule source
• Test source