转载

细说Sonar之——前端接入篇

sonar是一个代码质量管理的开源平台,用于管理源代码的质量,通过插件形式,可以支持包括java、C#、JavaScript等二十余种编程语言的代码质量管理与检测。

sonar是从七个维度检测代码质量:

1) 不遵循代码标准sonar可以通过PMD,CheckStyle,Findbugs等代码规则检测工具规范代码编写

2) 潜在的缺陷sonar可以通过PMD,CheckStyle,Findbugs等代码规则检测工具检测出潜在的缺陷

3) 糟糕的复杂度分布文件、类、方法等,如果复杂度过高将难以改变,这会使得开发人员难以理解它们,且没有自动化的单元测 试,对于程序中的任何组件的改变都将可能导致需要全面的回归测试

4) 重复显然程序中包含大量复制粘贴的代码是质量低下的,sonar可以展示源码中重复严重的地方

5) 注释不足或者过多没有注释将使代码可读性变差,特别是当不可避免出现人员变动时,程序的可读性大幅度下降,而过多的注释又会使得开发人员将精力过多的花费在阅读注释上,亦违背初衷

6) 缺乏单元测试sonar可以很方便地统计并展示单元测试覆盖率

7) 糟糕的设计通过sonar可以找出循环,展示包与包、类与类之间相互依赖关系,可以检测自定义的架构规则, 可以管理第三方的jar包,可以利用LCOM4检测单个任务规则的应用情况,检测耦合。

2、sonar安装

以mac安装sonar为例,并且只是前端安装sonar的过程,不涉及后端数据等安装

a)安装JDK。

JDK下载网址

细说Sonar之——前端接入篇

先选择接受许可协议【1】然后选择操作系统点击下载【2】

细说Sonar之——前端接入篇

安装步骤: 按照提示安装即可

b)sonar-SonarQube 安装

1) sonar-SonarQube下载地址

2)下载完成:解压缩到 /usr/local

3)终端进入: /usr/local/sonarqube-7.4/bin/macosx-universal-64

4)启动/停止/重启服务

./sonar.sh start
./sonar.sh stop
./sonar.sh restart

5)打开网址 http://localhost:9000 登录admin/admin

6)汉化-> 按图操作

细说Sonar之——前端接入篇

搜索的chinese ,然后install

细说Sonar之——前端接入篇

安装成功后,重启sonarqube服务,再次访问 http://localhost:9000/ ,即可看到中文界面

细说Sonar之——前端接入篇

c) sonar-scanner扫描器安装

1) sonar-scanner扫描器下载地址

细说Sonar之——前端接入篇
2)下载完成:解压缩到 /usr/local

3)修改环境变量 进入/usr/local 如果没有权限的修改文件可以试试下面的方法 打开文件:

sudo vi /etc/profile(需要输入自己的密码)
在 /etc/profile 的末尾添加
PATH=$PATH:/usr/local/sonar-scanner-3.2.0.1227-macosx/bin
export PATH
存文件:wq! 
复制代码
细说Sonar之——前端接入篇

1的标注处,应为你放包的地址。

4) source /etc/profile 运行更改

3、sonar使用

在项目中根目录增加文件sonar-project.properties

细说Sonar之——前端接入篇

a)projectKey 是唯一的

获取projectKey的步骤

1)添加项目

细说Sonar之——前端接入篇

2)根据步骤操作

细说Sonar之——前端接入篇
细说Sonar之——前端接入篇

最终得到projectKey

b) cmd进入项目的根目录执行 sonar-scanner

c) 结果查看

1)总体结果

细说Sonar之——前端接入篇

2)结果列表

细说Sonar之——前端接入篇

4、添加sonar的规则文件

1)用管理帐号登录SonarQube平台;

2)从质量配置菜单进入配置页面;

细说Sonar之——前端接入篇
  1. 在最右边点击创建,创建一个新的配置;
细说Sonar之——前端接入篇
  1. 输入规则名称,选择语言,点击创建;
细说Sonar之——前端接入篇

5)创建完成

细说Sonar之——前端接入篇

6)进入质量配置,找到你选择的语言

细说Sonar之——前端接入篇

7)设置自己添件的规则文件,

细说Sonar之——前端接入篇

8)可以设置自己规则为默认规则,去激活自己想要的规则

添加规则文件的另一种方法:可以直接复制已有规则

细说Sonar之——前端接入篇
细说Sonar之——前端接入篇
细说Sonar之——前端接入篇

两种添加规则文件的区别:

新的规则文件中会有复制那个规则文件里的所有规则。
新建的方式获取规则文件:新的规则文件是空的
复制代码
说明:js,css等几种语言只能在现在已有的规则中去激活你想要的规则,不能添加规则表中没有的规则(目前本人没有找到自定义规则方法),java等语言能通过上传自己定义的规则文件进行自定义规则。
复制代码

查看某种语言已有的规则:

在【代码规则】中选择【语言】可以查看现在已有的规则列表中的所有规则:
复制代码
细说Sonar之——前端接入篇

最后

sonar不仅能够提高代码质量,了解编辑过程中犯过的错误,让代码更有可读性和维护性,还能够显示应用程序的运行状况,突出显示最新的问题,并且通过代码质量检查,您可以修复泄漏,从而系统地提高代码质量。

关于我们

快狗打车前端团队专注前端技术分享,定期推送高质量文章,欢迎关注点赞。

原文  https://juejin.im/post/5d01f2bae51d4577583ddcb1
正文到此结束
Loading...