feat: add attribute-name-validator rule

[youxingz]

Add rule: attribute-name-validator

Since many company have some cases which are not allowed to use the specific attribute name, e.g. id, xx-id, and some typos like jd, refs (instead of ref). Then we added this rule, try to use regex pattern to test these attribute names of custom components.

Some useful regex options:

• allow all letters and numbers: /^([a-zA-Z_$][a-zA-Z\d_$]*)$/
• disable attribute ref: /[^(ref)]/
• disable attribute jd: /[^(jd)]/

[FloEdelmann]

We already have the vue/valid-attribute-name, vue/no-restricted-static-attribute and vue/no-restricted-v-bind rules that do similar things. Is this not sufficient?

[youxingz]

We already have the vue/valid-attribute-name, vue/no-restricted-static-attribute and vue/no-restricted-v-bind rules that do similar things. Is this not sufficient?

The rule valid-attribute-name does not support custom regex pattern, and we hope this rule can be more open, allowing users to set specific naming rules by themselves. Especially when some teams have their own naming rules.

[FloEdelmann]

But the vue/no-restricted-static-attribute and vue/no-restricted-v-bind rules do support custom regex patterns.

[youxingz]

@FloEdelmann Thank you for your mention, I did't notice that rule can accpet regex parameters before. And I then checked the source code of vue/no-restricted-static-attribute, there is no option for user to decide which kind of component can be tested by rules. Can I create a new pull request and add such option to vue/no-restricted-static-attribute? It will look like:

// scope: 'custom-component' | 'all'
options: [
    {
        key: 'id',
        message: 'Using `id` is not allowd in custom component.',
        scope: 'custom-component'
    }
]

[FloEdelmann]

Yes, that option exists already. Use the element property inside the configuration object.

Feel free to open a PR to improve the docs if you found that lacking!