安装 Coverage Gutters 插件后，通过 Jest 等工具生成 lcov.info 文件，配置插件路径并执行 Show Coverage 命令，即可在 vscode 中以绿、黄、红标记直观查看代码覆盖情况。

使用 VSCode 进行代码覆盖率分析，可以通过 Coverage Gutters 插件直观地查看哪些代码被测试覆盖，哪些未被覆盖。这对于提升测试质量、发现遗漏路径非常有帮助。

安装 Coverage Gutters 插件

在 VSCode 扩展市场中搜索 Coverage Gutters，由 ryanluker 开发的插件。点击安装即可。

安装完成后，VSCode 会在编辑器的侧边栏（gutter 区域）显示颜色标记，表示对应行的测试覆盖情况：

• 绿色：该行被测试覆盖
• 黄色：该行部分覆盖（如条件分支未完全覆盖）
• 红色：该行未被任何测试覆盖

生成覆盖率数据文件

Coverage Gutters 本身不生成覆盖率数据，它依赖外部测试工具生成的报告文件（通常是 lcov.info 或 coverage-final.json 等）。

以 node.js + Jest 项目为例：

• 确保 jest.config.js 中启用了覆盖率收集：

module.exports = {
  collectCoverage: true,
  coverageReporters: [‘lcov’, ‘text’],
  coverageDirectory: ‘coverage’
};

• 运行测试并生成报告：

npm test — –coverage

• 执行后会在项目根目录生成 coverage/lcov.info 文件

配置 Coverage Gutters 显示覆盖信息

默认情况下，插件会查找项目根目录下的 lcov.info。如果路径不同，需手动配置。

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

打开 VSCode 设置（settings.json），添加：

“coverage-gutters.lcovname”: “lcov.info”,
“coverage-gutters.coverageFileNames”: [
  “${workspaceFolder}/coverage/lcov.info”
]

然后按下 Ctrl+Shift+P，输入 “Coverage Gutters: Show”，回车即可在编辑器中看到覆盖标记。

常用操作命令

通过命令面板（Ctrl+Shift+P）可执行以下操作：

• Show Coverage：显示当前覆盖率
• Reload Coverage：重新加载最新报告
• Clear Coverage：清除标记
• Watch Coverage：监听文件变化自动刷新（适合开发中持续反馈）

基本上就这些。配合 Jest、vitest、Cypress 等工具生成标准覆盖率报告，Coverage Gutters 能让测试覆盖情况一目了然。