Rule Proposal: no-use-v-if-with-v-slot

[bowencool]

Please describe what the rule should do:

disallow use v-if on the same element as v-slot

What category should the rule belong to?

• [x] Enforces code style
• [x] 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>
  <MyComp>
    <!-- ✓ GOOD -->
    <template v-slot="scope">
      <span v-if="scope.show">{{scope.msg}}</span>
    </template>

    <!-- ✗ BAD -->
    <template
      v-slot="scope"
      v-if="scope.show"
    >
      <span>{{scope.msg}}</span>
    </template>
    <!-- ↑ In this case, `scope` will be not defined. -->
  </MyComp>
</template>

Additional context

vue#11574

[ota-meshi]

Thank you for the rule suggestion.

What happens to this rule in the following cases?

    <template
      v-slot="scope"
      v-if="show"
    >
      <span>{{scope.msg}}</span>
    </template>

If this is an error, why is it an error? If this is not an error, then your code may not be able to judge well.

<template>
  <MyComp>
    <template
      v-slot="scope"
      v-if="scope.show"
    >
      <span>{{scope.msg}}</span>
    </template>
  </MyComp>
</template>
<script>
export default {
  data () {
    return {
      scope: {
        show: true // v-if uses this data.
      }
    }
  }
}
</script>

Perhaps I think extending vue/no-template-shadow might solve your problem.

<template>
  <MyComp>
    <template
      v-slot="scope"
      v-if="scope.show /* <- scope is shadowing */"
    >
      <span>{{scope.msg}}</span>
    </template>
  </MyComp>
</template>

However, the parser may not parse it right now.