JavaScript 中怎么用 SonarQube 展示前端代码覆盖率历史趋势-js教程-PHP中文网

sonarqube通过持续上传标准lcov格式覆盖率报告（如jest生成的coverage/lcov.info），配合一致projectkey、分支标识及ci自动化分析，自动累积生成历史趋势图；需在sonar-project.properties中正确配置sonar.javascript.lcov.reportpath，并确保扫描日志出现“coverage data has been processed”。

javascript 中怎么用 sonarqube 展示前端代码覆盖率历史趋势

要在 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 中，显式声明覆盖率路径和源码映射：

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><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7155" title="Browser Js"><img
														src="https://img.php.cn/upload/skill/000/000/081/179134209757570.jpg" alt="Browser Js" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill7155" title="Browser Js" class="overflowclass">Browser Js</a>
													<p class="overflowclass">轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill7155" title="Browser Js" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><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。