SonarQube通过持续上传标准lcov格式覆盖率报告（如Jest生成的coverage/lcov.info），配合一致projectKey、分支标识及CI自动化分析，自动累积生成历史趋势图；需在sonar-project.properties中正确配置sonar.javascript.lcov.reportPath，并确保扫描日志出现“Coverage data has been processed”。
要在 SonarQube 中展示 JavaScript（前端）代码覆盖率的历史趋势，核心是：每次分析时**稳定上传统一格式的覆盖率报告**，并确保项目标识、分支、分析时间等上下文一致。SonarQube 本身不直接执行测试或生成覆盖率，它依赖外部工具（如 Jest、Istanbul、Vitest）产出的报告，并通过 Scanner 解析后持久化指标——历史趋势图由此自动累积生成。
1. 用 Istanbul 或 Jest 生成标准 lcov 格式报告
SonarQube 原生支持 lcov（即 lcov.info）格式，这是最推荐的方式。以 Jest 为例，在 jest.config.js 中配置：
module.exports = {
collectCoverage: true,
coverageDirectory: "coverage",
coverageReporters: ["lcov"], // 关键：只保留 lcov，避免生成其他格式干扰
// 可选：精准控制覆盖范围
coveragePathIgnorePatterns: ["/node_modules/", "/tests/"]
};
运行 jest --coverage 后，会在 coverage/lcov.info 生成标准文件。确保该路径在后续 Sonar 扫描中被正确识别。
2. 配置 sonar-scanner 正确读取覆盖率文件
在项目根目录的 sonar-project.properties 中，显式声明覆盖率路径和源码映射：
立即学习“Java免费学习笔记（深入）”；
sonar.projectKey=my-web-app sonar.projectName=My Frontend App sonar.sourceEncoding=UTF-8 sonar.sources=src sonar.tests=src <h1>关键：告诉 SonarQube 覆盖率文件在哪</h1><p>sonar.javascript.lcov.reportPaths=coverage/lcov.info</p><h1>（可选但推荐）提升路径匹配准确性，尤其对 monorepo 或构建后路径</h1><p>sonar.javascript.lcov.reportPath=coverage/lcov.info sonar.javascript.exclusions=<strong>/node_modules/</strong>,*<em>/</em>.test.js,<strong>/tests/</strong></p>
注意：sonar.javascript.lcov.reportPaths 是旧版属性名（v7.x），新版本（v8+）推荐用 sonar.javascript.lcov.reportPath；若同时存在多个报告（如多环境），可用逗号分隔的 reportPaths。
3. 每次 CI 构建都触发完整分析（含覆盖率）
历史趋势的前提是**持续、可比、带时间戳的分析记录**。不要只在本地跑一次，而应在 CI（如 GitHub Actions、GitLab CI）中固化流程：
- 安装依赖 → 运行测试并生成
coverage/lcov.info→ 执行sonar-scanner - 确保每次分析使用相同
sonar.projectKey和一致的sonar.branch.name（例如main或develop） - 避免手动跳过覆盖率（如误加
-Dsonar.coverage.exclusions=...禁用解析） - 检查扫描日志是否出现
Parsing of lcov file和Coverage data has been processed成功提示
4. 在 SonarQube UI 查看趋势图
完成至少 3 次带覆盖率的分析后：
- 进入项目 → Quality Gate 或 Measures → 切换到 Code Coverage 指标
- 点击右上角 History 图标（折线图按钮），即可看到随时间变化的覆盖率曲线
- 支持按分支筛选、拖动时间范围、对比不同分析（hover 查看具体日期、提交 SHA、覆盖率数值）
- 若图表为空，请检查：是否所有分析都成功上传了 lcov 文件？是否用了同一 projectKey？是否启用了 Quality Profile 中的覆盖率规则？
不复杂但容易忽略的是路径一致性与自动化频率——只要每次 CI 流水线稳定产出并上报 lcov，SonarQube 就会自动拼出清晰的趋势图，无需额外插件或定制开发。
