VSCode需配合插件与测试框架生成标准格式覆盖率数据才能实现实时高亮；Coverage Gutters仅渲染已有lcov.info等文件，不生成数据，常见问题源于测试未输出覆盖率、路径不匹配或配置缺失。
VSCode 本身不内置代码覆盖率功能，但能通过插件 + 测试框架的配合实现实时高亮和报告查看。关键不在“装插件”，而在让测试命令输出符合 lcov 或 cobertura 格式的覆盖率数据，并被 VSCode 正确读取。
为什么直接装 Coverage Gutters 插件没反应？
这是最常见卡点：Coverage Gutters（或类似插件）只是“渲染器”，它不运行测试、也不生成数据，只读取已存在的覆盖率文件。如果你没配置测试命令生成 coverage/lcov.info 或 coverage/cobertura-coverage.xml，插件就无从下手。
- 确认你的测试命令（如
npm test）是否带覆盖率参数：对 Jest 是--coverage，对 Vitest 是--coverage+--coverage.provider=v8（v1.6+ 默认用 v8，但旧版需显式指定） - 检查
coverage/目录是否真被生成，且包含lcov.info（Jest 默认）或cobertura-coverage.xml（某些 CI 工具偏好） - Coverage Gutters 默认只找
coverage/lcov.info；若你用的是其他路径或格式，必须在 VSCode 设置里改coverage-gutters.coverageFilePaths
如何让 Jest/Vitest 输出 lcov 并被 VSCode 识别？
以 Jest 为例，jest.config.js 中至少要保证：
module.exports = {
collectCoverage: true,
coverageDirectory: "coverage",
coverageReporters: ["lcov", "text-summary"],
};
Vitest 则需在 vitest.config.ts 中启用并指定格式：
export default defineConfig({
test: {
coverage: {
enabled: true,
provider: "v8", // 或 "istanbul"
reporter: ["lcov", "text-summary"],
reportsDirectory: "./coverage",
}
}
});
-
reporter: ["lcov"]是必须项，缺了就不会生成lcov.info - 如果用
provider: "istanbul"，需额外安装vitest-coverage-istanbul包 - VSCode 插件默认每 3 秒轮询一次
lcov.info修改时间，保存测试后稍等 1–2 秒再看行号旁的绿/红条
遇到 “No coverage data found” 却有 lcov.info 怎么办？
路径不匹配是最可能原因。Coverage Gutters 不会自动猜路径，尤其当项目是 monorepo 或 coverage 目录在子包里时。
- 打开 VSCode 设置（Ctrl+,），搜
coverage-gutters.coverageFilePaths，改成绝对路径或工作区相对路径，例如：["./packages/my-lib/coverage/lcov.info"] - 确保 VSCode 当前打开的是**工作区根目录**（不是某个子文件夹），否则相对路径会错位
- 检查
lcov.info文件头是否含有效路径：用文本编辑器打开它，第一行应类似SF:/full/path/to/src/index.ts；如果路径是SF:src/index.ts（相对路径），Coverage Gutters 可能无法映射到编辑器里的文件 —— 此时需在 Jest 配置中加collectCoverageFrom: ["src/**/*.{ts,tsx}"]并确保rootDir设置正确
真正麻烦的从来不是插件装不上，而是覆盖率数据生成路径、源码路径、VSCode 打开路径三者没对齐。调通前先手动跑一遍测试命令，确认 coverage/lcov.info 存在且内容可读，再让插件介入。
