1.介绍

本文将介绍如何安装sonarQube7.8环境以及sonar-scanner,扫描本地Vue代码

2.为什么要使用sonarQube?

SonarQube ® 是一种自动代码审查工具,用于检测代码中的错误、漏洞和代码异味。它可以与您现有的工作流程集成,以实现跨项目分支和拉取请求的持续代码检查。(本文没有介绍红色字体这部分功能)

说一下个人理解:sonarQube对于两部分人非常受用:

一是项目管理人员,团队管理人员第一要关注的是项目进度,其次重要的就是代码质量了,代码质量如果人工来审查的话非常消耗时间,所以使用工具sonarQube是一个明智的选择;

二是想要成长的开发工程师:sonarQube能将代码汇总隐藏可能会出现问题的代码以及冗余代码检测出来并提供标准的书写方式,按照提示去修改有问题的代码,会发现你的代码会变得简洁、规范。

3.安装

3.1 jdk与sonarQube版本对应问题

使用sonarLint检测代码需要jdk环境,而sonarLint的版本需要对应jdk版本,国内相当多的团队还在使用jdk1.8版本,这里以jdk1.8版本来举例。
jdk1.8最高支持sonaQube7.8版本
 

3.2 jdk1.8安装配置环境变量(如已安装可略过)

安装步骤:详看这篇博客,写的非常详细 http://t.csdn.cn/Fd3cg

3.3 sonarQube下载

下载地址:Download | SonarQube

进入网页后滑到最下方,选择历史版本7.8,选择社区版(社区版是免费的)

 下载好后解压到你想要的目录

找到你解压的目录到bin/windows-x86-64 

点击StartSonar.bat 

这时sonarQube任务正在启动,这个过程大概在20秒到40秒左右;

 如果cmd命令行出现了这些指令证明已经启动成功;

打开浏览器输入http://localhost:9000;这时会进入页面如下:当然这时你们展示是英文的,下一步添加翻译包

3.4 sonarQube安装中文包

sonarqube和中文插件包版本需要对应,此版本对应插件1.28

Release sonar-l10n-zh-plugin-1.28 · xuhuisheng/sonar-l10n-zh · GitHub
将文件内的sonar-l10n-zh-plugin-1.28.jar包放到sonarqube-7.8\extensions\plugins内重启sonarQube服务 
Windows重启服务方式方式: 打开任务管理器 将几个java.exe进程杀掉 重新运行 StartSonar.bat 文件即可

3.5 安装sonar-scanner以及配置

点击下方链接下载sonar-scanner4.3版本(因为博主使用的是这个版本已经踩过坑)

SonarScanner | SonarQube Docshttps://docs.sonarqube.org/latest/analysis/scan/sonarscanner/

 找到4.3下载对应系统版本; 

下载好后将压缩包解压到你想要解压的位置

配置环境变量:

SONAR_RUNNER_HOME
F:\software\sonar-scanner-4.3.0.2102-windows(这里填入你自己的文件所在路径

选择path变量新增变量 

%SONAR_RUNNER_HOME%\bin

打开sonar-scanner-4.3.0.2102-windows\conf目录内有sonar-scanner.properties 文件
将下面两行代码前面的#去掉(也就是取消这两行的注释)。

sonar.host.url=http://localhost:9000   

sonar.sourceEncoding=UTF-8

做到这一步安装就全部完成了,这时重启电脑让环境变量生效;

4 使用

这时已经重启过电脑,需要启动sonarQube任务,重复3.3步骤:找到sonarQube7.8/bin/windows-x86-64 ,点击StartSonar.bat 

等待20~40秒后打开浏览器输入http://localhost:9000; 

点击登录  默认账号admin,密码:admin

点击右上角加号新建项目

 输入项目标识、显示名

点击创建令牌

 点击继续

选择你要检测的语言,选择js

选择操作系统后,会出现下图

 复制上图下方命令到你的项目根目录执行,(注意保存此命令号,检测完成后此命令不会显示)这时会进行检测,稍等2~5分钟后刷新此页面会出现检测结果如下图

查看注释率:

5 总结

至此sonarQube的安装、使用就完成了。再次强调此篇博客只适用于Vue代码检测

检测后端代码以及前端其他框架的一些坑我没有踩。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐