web代码查重工具

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

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

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

插入和删除了部分代码

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

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

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

基于代码行的

基于标识符（token）的

基于度量（metrics）的

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

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

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

前端代码重复率检测

工具

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

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

本地检测

npm安装

npminstalljscpd -g

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

OptionTypeDefaultDescription

-l, –min-lines[NUMBER]5min size of duplication in code lines

-t, –min-tokens[NUMBER]70min size of duplication in code tokens

-f, –files[STRING]*glob pattern for find code

-r, –reporter[STRING]xmlreporter name or path

-x, –xsl-href[STRING]-path to xsl file for include to xml report

-e, –exclude[STRING]-directory to ignore

–languages-exts[STRING]-list of languages with file extensions (e.g. language:ext1,ext2;language:ext3)

-g, –languages[STRING]All supportedlist of languages which scan for duplicates, separated with coma

-o, –output[PATH]-path to report file

-c, –config[PATH]-path to config yml file (e.g. .cpd.yml)

–verbose-show full info about copies

–skip-commentsfalse-skip comments in code when duplications finding

-b, –blamefalse-blame authors of duplications (get information about authors from git)

-p, –path[PATH]Current dirpath to code

–limit[NUMBER]50limit of allowed duplications, if real duplications percent more then limit jscpd exit with error

-d, –debug-show debug information (options list and selected files)

-v, –version-Display the current version

-h, –help-Display help and usage details

注意：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']

};

命令行工具

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