vue/attribute-hyphenation规则与Vue 3.4同名简写语法冲突求助

问题背景 #

项目中启用ESLint的vue/attribute-hyphenation规则，强制Vue组件属性使用连字符命名，但该规则会破坏Vue 3.4新增的同名属性绑定简写语法：

• 可正常运行的写法：

  <my-component :text />
  <my-component :myText />
  

• 被规则强制转换后无法运行的写法：

  <my-component :my-text />
  

你尝试通过规则的ignore配置添加正则^:([^=]*)$规避冲突，但考虑到eslint-plugin-vue v9.20.0已支持部分Vue 3.4特性，希望找到更优方案。

最优解决方案 #

在eslint-plugin-vue v9.20.0及以上版本中，官方已针对Vue 3.4的属性简写语法对vue/attribute-hyphenation规则做了适配——默认忽略所有不带赋值的动态属性简写（即:xxx形式的属性），无需手动配置正则。

配置示例 #

直接使用规则默认配置即可，无需额外添加ignore项：

'vue/attribute-hyphenation': [
  'error',
  'always'
],

效果说明 #

• 普通非动态简写属性仍会被强制要求使用连字符命名，比如myText会被提示改为my-text；
• 动态属性简写（:myText、:text）会被规则自动忽略，不会被强制转换为:my-text，完美兼容Vue 3.4的简写语法；
• 官方适配比手动正则更精准，能覆盖更多边界情况，且后续规则更新会自动同步维护，无需自行调整。

手动正则的局限 #

你之前配置的^:([^=]*)$虽能暂时解决问题，但存在不足：

1. 正则需自行维护，若Vue推出新语法特性，可能需要手动调整；
2. 官方适配会考虑更多细节，比如避免误匹配带特殊字符的属性，稳定性更高。

内容的提问来源于stack exchange，提问作者Iván Francés Alcántara