Rule proposal: slot-syntax rule

[ota-meshi]

Please describe what the rule should do:

This rule reports deprecated or removed (in Vue.js 2.6.0) slot syntax.

This rule has the following options.

{
  "vue/slot-syntax": ["error", {
    "v-slot": true,
    "slot": true,
    "slot-scope": true,
    "scope": false
  }]
}

• v-slot ... If false, disallow v-slot. default true
• slot ... If false, disallow slot. default true
• slot-scope ... If false, disallow slot-scope. default true
• scope ... If false, disallow scope. default false

I think we need to discuss the default options.
The listed defaults are designed not to warn v2.5 - 2.6 users.

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:

<template>
  <ListComponent>
    <!-- ✓ GOOD -->
    <template v-slot:name="props">
      {{ props.title }}
    </template>
    <template slot="name" slot-scope="props">
      {{ props.title }}
    </template>
  </ListComponent>
  <ListComponent>
    <!-- ✗ BAD -->
    <template slot="name" scope="props">
      {{ props.title }}
    </template>
  </ListComponent>
</template>

• option {"v-slot": true, "slot": false, "slot-scope": false, "scope": false}

You are using Vue.js v2.6.0+ and you want to use only v-slot

<template>
  <ListComponent>
    <!-- ✓ GOOD -->
    <template v-slot:name="props">
      {{ props.title }}
    </template>
  </ListComponent>
  <ListComponent>
    <!-- ✗ BAD -->
    <template slot="name" slot-scope="props">
      {{ props.title }}
    </template>
    <template slot="name" scope="props">
      {{ props.title }}
    </template>
  </ListComponent>
</template>

• option {"v-slot": false, "slot": true, "slot-scope": true, "scope": false}

You are using Vue.js v2.5.x

<template>
  <ListComponent>
    <!-- ✓ GOOD -->
    <template slot="name" slot-scope="props">
      {{ props.title }}
    </template>
  </ListComponent>
  <ListComponent>
    <!-- ✗ BAD -->
    <template v-slot:name="props">
      {{ props.title }}
    </template>
    <template slot="name" scope="props">
      {{ props.title }}
    </template>
  </ListComponent>
</template>

Additional context

v-slot
slot
slot-scope
scope

---

I started implementing on this branch.
However, we need to make the parser supports to v-slot.

[mysticatea]

I like this idea.

I guess that this rule's name should start with no- because the purpose is to disallow legacy syntax. For example, vue/no-deprecated-api or something like.

For too new syntax, I'm imaging another rule such as vue/no-unsupported-features, similar to node/no-unsupported-features/es-syntax.

[ota-meshi]

@mysticatea Thank you for comment!
If we add the following rules, will I add a separate js file for each syntax check likenode/no-unsupported-features/es-syntax?

• vue/no-deprecated-api
• vue/no-unsupported-features

[mysticatea]

I'm OK to go with either way.

I feel that all-in-one vue/no-deprecated-api rule is nice because the purpose is "disallow deprecated APIs" and there is no reason to separate the purpose. But, on the other hand, it can need major version up when we add new checks into the unified rule. This is a drawback.

[mysticatea]

Ah.., we have the separated vue/valid-* rules already, separated rules such as vue/no-deprecated-* may be good, too.

[ota-meshi]

@mysticatea
I will add the deprecated check rules with the following names.

• vue/no-deprecated-slot-attribute
• vue/no-deprecated-slot-scope-attribute
• vue/no-deprecated-scope-attribute

In addition, I will add the rule to check the new syntax with the name vue/no-unsupported-features and let the user set the version. What do you think?

[mysticatea]

Sounds good to me!