# 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 
Expected shorthand directive. (svelte/shorthand-directive)
bind:value={value}
>
<div
Expected shorthand directive. (svelte/shorthand-directive)
class:active={active}
>...</div>
<div
Expected shorthand directive. (svelte/shorthand-directive)
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.

# 🚀 Version

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

# 🔍 Implementation