Rule Proposal: vue/ban-component-names

[qmhc]

Please describe what the rule should do:

Ban some component names, such as those that are the same to native html tag or built-in components.

I think this rule can include vue/multi-word-component-names.

For vue/multi-word-component-names, I have encountered many developers who do not find this rule helpful as it is turned on by default, and it goes against their intuition since using a single word as a component name is very common in development, finally they will close the rule 😂.

So I want this rule can enhance vue/multi-word-component-names, provides more fine-tuned, intuitive control and greater customizability.

What category should the rule belong to?

[ ] Enforces code style (layout)
[x] 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:

/* ✓ GOOD */
Vue.component('foo', {
  // ...
})

/* ✗ BAD */
Vue.component('title', {
  // ...
})

<script>
<!-- ✓ GOOD-->
export default {
  name: 'foo'
}

<!-- ✗ BAD -->
export default {
  name: 'transition'
}
</script>

<!-- filename: body.vue -->
<script>
/* ✗ BAD */
export default {
  // ...
}
</script>

Additional context

We can collect html tag names from MDN.

Some potentially useful options:

• allowHtmlTag: allow those that are same to html tag
• banPattern: use to match which name is banned
• customBans: specify names to ban
• ignores: names to ignore
• ignorePattern: use to match which name is ignored

It you approve, I am willing to make a PR for this.

[FloEdelmann]

Note that we already have the vue/no-reserved-component-names rule, which disallows HTML and SVG element names.

[qmhc]

Sry, I missed it. Could what I descripted be an enhancement?

[FloEdelmann]

Sry, I missed it.

Would you fancy opening a PR to add a "Related rules" section to both rules to link them together and avoid this in the future?

Could what I descripted be an enhancement?

• allowHtmlTag doesn't make sense for that rule; instead the whole rule should be disabled.
• banPattern and customBans should rather be a new rule vue/no-restricted-component-name.
• Why should ignores or ignoresPattern be useful? For which HTML element tag names would it be desirable to have a component with the same name? I think it always is confusing and there is no use case for specific exclusions.

[qmhc]

Would you fancy opening a PR to add a "Related rules" section to both rules to link them together and avoid this in the future?

allowHtmlTag doesn't make sense for that rule; instead the whole rule should be disabled.

Of course.

banPattern and customBans should rather be a new rule vue/no-restricted-component-name.

Should I open a new issue to follow this, or in this issue?

Why should ignores or ignoresPattern be useful? For which HTML element tag names would it be desirable to have a component with the same name? I think it always is confusing and there is no use case for specific exclusions.

Well, I can think of somethings immediately like:

• in UI llb: Switch, Link, Table, Image, Col
• other I've seen: Article, Header, Footer, Title, Video, Audio and so on...

Although it is not recommended, I think users may want to only disallow part of html tag names but not all.

[FloEdelmann]

Should I open a new issue to follow this, or in this issue?

I think a new issue makes more sense.

Although it is not recommended

I think in this case, disabling the whole rule is better. Either you want to enforce not using HTML names for your components, or you don't care.

[casey6]

• Why should ignores or ignoresPattern be useful? For which HTML element tag names would it be desirable to have a component with the same name? I think it always is confusing and there is no use case for specific exclusions.

I found this issue after realizing that ignores wasn't an option for this rule. I have some components that are named after their corresponding "module" in the platform I'm building in. Essentially these are the pages in my app. These components are only used as routes, and there is a lot of value in their names matching what is defined in this platform.

I've disabled the multi-word-component-names for these specific components and wanted to do the same with no-reserved-component-names.

{
  "extends": ["plugin:vue/vue3-recommended"],
  "rules": {
    "vue/multi-word-component-names": ["error", { "ignores": ["Dashboard", "Main", "Widget"] }],
    "vue/no-reserved-component-names": ["error", { "ignores": ["Main"] }]
  }
}

I care about enforcing not using html names for my components, except for this once exception (Main).

[FloEdelmann]

Thanks for your explanation, it makes sense to me. Can you please open a new issue and link to this thread, to keep the issues actionable?