在编辑器里直接看到代码覆盖率,其实没那么玄乎
VSCode 自己并不生成覆盖率数据,也不负责解析它——它只做一件事:读取已有的报告,然后在编辑器里给你涂上颜色标记。绿黄红三种颜色,哪行代码跑了,哪行没跑,一眼就能看出来。
但想实现这个效果,有两个硬性条件必须同时满足:测试框架要真的成功生成了 lcov.info(或者 XML 格式的报告),而且插件的配置路径要能精准地找到这份报告。少一个都不行。

Coverage Gutters 没反应?问题往往出在这几个地方
首先要明确一点:插件不会帮你跑测试,也不会自动生成报告——它就是个显示器。你看到空白、灰色标记,或者直接报错“Cannot find coverage file”,大概率是下面某个环节没打通。
- 根本没跑过测试,项目目录下
coverage/lcov.info这个文件就不存在(先检查一下目录是否存在,或者文件是不是空的) - 配置文件里漏了关键参数:比如
jest.config.js没写collectCoverage: true,或者没指定coverageReporters: ["lcov"] - VSCode 工作区设置里,
coverageGutters.coverageFileNames指向了错误路径。比如你写成了"coverage/coverage.lcov",但实际生成的文件是"coverage/lcov.info",那插件当然找不到 - 项目用的是 Vitest,但没在
vite.config.ts里配coverage: { provider: "v8", reporter: ["lcov"] }
Jest + vscode-jest + Coverage Gutters 这个组合,配置要一次对齐
这三者配合起来最稳定,但参数必须对齐。尤其要注意 coverageProvider 必须设为 "v8"。在 Node 14+ 环境下,如果你用了 "babel",它会静默失败,导致 lcov.info 文件里没有行级覆盖数据——说白了就是白忙一场。
/* jest.config.js */
module.exports = {
collectCoverage: true,
coverageProvider: "v8", // 关键!不是 "babel"
coverageDirectory: "coverage",
coverageReporters: ["lcov", "text-summary"],
collectCoverageFrom: ["src/**/*.{js,ts}"]
};
同时,.vscode/settings.json 里也要启用相关设置:
{
"jest.coverageEnabled": true,
"coverage-gutters.coverageFileNames": ["${workspaceFolder}/coverage/lcov.info"]
}
改完之后,必须手动执行一次 Jest: Start Runner(Cmd/Ctrl+Shift+P 调出命令面板),否则 watcher 不启动,插件也不会去读那个文件。
Python / C/C++ 项目,别套用 JS 那套路径逻辑
不同语言工具链输出的覆盖率格式和默认路径差异很大,硬改 lcov.info 路径往往白忙一场。
- Python 用
pytest-cov,默认输出的是.coverage(二进制格式),Coverage Gutters 不认这个。得加--cov-report=xml参数,让它生成coverage.xml,然后在插件配置里写"coverage-gutters.coverageFileNames": ["coverage.xml"] - C/C++ 用
gcovr或lcov,通常输出coverage/lcov.info。但编译时必须带-fprofile-arcs -ftest-coverage参数,而且不能开-O2以上的优化,否则行号映射会错乱 - VSCode 的 Python 扩展自带覆盖率按钮,点“Run Test with Coverage”会自动调
pytest --cov并尝试高亮,比手动配 Coverage Gutters 省事得多
最容易被忽略的一个细节:所有路径配置都基于 ${workspaceFolder}。但如果你用多根工作区(multi-root workspace),coverageGutters 默认只查第一个文件夹。想让其他子项目也能显示覆盖率,就得在每个文件夹的 .vscode/settings.json 里单独指定 coverageFileNames。否则,某个子项目明明跑出了 lcov.info,插件也视而不见。