Description
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.