sonarqube如何扫描react

配置 SonarQube 扫描 React 项目

确保 SonarQube 服务器已启动并运行，并安装必要的插件（如 JavaScript/TypeScript 插件）。在项目中安装 SonarScanner 工具，可通过 npm 或全局安装。

npm install -D sonarqube-scanner

创建 SonarQube 配置文件

在项目根目录创建 sonar-project.properties 文件，配置以下关键参数：

sonar.projectKey=your-project-key
sonar.projectName=Your React Project
sonar.projectVersion=1.0
sonar.sources=src
sonar.exclusions=/node_modules/,/coverage/
sonar.tests=src
sonar.test.inclusions=/*.test.js,/*.test.jsx
sonar.javascript.lcov.reportPaths=coverage/lcov.info

集成测试覆盖率报告

确保项目已配置测试框架（如 Jest）并生成覆盖率报告。在 package.json 中添加覆盖率生成命令：

"scripts": {
  "test:coverage": "jest --coverage"
}

运行测试生成 LCOV 报告后，确保 sonar-project.properties 中的 sonar.javascript.lcov.reportPaths 指向正确路径。

运行 SonarQube 扫描

通过命令行执行扫描，或创建自定义脚本。在 package.json 中添加扫描命令：

"scripts": {
  "sonar": "sonar-scanner"
}

执行以下命令启动扫描：

npm run test:coverage && npm run sonar

处理 TypeScript 项目

如果是 TypeScript 项目，需额外配置：

sonar.typescript.lcov.reportPaths=coverage/lcov.info
sonar.exclusions=/node_modules/,/*.d.ts

分析扫描结果

扫描完成后，访问 SonarQube 服务器控制台查看结果。重点关注代码异味、漏洞、重复代码和安全热点等问题。根据报告中的建议进行代码优化和改进。