Rule proposal: `component-name-in-template-casing`

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.

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