⭐️New: Add directive-interpolation-spacing rule

[milewski]

Hi, i dont know what is the criteria used to determine which category a rule should go so let me know if it should be somewhere else than "strongly-recommended" ,

This PR gives the ability to format the expression within properties binding:

<template>
    <div>
        <!-- transform this: -->
        <div :class="{test:132}" />
        <!-- to: -->
        <div :class="{ test: 132 }" />
    </div>
</template>

This is a problem that extremely annoys me... perhaps there was already a solution for this which i'm not aware of?

🤞

[armano2]

@milewski You can have this formating with eslint rules:

• object-curly-spacing
• array-bracket-spacing

this implementation is not giving you much flexibility

[milewski]

I felt that there would be a way of doing that with the existing rules.. Do you have any example of how to use existing rules to format specific section?

Because that two rules did not catch the expressions inside the directives, so maybe if I could indicate that part should be processed by rule X or Y then I could eliminate the need of adding the spacing on curly using this PR

[mysticatea]

Thank you for this PR.

I prefer to re-implement of the existing rules for Vue.js template.
vue/object-curly-spacing and something like will be useful because the core rules don't work in Vue.js template.

no longer valid

[michalsnik]

Closing in favour of #680