前端代码引入Sonar扫描

前端代码引入Sonar扫描

Sonar 是一款开源的代码质量检查工具,基本支持所有流行的编程语言,可以帮助我们做一些代码的审查。

在 Sonar 中,问题分为三种,每种按照严重程度分为 A-E 五个级别,三种问题分别为:

  • Reliability:识别出非运行时 bug;
  • Security:存在的安全漏洞问题;
  • Maintainability:不规范的代码,这个可以帮助我们改正我们代码中的一些不良习惯;

另外 Sonar 还可以帮助我们分析出重复的代码。

通过上面的介绍,Sonar 可以帮助我们改善代码质量,本文的重点不是讲解Sonar的搭建,而是介绍怎么通过Jenkins去做扫描。

配置 SonarQube 令牌

在后台-->个人账户-->安全 ,生成一个令牌后面需要用到:

前端代码引入Sonar扫描

Jenkins 安装 Sonar 插件

在 Jenkins 插件管理中,关键字搜索 SonarQube Scanner

前端代码引入Sonar扫描

安装完,重启 Jenkins!

配置插件

在 Jenkins 全局工具配置中,找到 SonarQube Scanner 块,点击新增 SonarQube Scanner。版本选择与平台版本对应。

前端代码引入Sonar扫描

在 Jenkins 设置中找到 SonarQube servers 块,配置服务端,Server URL就是 Sonar 服务地址,token 填写刚才生成的令牌。

前端代码引入Sonar扫描

到这一步,Jenkins 中的配置已经完成。

配置扫描规则

这里只对前端未编译后的代码做扫描,所以只需要从 Git 上拉取代码,然后执行扫描即可。这里我做了一个自动构建触发,每隔 4 小时进行一次代码拉取,如果代码没有提交记录,就不会进行代码扫描,这里可以学习一下 CRON 。

前端代码引入Sonar扫描

在构建中,选择 Execute SonarQube Scanner

前端代码引入Sonar扫描

这里给出前端的配置规则:

# 项目的唯一标识,不能重复
sonar.projectKey=groupId_artifactId
# projectName值不能是中文
sonar.projectName=groupId_artifactId
# 版本默认即可
sonar.projectVersion=1.0
# 默认master
sonar.branch=master
# 扫描的目录
sonar.sources=src
# 语言
sonar.language=js
# 编码规则
sonar.sourceEncoding=UTF-8
# 过滤文件夹
sonar.exclusions=**/plugin/**,

通过以上配置,就完成了整个步骤。

查看效果

执行扫描完,就可以在 Sonar 上面查看扫描结果

一张比较好的:
前端代码引入Sonar扫描

有问题的:
前端代码引入Sonar扫描
前端代码引入Sonar扫描

参考Sonar文档:https://docs.sonarqube.org/latest/

仅有一条评论

  1. 回复

    我能说一句看不懂吗?啊哈

添加新评论