Rule Proposal: no unnecessary template

[arianrhodsandlot]

Could we add a rule that emits an error when template tag is not necessary?

If a template tag has only one child element, or it has no v-if / v-else-if / v-else / v-for directive, this tag can be omitted.

For example, there are some examples of incorrect code for this rule:

<template>
  <div class="root">
    <template v-if="isXxx">
      <span>{{ xxx }}</span>
    </template>
  </div>
</template>

<template>
  <div class="root">
    <template>
      <span>{{ xxx }}</span>
      <span>{{ yyy }}</span>
    </template>
  </div>
</template>

Here are some correct ones:

<template>
  <div class="root">
    <span v-if="isXxx">{{ xxx }}</span>
  </div>
</template>

<template>
  <div class="root">
    <template v-for="item in items">
      <span>{{ item.xxx }}</span>
      <span>{{ item.yyy }}</span>
    </template>
  </div>
</template>

What do you think of this?

[ota-meshi]

Thank you for this rule proposition.

I would like to implement this rule. In Vue 3 the <template> tag is rendered and probably not intended for most users.