Vite+React+Vitest项目中ESLint无法识别tsconfig.test.json配置的Vitest全局变量的解决方案咨询

我太懂你现在的闹心了——明明在tsconfig.test.json里已经配置了vitest/globals类型，Vitest跑测试完全正常，但ESLint就是揪着describe、it、expect这些全局变量报错，还一个劲提示你装jest或mocha的类型，关键你还不想把测试专属的类型污染到主项目的tsconfig.app.json里，这搁谁都得挠头。

下面是几个针对性的解决办法，你可以一步步试：

1. 给测试文件的ESLint配置手动声明Vitest全局变量 #

虽说TypeScript能通过tsconfig.test.json识别这些全局变量，但ESLint的全局检查逻辑有时候得单独“喂”它。你可以在ESLint的测试文件专属配置块里直接声明这些全局变量的只读权限：

// eslint.config.ts 中的测试文件配置块
{
  files: ['src/**/*.test.{ts,tsx}', 'src/tests/setup.ts'],
  languageOptions: {
    parserOptions: {
      project: './tsconfig.test.json',
    },
    // 把你用到的Vitest全局变量都列在这
    globals: {
      describe: 'readonly',
      it: 'readonly',
      expect: 'readonly',
      test: 'readonly',
      beforeEach: 'readonly',
      afterEach: 'readonly'
    }
  },
}

2. 开启TypeScript-ESLint的Project Service模式 #

因为你用了TypeScript的项目引用（tsconfig.json里的references），旧版的ESLint TypeScript解析器对这种多tsconfig的场景支持不太好。你可以在主ESLint配置的parserOptions里开启projectService，让它能正确识别关联的tsconfig文件：

// eslint.config.ts 中的主配置块
{
  // ... 其他已有配置
  languageOptions: {
    ecmaVersion: 2020,
    globals: globals.browser,
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
      projectService: true, // 关键配置：开启这个模式
    },
  },
  // ... 其他已有配置
}

3. 修复tsconfig.test.json的types配置，避免覆盖父配置 #

你的tsconfig.test.json继承了tsconfig.app.json，如果tsconfig.app.json里已经有types配置（比如react、react-dom），子配置的types会直接覆盖它，反而导致ESLint解析时类型不完整。你可以把父配置的types和测试类型合并：

// tsconfig.test.json
{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    // 把tsconfig.app里的基础类型也加上，再补充vitest全局类型
    "types": ["react", "react-dom", "vitest/globals"]
  },
  "include": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/tests/setup.ts"]
}

4. 升级TypeScript-ESLint相关依赖 #

旧版本的@typescript-eslint/eslint-plugin和@typescript-eslint/parser对多tsconfig的支持可能存在bug，先把它们更到最新版试试：

npm update @typescript-eslint/eslint-plugin @typescript-eslint/parser

最后别忘了重启你的ESLint服务（比如VSCode里按Ctrl+Shift+P，输入ESLint: Restart ESLint Server），再打开测试文件看看那些烦人的错误是不是消失了。

内容来源于stack exchange