Maximum depth of template block

[kevsommer]

Please describe what the rule should do: The rule should allow developers to set a maximum depth for templates for Vue components in a project. In my experience a high depth of a template correlates with very complex components, so forcing a developer to split up a component into subcomponents via an optional linting rule, could aid in keeping complexity down in a codebase. Therefore, I think it would be a good addition to the vue eslint rule set, to give developers the option to enforce this rule.

What category should the rule belong to?

[x] Enforces code style (layout) [ ] Warns about a potential error (problem) [ ] Suggests an alternate way of doing something (suggestion) [ ] Other (please specify:)

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

<!-- ✗ BAD -->
<template>
  <main-container>
    <child-component>
      <div />
    </child-component>
    <child-component>
      <nested-component>
        <div>
          <div />
        </div>
      </nested-component>
    </child-component>
  </main-container>
</template>

<!-- ✓ GOOD -->
<template>
  <main-container>
    <child-component>
      <div />
    </child-component>
  </main-container>
</template>

Additional context So far I haven't found a similar rule proposal. But given the ruleset includes the vue/max-len rule and vue/max-props, which similarly help control the complexity of components, I think it would be a good addition.