终端代码重复率检测实践

背景

当一个项目在不断开发迭代、功能累加的过程当中，重复代码的出现几乎是不可避免的。其出现的缘由不外乎如下两点：

• 复制粘贴：这多是形成代码重复的最大因素，其缘由也有不少种，多是跨项目的代码拷贝，多是相似功能的代码拷贝。不管如何，这都违背了集中管理的原则，给后续的代码维护增长了比较大的负担。
• 对项目不了解：新人加入、业务轮转等缘由会让开发人员面对一个全新的项目。这种陌生的状况下，许多开发人员就会产生重复造轮子的问题，只顾着本身开发的部分，彻底没考虑到项目原先的代码情况。

因此对项目按期进行代码率检测是一个颇有意义的事，能够帮助开发人员发现冗余代码，进行代码抽象和重构。

本文将介绍代码重复率检测的基本概念以及前端、客户端项目中代码重复率检测的实践过程。

基本概念

在《Software Clone Detection and Refactoring》一文中，对重复代码的类型进行了定义：

• 彻底一致的代码或者只修改了空格和评论
• 结构上和句法上一致的代码，例如只是修改了变量名
• 插入和删除了部分代码
• 功能和逻辑上一致的代码，语义上的拷贝

很明显越日后，重复代码检测难度越大。在实际状况中，咱们的检测要求只要大体能知足前二者就已经足够了。

在技术上，重复代码检测主要有如下分类：

• 基于代码行的
• 基于标识符（token）的
• 基于度量（metrics）的
• 基于抽象语法树（Abstract Syntax Tree）的
• 基于程序依赖图（Program Dependence Graph）的

这些技术细节不是本文关注的重点，有兴趣的读者能够查阅相关论文进行详细了解。

前端代码重复率检测

工具

因为前端源代码文件格式多样，重复率检测除了源码检测之外，还能够从检测打包文件和文件退化角度考虑。

检测前端代码重复率的工具备jsinspect、jscpd，PMD-CPD（PMD's Copy/Paste Detector）中也支持js文件的重复率检测。

• jsinspect工具支持js和jsx格式的文件，基于抽象语法树，能够检测出结构相似的代码块
• jscpd工具支持文件格式普遍，如java、oc、js、jsx、vue、ts、less等。其重复率断定依据为必定长度标识符的MD5值是否相同
• PMD-CPD工具支持js文件检测，也能够本身开发扩展包来解析指定的语言：官方介绍

每一个工具各有其优缺点，若只须要检测js或jsx文件，且对检测结果要求较高，能够选择jsinspect或者PMD-CPD工具，若考虑检测工具的通用性，能够选择jscpc工具。

通过分析

• 检测打包文件方案，如有多个打包文件，没法区分跨文件的重复代码是源代码重复仍是因为打包生成的，所以不太适合。
• 文件退化方案，jsx文件转换成js文件能够进行检测，但vue或less等包含css的文件格式没法检测。退化成纯文本的检测工具备商业收费的simian。

为了适应多种前端代码文件，本团队目前选择jscpd做为前端代码重复率检测工具。对于重复率要求较严格的项目，可使用jsinspect针对js(x)文件进行进一步检测。

使用方法

jscpd工具能够在本地使用，也能够集成在gulp中。

本地检测

1. npm安装

npm install jscpd -g
复制代码

2. 在项目目录配置.cpd.yaml文件，配置参考

#.cpd.yaml
languages:
 - javascript
 - typescript
 - jsx
 - vue
 - css
files:
 - 'src/**'
 - 'less/**'
exclude:
 - 'dist/**'
 - 'dest/**'
 - 'neurons/**'
 - 'node_modules/**'
 - 'test/**'
 - 'data/**'
 - 'css/**'
 - 'entries/**'
reporter: xml
xsl-href: '/Users/dianping/dp/f2e-cpd/reporters-xslt/simple.xsl'
limit: 100
min-tokens: 70
min-lines: 5
output: '/Users/dianping/dp/f2e-cpd/report-ecom-70.xml'
复制代码

其中languages值对应的文件后缀以下：

TokenizerFactory.prototype.LANGUAGES = {
  javascript: ['js', 'es', 'es6'],
  typescript: ['ts', 'tsx'],
  jsx: ['jsx'],
  haxe: ['hx', 'hxml'],
  coffeescript: ['coffee'],
  ruby: ['rb'],
  php: ['php', 'phtml'],
  python: ['py'],
  css: ['less', 'css'],
  sass: ['scss'],
  java: ['java'],
  csharp: ['cs'],
  go: ['go'],
  clike: ['cpp', 'c', 'm', 'h'],
  htmlmixed: ['html', 'htm'],
  yaml: ['yaml', 'yml'],
  erlang: ['erl', 'erlang'],
  swift: ['swift'],
  xml: ['xml', 'xsl', 'xslt'],
  puppet: ['pp', 'puppet'],
  twig: ['twig'],
  vue: ['vue']
};
复制代码

3. 命令行工具 全部配置参数也能够直接在终端命令行中以参数形式附加。

4. 查看结果 执行jscpd命令行，在终端能够看到简要的重复代码位置，以及总的重复率计算结果。指定verbose参数，能够看到重复代码块。

jscpd支持输出xml和json两种格式的报告文件，为了便于查看重复代码块，建议输出xml格式文件，配置xsl模板后在浏览器中具备较高的可读性。

• xml格式 执行jscpd命令后，如有配置 output 参数，将会在指定地址生成文件。可用浏览器查看。 为了便于阅读，能够配置 xsl-href 参数，指定xsl模板，应用对应模板的xml文件在浏览器中具备较高的可读性，效果以下：

  

  xsl模板能够本身编写，官方github也提供了一份简单的xsl文件。

gulp集成

1. 安装

npm install gulp-jscpd
复制代码

2. 使用 在gulp.js中添加如下任务，配置参考

var jscpd = require('gulp-jscpd');
gulp.task('jscpd', function() {
    return gulp.src([path.join(__dirname, 'src/**'), path.join(__dirname, 'less/**')])
        .pipe(jscpd({
            'min-lines' : 5,
            'min-tokens': 70,
            reporter    : 'xml',
            languages   : ['javascript', 'jsx', 'css'],
            output      : '/Users/dianping/dp/f2e-cpd/report-ecom-70.xml',
            verbose     : false,
            debug       : false,
            silent      : false,
            failOnError : false,
            'xsl-href'  : '/Users/dianping/dp/f2e-cpd/reporters-xslt/simple.xsl'
        }));
});
复制代码

3. 值得注意的是，failOnError配置项指定检查完毕后是否抛出错误，默认true，会终止打包流程。在CI中，若不但愿重复率检查中止正常打包，应指定为false。

客户端代码重复率检测

工具

对于客户端代码而言，因为有iOS和Android两个平台，因此须要考虑工具的通用性，必须支持objective-C和java两种语言。

基于以上缘由，最后选择的工具是PMD-CPD（PMD's Copy/Paste Detector）。此工具使用的是Karp-Rabin字符串匹配算法，支持gui，支持命令行，输出格式支持text、xml、csv等，能够很好的配合脚本语言进行二次开发，对重复率数据进行统计。

使用方法

1. 从官网下载PMD工具，其中已经包含CPD，下载地址：官网地址
2. 解压后能够在bin文件夹下看到对应的工具
3. 以linux为例，使用如下命令就能够打开CPD工具的gui。

./run.sh cpdgui
复制代码

4. 若是须要配合自定义脚本使用，能够选择命令行工具，能够指定相应的参数，例如tokens、目录、语言、输出格式等等。详细的参数列表请参考官方文档

./run.sh cpd --minimum-tokens 100 --files /usr/local/java/src/java --language java --format xml
复制代码

思考

工具的使用自己是比较简单的，更多的是针对不一样项目进行相应的定制。可能须要考量的点有以下几个：

• tokens和有效率的平衡： tokens是工具的一个参数，能够理解为对重复代码长度定义的标准。因此当tokens越小，检查到的重复代码数量更多、覆盖面越大，但相应的有效率就会下降，产生较多的误报状况。反之则有效率较高，但覆盖率就会相应下降，会有所遗漏。对tokens的选择依赖于项目的语言、框架等因素，在工具使用初期能够进行屡次测试比较肯定合适的tokens值。

• 脚本定制：使用其余脚本语言例如python、ruby等进行相应的定制，把代码重复率检查包装成为一个自动化工具。重复率检查工具例如PMD-CPD自己也不具有统计功能，因此脚本还能够帮助把最后的检查结果进行量化。

• 重复率标准：对于比较独立、规模不大的项目，刚开始检查时，5%多是一个比较合适的值。固然重复率标准的制定须要参考的因素有不少，例如tokens、项目、架构、时间等等。

参考文献

Fontana F A, Zanoni M, Ranchetti A, et al. Software Clone Detection and Refactoring[J]. Isrn Software Engineering, 2013, 2013(2013).