VSCode 需通过 Coverage Gutters 插件读取 Jest/Vitest 生成的 lcov.info 才能显示覆盖率颜色；运行 jest --coverage 默认不生成该文件，须加 --coverageReporters=lcov 或 Vitest 中配置 reporter: ['lcov']，且路径、文件名、SF 行路径需严格匹配。

VSCode 本身不生成也不解析覆盖率数据，必须由 Jest/Vitest 等框架输出 lcov.info，再靠 Coverage Gutters 插件读取并染色——没这一步，编辑器里永远看不到红绿标记。

为什么运行了 jest --coverage 却没颜色？

常见错误不是插件没装，而是报告根本没生成或路径不对：

• jest --coverage 默认只输出文本和 HTML，不生成 lcov.info；必须显式加 --coverageReporters=lcov
• 若用 Vitest，vitest.config.ts 中必须配置 coverage: { reporter: ['lcov'] }，光写 enabled: true 不够
• 生成的 lcov.info 必须在 coverage/lcov.info（默认路径），改到 out/coverage/lcov.info 就得手动配 "coverage-gutters.lcovname" 设置项
• 检查 lcov.info 里的 SF: 行路径是否和 VSCode 当前打开的 .js 或 .ts 文件路径完全一致（含大小写、相对/绝对）

如何让覆盖率标记随保存自动刷新？

手动按 Coverage Gutters: Refresh 太慢，推荐走自动化链路：

OC SSH Tunnel Node Recovery

诊断并恢复通过 SSH 隧道连接的 OpenClaw 节点。用于解决配对必需错误、隧道冲突、远程端点错误以及 SSH 目标配置错误等问题。

下载

• 在 .vscode/tasks.json 中定义一个测试任务，设 "isBackground": true 并配好 problemMatcher，确保它能识别测试完成信号
• 在 .vscode/launch.json 的 preLaunchTask 或 postDebugTask 中调用该任务（注意：右键“Run Test”菜单默认不触发 Coverage Gutters）
• 开启插件自动刷新："coverage-gutters.autoRefresh": true，但前提是任务执行后 lcov.info 确实被重写（Jest 的 --watch 模式不保证每次变更都覆盖报告，建议用 onchange 或 nodemon 监听源码+测试文件并触发完整命令）

Coverage Gutters 渲染失败的三个典型现象

不是插件坏了，而是数据链断在某个环节：

立即学习“前端免费学习笔记（深入）”；

• 状态栏显示 No coverage data found → 检查 coverage/lcov.info 是否存在、是否为空、是否被 Git 忽略（.gitignore 里别写 coverage/ 后又忘了 !coverage/lcov.info）
• 部分文件有颜色，部分全白 → lcov.info 中的 SF: 路径用了绝对路径（如 /home/user/project/src/index.js），而 VSCode 打开的是相对路径；解决方法是在 jest.config.js 加 collectCoverageFrom: ["src/**"] 并确保 rootDir 正确
• TS 项目染色错位（标到空行或注释上）→ tsconfig.json 的 outDir 和 sourceMap 影响源码映射，覆盖率工具依赖原始 .ts 路径，别让构建产物干扰 collectCoverageFrom 的匹配逻辑

最常被忽略的一点：覆盖率可视化不是“配完就一劳永逸”的功能，它高度依赖测试命令输出的报告格式、路径、内容结构三者稳定。哪怕只是把 jest --coverage 换成 npm test -- --coverage，也可能因 npm 脚本透传参数失败导致 lcov.info 缺失——务必在终端直接执行最终命令验证输出。