directive-interpolation-spacing.md

enforce unified spacing in mustache interpolations within directive expressions (vue/directive-interpolation-spacing)

• ⚙️ This rule is included in "plugin:vue/strongly-recommended" and "plugin:vue/recommended".
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule aims to enforce unified spacing in directive interpolations.

👎 Examples of incorrect code for this rule:

<div :property="{key:value}"></div>
<div :property="{    key:value    }"></div>
<div :property=" { key:value } "></div>
<div :property="{ [expression]:value,[expression]:value }"></div>
<div :property="[1,2,3]"></div>

👍 Examples of correct code for this rule:

<div :property="{ key: value }"></div>
<div :property="{ [expression]: value }"></div>
<div :property="{ [expression]: value, [expression]: value }"></div>
<div :property="[ 1, 2, 3 ]"></div>

🔧 Options

Default spacing is set to always

'vue/directive-interpolation-spacing': [2, 'always'|'never']

"always" - Expect one space between expression and curly braces / brackets.

👎 Examples of incorrect code for this rule:

<div :class="{key:value,key:value}"></div>
<div :class="[1,2]"></div>

👍 Examples of correct code for this rule:

<div :class="{ key: value, key: value }"></div>
<div :class="[ 1, 2 ]"></div>

"never" - Expect no spaces between expression and curly braces / brackets.

👎 Examples of incorrect code for this rule:

<div :class="{ key: value, key: value }"></div>
<div :class="[ 1, 2, 3 ]"></div>

👍 Examples of correct code for this rule:

<div :class="{key: value, key: value}"></div>
<div :class="[1, 2, 3]"></div>