Vue2项目中Reactivity Transform与defineExpose触发ESLint object-shorthand报错解决

以下是几种可行的处理方案：

1. 调整代码写法，直接使用对象简写 #

如果你的myCode是通过Reactivity Transform的$ref/$computed等宏声明的响应式变量，可以直接省略解包宏，用对象简写语法暴露：

<script setup>
import { $ref } from 'vue/macros'

// 用$ref声明响应式变量
const myCode = $ref('initial value')

// 直接用简写形式暴露，符合ESLint规则
defineExpose({ myCode })
</script>

这种写法下，转译器会自动处理响应式变量的暴露，同时完美适配object-shorthand规则。

2. 局部或全局禁用ESLint规则 #

如果必须保留$$(myCode)的写法，可以针对性禁用ESLint的object-shorthand规则：

• 局部禁用：在代码行上方添加注释，仅忽略当前行的规则检查：

  <script setup>
  // eslint-disable-next-line object-shorthand
  defineExpose({ myCode: $$(myCode) })
  </script>
  

• 全局配置例外：如果这类场景较多，可以在ESLint配置文件（如.eslintrc.js）中，给Vue文件添加规则例外：

  module.exports = {
    overrides: [
      {
        files: ['*.vue'],
        rules: {
          // 允许defineExpose调用中使用非简写形式
          'object-shorthand': ['error', 'always', {
            ignoreProperties: true
          }]
        }
      }
    ]
  }
  

3. 修改转译插件的输出逻辑 #

从根源解决转译结果不符合ESLint规则的问题，通过自定义unplugin-vue2-script-setup的转译钩子，将{ key: $$(key) }自动转换为简写形式：
在项目的构建配置文件（如vite.config.js或webpack.config.js）中修改插件配置：

import { createVue2ScriptSetupPlugin } from 'unplugin-vue2-script-setup'

export default {
  plugins: [
    createVue2ScriptSetupPlugin({
      transform(code) {
        // 正则匹配并替换符合条件的defineExpose内容
        return code.replace(
          /defineExpose\(\{\s*(\w+):\s*\$\$\(\1\)\s*\}\)/g,
          'defineExpose({ $1 })'
        )
      }
    })
  ]
}

这种方式会全局统一处理所有符合模式的代码，无需修改业务代码或ESLint规则。

内容的提问来源于stack exchange，提问作者momoyu