为什么Eslint无法识别.vue文件中的全局TypeScript类型（报no-undef错误）

问题根因 #

报错触发的是 ESLint 原生的 no-undef 校验规则，这个规则仅能识别 JavaScript 层面的变量，无法识别 TypeScript 定义的全局类型。纯 .ts 文件不会触发该报错，是因为 @typescript-eslint 的默认配置会自动禁用原生 no-undef 规则，改用 TS 兼容的校验逻辑；而 .vue 文件的脚本块需要经过 vue-eslint-parser 中转解析，原生规则没有被正确禁用，就出现了TypeScript能识别类型、但ESLint报错的情况。

解决方法 #

直接在你的 .eslint.js 配置的 rules 字段中，关闭原生 no-undef 规则即可：

rules: {
  // 新增这一行
  'no-undef': 'off',
  // 其他原有规则保持不变
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  // ...
}

关闭后不会影响校验能力：TypeScript 本身会检查类型、变量是否存在未定义的问题，你扩展的 @vue/typescript 配置也已经包含了 @typescript-eslint 提供的兼容TS的未定义校验规则，不会漏掉非法引用的报错。

可选检查项 #

如果修改后还是报错，可以确认两个配置：

1. 你的全局类型定义文件 src/@types/typings.d.ts 不要加 export 导出语句，加了之后就会变成模块内类型，必须手动导入才能使用，无法全局生效
2. 确认 tsconfig.json 的 include 字段包含了 src/**/*，你的现有配置是正确的，已经覆盖到了 src 下的所有d.ts文件

修改完配置后重启IDE的ESLint服务即可生效。

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