前端项目使用 sonarQube 代码扫描检测 2024

介绍

SonarQube是一个开源的代码质量管理平台，它用于持续检查代码质量，并提供实时反馈，以帮助开发团队改进其代码。它可以帮助开发人员发现代码中的潜在问题、漏洞和代码异味，从而提高代码的可维护性、可读性和安全性。
SonarQube可以进行静态代码分析，检查代码中的bug、漏洞、代码重复、代码规范违反等问题。它还提供了可视化的报告和仪表板，帮助团队了解代码质量的状况，并及时采取行动。
一些知名的公司和项目，如SonarSource、Alibaba、Google、Apache等，都使用SonarQube来提高其代码质量和安全性。SonarQube已成为许多软件开发团队中不可或缺的工具之一。

准备

本文主要介绍如何使用 SonarQube 扫描前端代码

• Java 建议使用 11 及以上的版本
• SonarQube 新版本不支持 Java 8，想要支持Java 8 就只能安装 SonarQube 7 及之前的版本
• SonarQube Scanner 新版本不支持 Java 8，想要支持Java 8就只能安装 SonarQube Scanner4 及之前的版本。

它们与用户之间的关系是sonar扫描任务运行代码质量检测工具(例如Checkstyle， FindBugs，PMD 等）分析代码，将分析结果写入到与sonar服务器绑定的数据库，sonar服务器会通过不同语言的插件算法对代码分析结果进行再加工，最终将代码分析加工结果以可视化，可度量的方式展示给用户。

Java 安装

https://www.oracle.com/java/technologies/downloads/#java11，进入这个连接，选择自己的操作系统去安装 java 即可，安装成功后，需要配置环境变量等我就不多说了。这里我安装的是 java17 的版本。

SonarQube 安装

进入这个链接：https://www.sonarsource.com/products/sonarqube/downloads/，下载免费的社区版。

下载成功后，进入下图中所示的目录，找到图中的bat文件双击执行，自然会跳出指令窗口运行 SonarQube。

运行成功：

注意
在运行 SonarQube 有个很坑的点，就是不兼容老版本的 java，我一开始就是 java 8，发现不兼容，就想下载旧版本的 SonarQube，毕竟不想装一遍 java，但没想到这个 SonarQube 官网貌似不提供旧版本，只能安装 2024/1/4 最新的 10.3 版本，如果有人找到旧版本，麻烦给个链接留言，感谢。

SonarQube Scanner 安装

前端项目想要执行 SonarQube 的扫描，就需要用这个 SonarQube Scanner 工具。而 java 语言的扫描则不需要那么麻烦转这个东西，直接用 Maven 执行 SonarQube 扫描即可。
Java的扫描

JS其它语言的扫描，需要 SonarQube Scanner

所以需要进入这个链接 https://docs.sonarsource.com/sonarqube/latest/analyzing-source-code/scanners/sonarscanner/，点击 show more 后就变成下图所示，有很多版本供你选择下载

下载成功后，我们需要去配置下环境变量 SONAR_RUNNER_HOME

然后再添加下 path 变量

在指令窗口中执行如下命令检查是否安装成功

 sonar-scanner -v

使用

一切准备好后，我们就可以开始使用了。
1、首先进入 sonarQube 开启的系统创建项目，默认初始账号和密码就是 admin 和 admin。

点击这去创建项目

输入项目名和项目唯一标识

使用全局设置

回到首页就可以看到我们刚刚创建的 wh-components 项目了。

点击进入项目，我们本次就通过本地去分析扫描我们的代码

生成我们的token

生成 token 成功后，点击 continue 继续

选择我们扫描的语言和系统，然后就会出现对应的命令，把命令复制到项目的指令窗口执行即可。

sonar-scanner.bat -D"sonar.projectKey=wh-component" -D"sonar.sources=." -D"sonar.host.url=http://localhost:9000" -D"sonar.token=sqp_cc700aa66d2d941949970a3ed64ce47d218e066b"

执行命令

等待扫描完成后，回到我们的 sonarQube 系统查看扫描结果即可

补充

1、其实除了通过命令执行之外，还可以在项目中放 sonar-project.properties 文件
比如上面执行的指令

sonar-scanner.bat -D"sonar.projectKey=wh-component" -D"sonar.sources=." -D"sonar.host.url=http://localhost:9000" -D"sonar.token=sqp_cc700aa66d2d941949970a3ed64ce47d218e066b"

其实对应的就是

#sonarqube服务器地址，默认为9000
sonar.host.url=http://localhost:9000
#sonarqube用户名
sonar.login=admin
#sonarqube密码
sonar.password=passw0rd
sonar.token=sqp_cc700aa66d2d941949970a3ed64ce47d218e066b
#项目唯一标识（不能出现重复）
sonar.projectKey=wh-component
#项目名称
sonar.projectName=wh-component
#源代码目录
sonar.sources=.
# 用逗号分割来指定多个目录
# sonar.sources=src, tests
# 测试代码目录
# sonar.tests = dist
#语言
sonar.language=js
# sonar.language=javascript
#源代码文件编码
sonar.sourceEncoding=UTF-8

# 更多参数：https://docs.sonarqube.org/latest/analysis/analysis-parameters/

有了这个文件之后，只需执行 sonar-scanner 指令即可，不需要后面加长长的一大堆内容。
2、都是英文看不懂？
sonarQube 支持插件，我们可以通过装中文插件来实现中文版的 sonarQube
进入官方的插件列表 ：https://docs.sonarsource.com/sonarqube/latest/instance-administration/plugin-version-matrix/
找到这个 Chinese Pack

跳转到对应插件的 GitHub 后，点击 releases 查看所有版本

找到自己 sonarQube 对应的插件版本下载，我的是 10 就下载 10 的了

将下载好的插件放入如下目录中

重启我们的sonarQube即可。

这样就变成中文的啦！

参考文章

Win系统手把手教你用SonarQube+Jenkins搭建–前端项目–代码质量管理平台