修复Vue3项目中defineEmits的ESLint no-unused-var报错

1. 替换ESLint规则为TypeScript版本 #

首先确保你的.eslintrc.js中禁用原生no-unused-vars，改用TypeScript专属规则，原生规则对TS泛型、类型别名的识别存在缺陷：

module.exports = {
  // ...其他配置项
  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error', {}]
  }
}

2. 精准忽略defineEmits关联类型 #

针对仅忽略defineEmits用到的类型（比如命名为Emits的类型别名/接口），在规则配置中添加typesIgnorePattern选项，通过正则匹配目标类型名称：

'@typescript-eslint/no-unused-vars': ['error', {
  // 精确匹配名为Emits的类型
  typesIgnorePattern: '^Emits$'
}]

如果你的类型命名有统一后缀（如FormEmits、UserEmits），可将正则调整为typesIgnorePattern: 'Emits$'，自动匹配所有以Emits结尾的类型。

3. 单个组件临时忽略（可选） #

若不想全局配置，仅在特定组件中跳过该错误，可在类型定义上方添加单行注释：

// eslint-disable-next-line @typescript-eslint/no-unused-vars
type Emits = {
  'update:modelValue': [value: string]
  submit: []
}

const emit = defineEmits<Emits>()

4. 确保ESLint正确识别Vue语法 #

检查.eslintrc.js是否正确引入Vue和TS的ESLint插件，配置对应解析器：

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  // ...其他配置
}

以上配置仅针对defineEmits相关的未使用类型关闭检查，不会影响全局未使用变量的校验。

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