细说Sonar之——前端接入篇

1、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下载网址

先选择接受许可协议【1】然后选择操作系统点击下载【2】 安装步骤： 按照提示安装即可

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）汉化-> 按图操作

搜索的chinese ，然后install

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

c) sonar-scanner扫描器安装

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

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! 
复制代码

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

4）source /etc/profile 运行更改

3、sonar使用

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

a)projectKey 是唯一的

获取projectKey的步骤

1）添加项目

2）根据步骤操作

最终得到projectKey

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

c) 结果查看

1）总体结果

2）结果列表

4、添加sonar的规则文件

1）用管理帐号登录SonarQube平台；

2）从质量配置菜单进入配置页面；

3. 在最右边点击创建，创建一个新的配置；

4. 输入规则名称，选择语言，点击创建；

5）创建完成

6）进入质量配置，找到你选择的语言

7）设置自己添件的规则文件，

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

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

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

新的规则文件中会有复制那个规则文件里的所有规则。
新建的方式获取规则文件：新的规则文件是空的
复制代码

说明：js，css等几种语言只能在现在已有的规则中去激活你想要的规则，不能添加规则表中没有的规则（目前本人没有找到自定义规则方法），java等语言能通过上传自己定义的规则文件进行自定义规则。
复制代码

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

在【代码规则】中选择【语言】可以查看现在已有的规则列表中的所有规则：
复制代码

最后

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

关于我们

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

转载于:https://juejin.im/post/5d01f2bae51d4577583ddcb1