Rule Proposal: vue/v-slot-style

[mysticatea]

Please describe what the rule should do:

This rule enforces the consistent usage about the shorthand/long-form of v-slot directives.

This is v-slot version of existing vue/v-bind-style and vue/v-on-style.

Options:

{
    "vue/v-slot-style": [
        "error",
        {
            atComponent: "v-slot",
            default: "shorthand",
            named: "shorthand",
        }
    ]
}

Name	Type	Default Value	Description
atComponent	"shorthand" | "longform" | "v-slot"	"v-slot"	The style for the default slot at custom components directly (E.g. <my-component v-slot="">).
default	"shorthand" | "longform" | "v-slot"	"shorthand"	The style for the default slot at template wrappers (E.g. <template #default="">).
named	"shorthand" | "longform"	"shorthand"	The style for named slots (E.g. <template #named="">).

Each value means:

• "shorthand" ... use # shorthand. E.g. #default, #named, ...
• "longform" ... use v-slot: directive notation. E.g. v-slot:default, v-slot:named, ...
• "v-slot" ... use v-slot without that argument. This is shorter than shorthand #default.

And a string option is supported to be consistent to similar vue/v-bind-style and vue/v-on-style.

• ["error", "longform"] is same as ["error", { atComponent: "longform", default: "longform", named: "longform" }].
• ["error", "shorthand"] is same as ["error", { atComponent: "shorthand", default: "shorthand", named: "shorthand" }].

What category should the rule belong to?

• Enforces code style
• Warns about a potential error
• Suggests an alternate way of doing something
• Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<script>/*eslint vue/v-slot-style: error */</script>

<template>
    <my-component #default="{ msg }"><!-- error: use v-slot -->
        {{msg}}
    </my-component>
    <my-component>
        <template v-slot><!-- error: use #default -->
            default
        </template>
        <template v-slot:header><!-- error: use #header -->
            header
        </template>
    </my-component>
</template>

<script>/*eslint vue/v-slot-style: [error, shorthand] */</script>

<template>
    <my-component v-slot="{ msg }"><!-- error: use #default -->
        {{msg}}
    </my-component>
    <my-component>
        <template v-slot><!-- error: use #default -->
            default
        </template>
        <template v-slot:header><!-- error: use #header -->
            header
        </template>
    </my-component>
</template>

<script>/*eslint vue/v-slot-style: [error, longform] */</script>

<template>
    <my-component v-slot="{ msg }"><!-- error: use v-slot:default -->
        {{msg}}
    </my-component>
    <my-component>
        <template #default><!-- error: use v-slot:default -->
            default
        </template>
        <template #header><!-- error: use v-slot:header -->
            header
        </template>
    </my-component>
</template>

Additional context

Nothing in particular.

---

• 2019-02-11 [EDIT] add atComponent option and "v-slot" option value.

[escapedcat]

@mysticatea do you know when this will be released?

Current docs list this rule but using 5.2.2 the rule is not defined:
error Definition for rule 'vue/v-slot-style' was not found vue/v-slot-style

This might be confusing for others as well.
Thanks for your efforts and please don't take this as any pressure to release. Just wanted to check.

[escapedcat]

If people stumble across this, please continue here: #899

[domnantas]

Could you share the reasoning behind atComponent default being v-slot?
Is it because <Component v-slot="{ msg }"> makes it more clear that property is coming from a slot, compared to <Component #default="{ msg }">?