IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

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

    丸子发表于 2014-05-22 09:23:15
    love 0

    前言

    在上一篇文章《代码质量管理平台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执行区域就不用多说了,来演示一下。假设我们要分析的代码如下:

    function loadFile(srcFile){
    	document.write('');
    }

    规则是要禁止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表达式为:

    //callExpression/memberExpression[primaryExpression[@tokenValue = "document"] and identifierName[@tokenValue = "write"]]

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

    XPath:document.write

    XPath:document.write

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

    //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

    Create xpath rule in Sonar

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

    Activate javascript rule

    Activate javascript rule

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

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

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

    Sonar projects

    Sonar projects

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

    //ifStatement/statement[not(block)]

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

    参考文档:

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

    类似文章

    • 2013年11月1日 centos下搭建npm镜像 (0)
    • 2014年04月9日 centos下nodejs问题记录 (1)
    • 2014年05月5日 centos下spm-yuan安装报错 (1)
    • 2013年09月21日 小可 — 重新开始 (4)
    • 2013年12月20日 使用Yeoman定制前端开发项目构建工具 (0)


沪ICP备19023445号-2号
友情链接