jscpd--前端代码重复率检测

女爷i 2022-06-09 12:41 959阅读 0赞

在实际开发中，一般的重复代码有一下几类

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

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

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

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

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

## **前端代码重复率检测** ##

**工具**

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

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

*  jsinspect工具支持js和jsx格式的文件，基于抽象语法树，可以检测出结构类似的代码块
 *  jscpd工具支持文件格式广泛，如java、oc、js、jsx、vue、ts、less等。其重复率判定依据为一定长度标识符的MD5值是否相同
 *  PMD-CPD工具支持js文件检测，也可以自己开发扩展包来解析指定的语言：[官方介绍\*\*][Link 1]

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

经过分析，

*  检测打包文件方案，若有多个打包文件，无法区分跨文件的重复代码是源代码重复还是由于打包生成的，因此不太适合。
 *  文件退化方案，jsx文件转换成js文件可以进行检测，但vue或less等包含css的文件格式无法检测。退化成纯文本的检测工具有商业收费的simian。

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

**使用方法**

jscpd工具可以在本地使用，也可以集成在gulp中。

**本地检测**

1.  npm安装

npm install jscpd -g

1.  在项目目录配置.cpd.yaml文件，[配置参考\*\*][Link 2]

#.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: 'simple.xsl'//模板
    limit: 100
    min-tokens: 70
    min-lines: 5
    output: 'reports.xml'

*  **注意**：less文件，language参数值应设为css
 *  files 检查的文件范围，默认全部
 *  exclude 检查忽略的文件，默认无
 *  min-tokens 重复最小token，默认70
 *  min-lines 重复最小行数，默认5
 *  output 输出报告文件地址，默认空，可不输出文件

其中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']
    };

1.  命令行工具

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

<table> 
 <thead> 
  <tr> 
   <th>Option</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>-l, –min-lines</td> 
   <td>[NUMBER]</td> 
   <td>5</td> 
   <td>min size of duplication in code lines</td> 
  </tr> 
  <tr> 
   <td>-t, –min-tokens</td> 
   <td>[NUMBER]</td> 
   <td>70</td> 
   <td>min size of duplication in code tokens</td> 
  </tr> 
  <tr> 
   <td>-f, –files</td> 
   <td>[STRING]</td> 
   <td>*</td> 
   <td>glob pattern for find code</td> 
  </tr> 
  <tr> 
   <td>-r, –reporter</td> 
   <td>[STRING]</td> 
   <td>xml</td> 
   <td>reporter name or path</td> 
  </tr> 
  <tr> 
   <td>-x, –xsl-href</td> 
   <td>[STRING]</td> 
   <td>-</td> 
   <td>path to xsl file for include to xml report</td> 
  </tr> 
  <tr> 
   <td>-e, –exclude</td> 
   <td>[STRING]</td> 
   <td>-</td> 
   <td>directory to ignore</td> 
  </tr> 
  <tr> 
   <td>–languages-exts</td> 
   <td>[STRING]</td> 
   <td>-</td> 
   <td>list of languages with file extensions (e.g. language:ext1,ext2;language:ext3)</td> 
  </tr> 
  <tr> 
   <td>-g, –languages</td> 
   <td>[STRING]</td> 
   <td>All supported</td> 
   <td>list of languages which scan for duplicates, separated with coma</td> 
  </tr> 
  <tr> 
   <td>-o, –output</td> 
   <td>[PATH]</td> 
   <td>-</td> 
   <td>path to report file</td> 
  </tr> 
  <tr> 
   <td>-c, –config</td> 
   <td>[PATH]</td> 
   <td>-</td> 
   <td>path to config yml file (e.g. .cpd.yml)</td> 
  </tr> 
  <tr> 
   <td>–verbose</td> 
   <td></td> 
   <td>-</td> 
   <td>show full info about copies</td> 
  </tr> 
  <tr> 
   <td>–skip-comments</td> 
   <td>false</td> 
   <td>-</td> 
   <td>skip comments in code when duplications finding</td> 
  </tr> 
  <tr> 
   <td>-b, –blame</td> 
   <td>false</td> 
   <td>-</td> 
   <td>blame authors of duplications (get information about authors from git)</td> 
  </tr> 
  <tr> 
   <td>-p, –path</td> 
   <td>[PATH]</td> 
   <td>Current dir</td> 
   <td>path to code</td> 
  </tr> 
  <tr> 
   <td>–limit</td> 
   <td>[NUMBER]</td> 
   <td>50</td> 
   <td>limit of allowed duplications, if real duplications percent more then limit jscpd exit with error</td> 
  </tr> 
  <tr> 
   <td>-d, –debug</td> 
   <td></td> 
   <td>-</td> 
   <td>show debug information (options list and selected files)</td> 
  </tr> 
  <tr> 
   <td>-v, –version</td> 
   <td></td> 
   <td>-</td> 
   <td>Display the current version</td> 
  </tr> 
  <tr> 
   <td>-h, –help</td> 
   <td></td> 
   <td>-</td> 
   <td>Display help and usage details</td> 
  </tr> 
 </tbody> 
</table>

4. 查看结果

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

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

**gulp集成**

1.  安装

npm install gulp-jscpd

1.  使用

在gulp.js中添加以下任务，[配置参考\*\*][Link 3]

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      : 'report.xml',
                verbose     : false,
                debug       : false,
                silent      : false,
                failOnError : false,
                'xsl-href'  : 'report.xls'
            }));
    });

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

[jsinspect]: http://link.zhihu.com/?target=https%3A//github.com/danielstjules/jsinspect
[jscpd]: http://link.zhihu.com/?target=https%3A//github.com/kucherenko/jscpd
[Link 1]: http://link.zhihu.com/?target=https%3A//pmd.github.io/pmd-5.7.0/customizing/cpd-parser-howto.html
[Link 2]: http://link.zhihu.com/?target=https%3A//github.com/kucherenko/jscpd/blob/master/README.md
[Link 3]: http://link.zhihu.com/?target=https%3A//github.com/yannickcr/gulp-jscpd