Vue.js ESLint插件新增v-bind同名简写规则解析

在Vue 3.4版本中，v-bind指令引入了一项实用的新特性——同名属性简写语法。这项特性允许开发者在绑定与属性同名的变量时，可以省略属性值的声明。作为配套工具，vuejs/eslint-plugin-vue项目正在计划新增相关规则来规范这一语法的使用。

新特性背景

v-bind同名简写语法是Vue 3.4的重要更新之一，它让模板代码更加简洁。传统写法需要完整声明属性名和绑定的变量名，即使两者相同：

<div :foo="foo" />

而在Vue 3.4及更高版本中，可以简化为：

<div :foo />

规则设计思路

ESLint插件计划通过新增规则来规范这一语法的使用，主要提供两种配置选项：

1. always模式：强制要求使用简写形式
2. never模式：禁止使用简写形式

always模式示例

<!-- 合规写法 -->
<div :foo />
<div v-bind:foo />

<!-- 不合规写法 -->
<div :foo="foo" />
<div v-bind:foo="foo" />

never模式示例

<!-- 合规写法 -->
<div :foo="foo" />
<div v-bind:foo="foo" />

<!-- 不合规写法 -->
<div :foo />
<div v-bind:foo />

技术实现细节

在AST解析层面，识别这种简写语法需要特殊处理。由于简写形式和非简写形式在抽象语法树中的结构相同，无法仅通过检查directive.value来区分。插件内部已经实现了专门的工具函数，通过比较源码范围(range)来判断是否使用了简写形式。

这项规则的实现将帮助团队：

1. 保持代码风格一致性
2. 提高模板可读性
3. 促进新特性的合理采用

适用场景建议

对于新项目或升级到Vue 3.4+的项目，建议启用always模式以充分利用新特性带来的简洁性。而对于需要保持向后兼容或已有大型代码库的项目，则可以考虑使用never模式避免大规模重构。

这项规则的推出将进一步完善Vue项目的代码规范体系，为开发者提供更多样化的风格选择。