Eslint-plugin-vue: Rule proposal: `component-name-in-template-casing`

[michalsnik]

Style guide:
https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended

Description:
This rule would ensure proper component names in templates. As we only check .vue files in terms of templates we can provide both options: kebab-case and PascalCase

Good examples:

• kebab-case

<the-component />

• PascalCase

<TheComponent />

Bad examples:

<theComponent />
<Thecomponent />
<The-component />

and obviously with kebab-case option it would warn about PascalCase and vice-versa.

Default option would be PascalCase.

[ota-meshi]

I'm sorry. I made a mistake in refs at PR 402 m(_ _)m

[Mouvedia]

Default option would be PascalCase.

It shouldn't be the default:

• https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name
• https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=vue-component-names

[probil]

@Mouvedia, It should https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended
And vue components are not custom elements

[Mouvedia]

@probil The rule is called component-name-in-template-casing and the style guide that you have linked just above support the kebab-case for DOM templates and "everywhere" else _but_ single file components. It concludes with:

using kebab-case everywhere is also acceptable

Why? Because using PascalCase in SFC and kebab-case everywhere else would be inconsistent: we should recommend and support a solution that doesn't require to make that distinction.

[probil]

@Mouvedia Agree with you. PascalCase is not the best option for everyone. But the same for kebab-case.
I don't think this eslint plugin is able to parse DOM templates at all. Because currently it relies on *.vue extension and // @vue/component comment so only SFC will be checked. But DOM templates are usually hidden somewhere in the back-end templates. _Correct me please, if I'm wrong here._

In most projects, component names should always be PascalCase in single-file components

This plugin tries to follow official Vue Style Guide so PascalCase should be default. But of course. there should be configuration for this rule. So you can easily configure it to use kebab-case or both if you like

[Mouvedia]

It depends on what matters the most to you:

• one is official and recent (september 2017)
• the other has precedence and hence is wide spread (january 2017)

Both are valid options and have CONs/PROs.
One reason we should go with one or the other is if a convention exists on the React side: it would be detrimental to not follow their lead.