首先需配置测试框架和覆盖率工具，在项目中安装Jest并设置--coverage参数生成报告，然后通过VS Code的Coverage Gutters等插件读取lcov.info文件，在编辑器中以红绿条形式直观展示代码行的测试覆盖情况，最后可结合监听模式实现保存时自动更新视图。

在 VS Code 中可视化代码测试覆盖率，能帮助你快速识别哪些代码被测试覆盖，哪些还没有。这个功能对提升代码质量和维护测试完整性非常有用。实现这一目标的核心是结合测试框架、覆盖率工具和 VS Code 插件。

安装并配置覆盖率工具

要看到测试覆盖率，首先需要使用像 Jest 、Mocha + Istanbul 或 Vitest 这样的工具来运行测试并生成覆盖率报告。以 Jest 为例：

• 在项目中安装 Jest：npm install --save-dev jest
• 在 package.json 中添加测试脚本："test": "jest --coverage"
• 运行测试后，Jest 会生成一个 coverage 文件夹，包含 HTML 或其他格式的覆盖率报告

使用 VS Code 插件直接查看覆盖率

VS Code 提供了多个插件可以直接在编辑器中高亮显示覆盖率情况：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• Coverage Gutters：支持 lcov、cobertura 等格式，在代码行号旁显示红绿条，直观展示覆盖状态
• 安装后，通过命令面板（Ctrl+Shift+P）运行 Coverage Gutters: Show Coverage 即可加载并可视化
• 配合 Jest 的 --coverage 输出的 lcov.info 文件，插件能自动定位并渲染

自动更新覆盖率视图

为了提升开发效率，可以设置监听测试运行，自动刷新覆盖率显示：

• 在 VS Code 中配置任务或使用插件的 watch 模式
• 例如，启动 Jest 的 --watch 模式，每次保存代码时重新生成 lcov.info
• Coverage Gutters 支持文件变化监听，可设为自动重载

基本上就这些。只要你的测试框架能输出标准覆盖率文件，再搭配合适的插件，就能在 VS Code 里清晰看到每行代码的覆盖情况。不复杂但容易忽略的是路径配置和文件格式匹配，确保输出路径正确，插件才能读取到数据。