首先使用支持覆盖率的测试工具生成报告,再通过VSCode插件可视化。例如JavaScript可用Jest生成lcov.info,Python用pytest-cov,Java用JaCoCo;然后安装Coverage Gutters或Istanbul Coverage等插件,自动读取报告文件并在代码中以颜色标记覆盖情况——绿色已覆盖、红色未覆盖、黄色部分覆盖;最后点击状态栏覆盖率图标可跳转详细HTML报告,直观查看各文件覆盖详情。

VSCode 本身不直接提供代码覆盖率功能,但通过扩展和测试框架的配合,可以直观地查看代码覆盖率。关键是使用支持覆盖率的测试工具,并搭配可视化插件。
安装并配置测试框架
多数语言需要先设置能生成覆盖率报告的测试工具:
-
JavaScript/TypeScript:使用 Jest 或 Vitest,配合
--coverage参数生成 Istanbul 格式的报告(如lcov.info) -
Python:使用 pytest-cov,运行
pytest --cov生成覆盖率数据 - Java:结合 JaCoCo 使用,生成 XML 或 HTML 报告
确保测试执行后在项目中生成覆盖率文件,常见路径如 coverage/lcov.info 或 build/reports/jacoco/test/jacocoTestReport.xml。
使用覆盖率可视化扩展
在 VSCode 中安装对应插件,将覆盖率信息叠加到代码上:
- Coverage Gutters:支持多种语言,读取 lcov 等格式,在编辑器侧边显示覆盖标记
-
Istanbul Coverage:专为 JavaScript/TypeScript 设计,自动识别
coverage/目录下的报告 - Python Test Explorer + Coverage Viewer:Python 用户可组合使用
安装后,重启或重新加载窗口,插件通常会自动检测报告并高亮代码——绿色表示已覆盖,红色表示未覆盖,黄色为部分覆盖。
查看覆盖率详情
点击状态栏中的覆盖率图标(如“Coverage: 85%”),可快速跳转到 HTML 报告页面,查看每个文件的具体覆盖情况。也可在资源管理器中打开 coverage/index.html 手动浏览。
部分插件支持命令面板操作,例如运行 “Coverage: Show Editor Decorations” 来刷新显示。
基本上就这些。只要测试能出报告,VSCode 配合插件就能让你一眼看出哪些代码没测到。










