记录SonarQube在工作项目中的使用(前端项目)

1,112 阅读2分钟

本人目前负责公司的官网项目,此项目经多人接手,代码风格不同也导致一些问题的出现,目前在不断优化中,为了更加直观看到整体项目的优化进度使用了SonarQube这个开源的平台。

SonarQube 是一个开源的代码分析平台, 用来持续分析和评测项目源代码的质量。通过SonarQube我们可以检测出项目中重复代码, 潜在bug, 代码规范,安全性漏洞等问题, 并通过SonarQube web UI展示出来。

话不多说开整(最新的JDK21有问题,下面步骤版本最好和我一致)

1.下载javaSDK,我选择的是17

官网: www.oracle.com/java/techno…

image.png

下载完后需要配置下系统变量(win + s 搜env)

image.png

image.png

然后在path中配置

image.png

这里有个坑 自己设置的java变量需要在自动生成的上面,不然java --version查不到,如图

image.png

正确的如下

image.png

2.下载SonarQube

地址如下:www.sonarsource.com/products/so… 选择社区版本

image.png

安装结束后找到下载的目执行bat文件

image.png

会自动打开命令框执行完毕后应该是下面结果,UI地址是http://127.0.0.1:9000

image.png

3.安装sonar-scanner

前端项目是需要安装sonar-scanner的,地址如下:docs.sonarsource.com/sonarqube-s…

image.png

安装完毕后也是需要配置下系统变量

image.png

检查下是否配置成功
sonar-scanner -v

image.png

全部准备完毕,进入UI界面 http://127.0.0.1:9000 (初始是英文,后面会讲如何汉化)

image.png

新建本地项目

image.png

按照要求自己输入

image.png

image.png

image.png

令牌自己保存好

image.png

配置下环境变量

image.png

我按照推荐的install会报错实际连接到官网了,token对不上报错401),你们也可以试下, 但由于我们本地安装了sonar-scanner,直接在想检查的项目的根目录执行scanner检测命令就好

screencapture-127-0-0-1-9000-tutorials-2025-05-07-16_35_06.png

先配置下sonar-scanner的配置文件

image.png

projectKey就是新建项目时候的项目标识

image.png

接下来就是执行扫描命令,去项目根目录,输入cmd启动命令框

sonar-scanner.bat -D"sonar.token=sqp_xxxxxxxxxxxxxx"

扫描结束正确结果如图

image.png

screencapture-127-0-0-1-9000-dashboard-2025-05-07-16_47_40.png

4.汉化

汉化包地址如下:github.com/xuhuisheng/… 我们的SonarQube比较新,所以汉化包也下载最新的

image.png

把汉化包放到sonarqube安装包的plugin文件夹下,再重新启动bat即可。

image.png

image.png

切记切记不要直接关掉bat启动的命令框,因为会启动其他进程导致再启动失败,如果你直接关闭了可以按照下面操作,关闭除jps的其他进程。

C:\>jps -l
11392 org.jetbrains.idea.maven.server.RemoteMavenServer36
9136 org.sonar.ce.app.CeServer
21588 org.elasticsearch.bootstrap.Elasticsearch
3636
18328 org.sonar.server.app.WebServer
15612 sun.tools.jps.Jps
25484 org.tanukisoftware.wrapper.WrapperSimpleApp

CC:\>taskkill /PID xxxx /F

以上就是我本地部署SonarQube的全流程,中间其实踩了很多坑,不过按照我的步骤大概率是能一次启动的,如果有其他问题可以留言讨论。