# 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