安装 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中启用了覆盖率收集：
collectCoverage: true,
coverageReporters: ['lcov', 'text'],
coverageDirectory: 'coverage'
};
- 运行测试并生成报告：
- 执行后会在项目根目录生成
coverage/lcov.info文件
配置 Coverage Gutters 显示覆盖信息
默认情况下，插件会查找项目根目录下的 lcov.info。如果路径不同，需手动配置。
打开 VSCode 设置（settings.json），添加：
"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 能让测试覆盖情况一目了然。
