如何配置VSCode以支持Vitest自动导入功能？

方法1：开启Vitest全局API（推荐，无需手动导入） #

在项目根目录的vitest.config.ts（或.js）中添加globals: true配置：

import { defineConfig } from 'vitest/config'
import viteConfig from './vite.config'

export default defineConfig({
  ...viteConfig,
  test: {
    globals: true, // 开启全局API支持
    environment: 'jsdom' // 根据项目环境调整，比如node/jsdom
  }
})

接着在tsconfig.json的compilerOptions.types中添加vitest/globals，让TypeScript识别全局类型：

{
  "compilerOptions": {
    // 其他配置...
    "types": ["vitest/globals", "vite/client"]
  },
  "include": ["src/**/*", "tests/**/*"] // 确保包含测试文件
}

配置完成后，你可以直接在测试文件里使用describe、it、expect，无需手动导入，VSCode也会自动补全提示。

方法2：配置自动导入（保留手动导入场景） #

如果坚持要手动导入但需要VSCode的自动导入提示，按以下步骤调整：

• 确保tsconfig.json中compilerOptions.types包含vitest：

  {
    "compilerOptions": {
      "types": ["vitest", "vite/client"]
    }
  }
  

• 检查VSCode设置，确保自动导入功能开启：
  打开设置（快捷键Cmd+,），搜索并开启：
  • TypeScript > Suggest: Auto Imports
  • Vitest > Enable（确保Vitest扩展处于激活状态）
• 切换VSCode使用工作区的TypeScript版本：
  右下角点击TypeScript版本号，选择"Use Workspace Version"，避免内置版本无法识别项目依赖的类型定义。

额外排查点 #

• 确保已经安装@types/vitest（TypeScript项目需要）：

  npm install -D @types/vitest
  # 或
  yarn add -D @types/vitest
  

• 重启VSCode或重新加载窗口（快捷键Cmd+Shift+P，选择"Reload Window"），让配置生效。

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