终端代码重复率检测实践-白红宇

背景

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

复制粘贴：这可能是造成代码重复的最大因素，其原因也有很多种，可能是跨项目的代码拷贝，可能是类似功能的代码拷贝。无论如何，这都违背了集中管理的原则，给后续的代码维护增加了比较大的负担。

对项目不了解：新人加入、业务轮转等原因会让开发人员面对一个全新的项目。这种陌生的情况下，许多开发人员就会产生重复造轮子的问题，只顾着自己开发的部分，完全没考虑到项目原先的代码状况。

所以对项目定期进行代码率检测是一个很有意义的事，可以帮助开发人员发现冗余代码，进行代码抽象和重构。

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

基本概念

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

完全一致的代码或者只修改了空格和评论

结构上和句法上一致的代码，例如只是修改了变量名

插入和删除了部分代码

功能和逻辑上一致的代码，语义上的拷贝

很明显越往后，重复代码检测难度越大。在实际情况中，我们的检测要求只要大致能满足前两者就已经足够了。

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

基于代码行的

基于标识符（token）的

基于度量（metrics）的

基于抽象语法树（Abstract Syntax Tree）的

基于程序依赖图（Program Dependence Graph）的

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

前端代码重复率检测

工具

由于前端源代码文件格式多样，重复率检测除了源码检测以外，还可以从检测打包文件和文件退化角度考虑。

检测前端代码重复率的工具有、，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中。

本地检测

npm安装

npm install jscpd -g复制代码

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

#.cpd.yamllanguages:  - javascript  - typescript  - jsx  - vue  - cssfiles:  - 'src/**'  - 'less/**'exclude:  - 'dist/**'  - 'dest/**'  - 'neurons/**'  - 'node_modules/**'  - 'test/**'  - 'data/**'  - 'css/**'  - 'entries/**'reporter: xmlxsl-href: '/Users/dianping/dp/f2e-cpd/reporters-xslt/simple.xsl'limit: 100min-tokens: 70min-lines: 5output: '/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']};复制代码

命令行工具所有配置参数也可以直接在终端命令行中以参数形式附加。

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

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

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

xsl模板可以自己编写，官方github也提供了一份简单的xsl文件。

gulp集成

安装

npm install gulp-jscpd复制代码

使用在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'        }));});复制代码

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

客户端代码重复率检测

工具

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

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

使用方法

从官网下载PMD工具，其中已经包含CPD，下载地址：

解压后可以在bin文件夹下看到对应的工具

以linux为例，使用以下命令就可以打开CPD工具的gui。

./run.sh cpdgui复制代码

如果需要配合自定义脚本使用，可以选择命令行工具，可以指定相应的参数，例如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).