自定义Sonar代码审查规则(Javascript)

前言

在上一篇文章《代码质量管理平台Sonar》中,我们简单介绍了Sonar这个代码质量管理平台,提到了它可以定制多种开发语言的代码质量审查支持,也演示了官方的Javascript审查插件的使用,但是官方插件默认的规则是不够的,或者说不一定适用于我们团队自己的内部规范,因此,接下来来说说如何定制自己的审查规则。

扩展规则

Sonar扩展代码审查规则的方式有两种:1,使用Java编写Sonar插件;2,在SonarQube界面直接添加XPath规则。

第一种方式需要用户有Java代码编写能力,定制性强,对于大部分前端来讲要求较高,如果你有能力实现,可以根据官方提供的示例进行改造。我们主要介绍第二种方式,要求懂得XPath 1.0语法,自定义规则必须使用该规范版本的语法来遍历抽象语法树(Abstract Syntax Tree,AST),因此在编写自定义规则之前,你得先知道你所调试的代码对应的语法树是什么样子,官方提供了一个SSLR Javascript Toolkit来帮助我们方便的分析Javascript的语法树,本文使用的sslr-javascript-toolkit-1.6.jar

sslr javascript toolkit 1.6

sslr javascript toolkit 1.6

如上图所示,窗口左侧是源码区,右边是语法树信息,下面是XPath语句执行区域。源码区可以手动贴入或编写代码,也可以通过Open Source File按钮打开js文件,在手工编辑代码时需要点击Parse Source Code来生成语法树。下面的XPath执行区域就不用多说了,来演示一下。假设我们要分析的代码如下:

规则是要禁止document.write方法的使用,于是我们需要匹配代码中的document.write,首先需要看看这个方法在语法树上的节点是什么样子的,见图:

AST:document.write

AST:document.write

AST:document.write

AST:document.write

从图中我们不难看出,document.write这个调用在AST中是callExpression下的memberExpression,他的子节点primaryExpression的tokenValue为document,identifierName的tokenValue为write,因此我们得到的XPath表达式为:

我们在XPath query区域执行下我们的表达式,可以发现源码区域中的document.write为选中状态,说明我们的表达式没有问题了。

XPath:document.write

XPath:document.write

当然,你还可以优化一下表达式,让它效率更高,比如document.write由document,一个英文点号和write组成,它的memberExpression有三个子节点,可以加个前置条件count(*) = 3,表达式如下

到这里我们已经知道怎么来匹配到document.write这个调用了,那么要怎么加到SonarQube规则里呢?继续往下看。

在前一篇关于Sonar平台的介绍文章中,我们已经安装了Javascript代码审查的插件,接下来我们要在Javascript插件配置里添加一个自定义配置,操作如下:

  1. 用管理帐号登录SonarQube平台;
  2. 从Quality Profile菜单进入配置页面;
  3. 在JavaScript Profiles这一节的最右边点击Create创建一个新的配置;
  4. 点击新建的规则名,查找XPath规则模版,复制并新建规则,写入你的规则;
Create xpath rule in Sonar

Create xpath rule in Sonar

这样一条规则就创建完成了,创建好的规则默认非激活状态,需要手动勾选规则前面的复选框使之激活。

Activate javascript rule

Activate javascript rule

新建的配置需要在配置名最右侧点击Set as default后才能使用,接下来就是见证奇迹的时刻了,按照前一篇介绍的方式一样,在项目根目录中创建sonar-project.properties配置信息:

然后命令行切换到项目根目录执行一下sonar-runner,即可看到运行的结果。接下来在SonarQube平台下就可以看到审查结果啦。

Sonar projects

Sonar projects

当知道了方法之后,你就可以创建更多的审查规则,例如if语句必须使用花括号:

更多的XPath规则我会根据团队规范完整调试并分享出来,未完待续。

参考文档:

http://docs.codehaus.org/display/SONAR/Extending+Coding+Rules

如需转载,请注明出处:https://i.wanz.im/2014/05/22/extending-javascript-coding-rules-in-sonar/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload CAPTCHA.