# 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.
# 👫 Related Rules
# 🚀 Version
This rule was introduced in eslint-plugin-svelte v0.24.0