sonarqube如何扫描react
使用 SonarQube 扫描 React 项目
确保已安装 SonarQube 服务器和 SonarScanner 工具。SonarScanner 可以通过 npm 或独立安装包获取。
安装 SonarScanner 的 npm 包：
npm install -g sonarqube-scanner在 React 项目的根目录下创建 sonar-project.properties 文件，配置 SonarQube 扫描参数：
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
sonar.sourceEncoding=UTF-8运行 SonarScanner 进行扫描：
sonar-scanner配置 React 项目的代码覆盖率
SonarQube 需要代码覆盖率数据来生成报告。使用 Jest 或其他测试工具生成覆盖率报告，并确保输出 LCOV 格式。
在 package.json 中配置 Jest 以生成覆盖率报告：
"scripts": {
"test": "jest --coverage"
}运行测试并生成覆盖率报告：
npm test集成 SonarQube 到 CI/CD 流程
在 CI/CD 流程中集成 SonarQube 扫描，确保每次代码提交或合并时自动执行扫描。例如，在 GitHub Actions 中添加以下步骤：
- name: SonarQube Scan
run: sonar-scanner
env:
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}解决常见问题
如果扫描时遇到 ESLint 或 TypeScript 相关错误，确保项目中已安装必要的依赖：
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin对于 TypeScript 项目，在 sonar-project.properties 中添加：
sonar.typescript.lcov.reportPaths=coverage/lcov.info查看扫描结果
扫描完成后，登录 SonarQube 服务器查看分析结果。SonarQube 会提供代码质量指标、漏洞、代码异味和测试覆盖率等详细报告。根据报告中的建议修复问题，优化代码质量。
