VS Code报ESLint错误‘vi未定义’但Vitest运行正常，如何解决？

虽然你已经在tsconfig中配置了vitest/globals类型，但ESLint和TypeScript的类型检查是独立的，ESLint默认不知道vi是全局变量，所以需要单独给ESLint做配置，以下是几种可行的修复方法：

方法一：手动声明全局变量 #

修改你的ESLint配置文件（如.eslintrc.json、.eslintrc.js），添加globals字段将vi标记为只读全局变量：

如果是JSON格式的配置文件：

{
  "globals": {
    "vi": "readonly"
  }
}

如果是JS格式的配置文件：

module.exports = {
  globals: {
    vi: 'readonly'
  }
}

方法二：使用eslint-plugin-vitest插件 #

这个插件会自动识别Vitest的全局变量，无需手动声明：

1. 安装插件：

yarn add eslint-plugin-vitest --dev

2. 修改ESLint配置文件，添加插件并启用Vitest全局环境：

{
  "plugins": ["vitest"],
  "env": {
    "vitest/globals": true
  }
}

或者直接继承插件的推荐规则集（会包含全局变量声明及Vitest相关的ESLint规则）：

{
  "plugins": ["vitest"],
  "extends": ["plugin:vitest/recommended"]
}

方法三：确保ESLint正确读取tsconfig #

如果项目中有多个tsconfig文件，需确保ESLint指向了包含vitest/globals配置的那个文件，在ESLint配置中添加：

{
  "parserOptions": {
    "project": "./tsconfig.json" // 替换为你的测试tsconfig路径
  }
}

最后验证 #

修改配置后，重启VS Code的ESLint服务（按下Ctrl+Shift+P，输入ESLint: Restart ESLint Server执行），即可看到错误提示消失。

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