Eslint-plugin-vue: Rule Proposition: Props Casing

[filipalacerda]

Per feedback in https://github.com/vuejs/eslint-plugin-vue/issues/77#issuecomment-316057943:

Rule proposition:

Props Casing

Define a style for the props casing in templates

We (at GitLab) often see inconsistency in the way we provide props through templates:

<component myProp="prop"></component>

or

<component my-prop="prop"></component>

Configuration

'vue/props-casing': ['camelCase'|'kebab-case'|'PascalCase']

camelCase

<component myProp="prop"></component>

kebab-case

<component my-prop="prop"></component>

PascalCase

<component MyProp="prop"></component>

cc @armano2

[armano2]

@filipalacerda i think better name for this rule is html-attributes-casing

[filipalacerda]

@armano2 they can be vue props tho 🤔

[armano2]

yes but we don't know if they are props or regular attributes and even if they are props they are still attributes

[mysticatea]

Thank you for the proposal!

Sounds good to me, but I have some notes.

• This rule should apply to only HTML context; should not apply to SVG/MathML context because XML is case-sensitive.
• I'm not sure the three options are proper. Because we are using all small letters in the attributes of HTML in practice. E.g. onclick, contenteditable, etc...
• There are the - character which we cannot remove: HTML data-* attributes.