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

自定义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

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

JavaScript

function loadFile(srcFile){ document.write(‘<script src= »‘+srcFile+' »></script>’);}

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

AST:document.write

AST:document.write

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

1//callExpression/memberExpression[primaryExpression[@tokenValue = « document »] and identifierName[@tokenValue = « write »]]

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

XPath:document.write

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

1//callExpression/memberExpression[count(*) = 3 and primaryExpression[@tokenValue = « document »] and identifierName[@tokenValue = « write »]]

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

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

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

Create xpath rule in Sonar

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

Activate javascript rule

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

# Required metadatasonar.projectKey=hiwanz:javascript-sonar-rule-testsonar.projectName=javascript sonar rule testsonar.projectVersion=1.0# Comma-separated paths to directories with sources (required)sonar.sources=src# Languagesonar.language=js# Encoding of sources filessonar.sourceEncoding=UTF-8

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

Sonar projects

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

1//ifStatement/statement[not(block)]

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

参考文档:

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.