In the project I'm working where we have the vue/attribute-hyphenation eslint rule configured to always enforce attribute hyphenation in Vue 3 components. The problem is that the hyphens break the new Vue 3.4 syntax to bind attributes to values with the same name.
## Works
<my-component :text />
<my-component :myText />
## Doesn't work
<my-component :my-text />
I've been trying to make use of the ignore configuration for the rule to include a regex that would ignore the attribute that starts with : and does not include =. However, I'm wondering if there's a better approach since eslint-plugin-vue already supports some 3.4 according to their changelog.
This is the rule config in my last attempt:
'vue/attribute-hyphenation': [
'error',
'always',
{
ignore: ['^:([^=]*)$']
}
],
Are you sure the error is coming from eslint? this issue is relevant to vue-language-tools (IDE extension) which was fixed in version 2.0, the latest eslint-plugin-vue shouldnt throw this error, you can find the discussion at https://github.com/vuejs/language-tools/issues/3830