必须勾选“Enable coverage”才能显示行覆盖率标记;需激活Coverage视图、正确配置源码路径,并统一Vitest配置以避免与CLI结果不一致。

WebStorm 里看不到覆盖率颜色标记,不是代码没覆盖,而是 IDE 根本没开始收集——Enable coverage 这个开关没打开,所有后续步骤都白搭。
必须手动启用 Enable coverage 才能触发收集
WebStorm 不会自动读取 vitest.config.ts 或 jest.config.js 里的 coverage.enabled,它只认自己运行配置里的勾选项。哪怕你终端跑 npm run test:coverage 成功生成了 coverage/ 目录,IDE 里照样一片灰。
- 右上角运行小部件 → 点击下拉箭头 → 选 Run “xxx” with Coverage(注意不是普通 Run)
- 或进
Run | Edit Configurations…→ 找到你的 Jest/Vitest 配置 → 拉到底部勾选Enable coverage - 确认
Collect coverage from tests in指向的是源码目录(如src/),不是test/或node_modules/ - 用 Vitest 时,额外检查项目根目录下
vitest.config.ts是否有coverage: { enabled: true },否则 WebStorm 的 runner 可能静默跳过
Ctrl+Alt+F6 唤出 Coverage 工具窗口后还得点“眼睛”图标
覆盖率数据生成了,但编辑器不着色?大概率是视图没激活。WebStorm 默认把覆盖率当“可选附加层”,不主动挂载到当前编辑器。
- 运行完带覆盖率的配置后,按
Ctrl+Alt+F6唤出 Coverage 工具窗口 - 窗口顶部找
Activate coverage view(图标是眼睛 ?️),必须点一下,否则边栏和行号旁不会出现红/绿标记 - 项目工具窗口(Project pane)里文件名右侧的百分比,只对「被至少一个测试 import 过」的文件显示;如果整个
src/都没数字,先检查Collect coverage from路径有没有误含node_modules
多次运行后覆盖率不更新?看清楚套件合并策略
连续跑两次测试,新覆盖的行还是灰色——不是没跑成功,而是 WebStorm 默认没把新结果“加进去”。它每次运行都会弹提示,但很多人手快点了 Replace 或直接关掉对话框。
- 首次运行时弹出的对话框里:
Add to active suite (a)是日常开发推荐选项,多次结果叠加,“任一测试覆盖过就算覆盖” -
Replace active suite (r)适合调试单个模块,但会清空之前所有数据 - 误点
Discard new coverage (c)?删掉.idea/coverage/目录,重启 WebStorm 即可重来 - Vitest 用户特别注意:WebStorm 调用的是封装版
vitestrunner,和 CLI 的vitest --coverage走不同配置路径,include/exclude规则不一致会导致覆盖率数值差异
最常被忽略的一点:覆盖率高亮只对「当前已打开的文件」实时生效。改完代码、新增测试后,如果那个文件没在编辑器标签页里开着,即使覆盖率数据更新了,你也看不到颜色变化。











