Enforce Prop/attribute casing

[jd-solanki]

Please describe what the rule should do: Recently, I was reviewing code of my colleague and I found that he wrote id="myForm" but I prefer id attr in kebab case. Hence, this rule came to my mind.

What category should the rule belong to?

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

<form id="myForm"></form>

<label for="myInput"></form>

Additional context This rule should be flexible enough to include & exclude the tags & attributes for checking attribute/prop value casing.

I am happy to make PR and contribute (It will take some time though)

[FloEdelmann]

Good idea! But I'd make it more flexible by allowing to specify a regex. As a name, I'd suggest vue/template-attribute-value-pattern.

The options could look similar to the vue/no-bare-strings-in-template rule:

{
  "vue/template-attribute-value-pattern": ["error", {
    "label": {
      "for": "/^[a-z]+(-[a-z]+)*$/"
    },
    // also allow regex in component name to check multiple elements/components at once
    "/.+/": {
      "id": "/^[a-z]+(-[a-z]+)*$/"
    }
  }]
}

What do you think @jd-solanki @ota-meshi?

[ota-meshi]

That rule is good for me! However, I have a question. Do you think the check will include the class name as well? If so, I find it useful to be able to check the names separated by spaces in the class. Also, I also find it useful to be able to check :class="{key: value}" with the same option.

[FloEdelmann]

I think that should be a separate rule (vue/template-class-pattern or similar). But if you choose to check the class attribute in vue/template-attribute-value-pattern, why should it not work?

[ota-meshi]

why should it not work?

I find it annoying to include spaces in the regex if I want to use kebab cases in class names. (I want to use "/^[a-z]+(-[a-z]+)*$/" instead of "/^[a-z]+(-[a-z]+)*(\s+[a-z]+(-[a-z]+)*)*$/".)

I think it's a good idea to create another rule because I think the implementation will be simple :+1:. However, we need to be careful that the rules do not conflict with each other.