前端代码检测重复率工具

不断的迭代更新，项目中不可避免的会出现一些重复的代码，这可能是CTRL C + CTRL V造成的，也有可能是因为不同的项目成员重复造轮子造成的。为了保证项目代码的质量，应尽早对项目进行代码重复率的管控。

一般的重复代码有一下几类：

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

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

• 基于代码行的
• 基于标识符（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。

jsinspect

https://github.com/danielstjules/jsinspect

jsinspect 利用 babylon 对于 JavaScript 或者 JSX 代码构建 AST 语法树，根据不同的 AST 节点类型，譬如 BlockStatement、VariableDeclaration、ObjectExpression 等标记相似结构的代码块。同时还可以自由指定一个阈值，以确定要分析的最小节点子集。

用法：

安装：npm install -g jsinspect
用法：jsinspect [options] <paths ...>
示例：jsinspect -I -L -t 20 --ignore "test" ./path/to/src
意思是检查 ./path/to/src 路径下文件 -I不匹配标识符 -L不匹配文字 -t 20匹配大于20个字节的代码 忽略test文件

Options:

  -h, --help                         output usage information 输出使用信息
  -V, --version                      output the version number 输出版本号
  -t, --threshold <number>           number of nodes (default: 30) 检查字节阀值（默认是30个字节）
  -m, --min-instances <number>       min instances for a match (default: 2) 匹配的最小实例（默认2个字节）
  -c, --config [config]              path to config file (default: .jsinspectrc) 配置文件路径
  -r, --reporter [default|json|pmd]  specify the reporter to use 指定类型使用
  -I, --no-identifiers               do not match identifiers 不匹配标识符
  -L, --no-literals                  do not match literals 不匹配文字
  -C, --no-color                     disable colors 禁用颜色
  --ignore <pattern>                 ignore paths matching a regex 忽略与正则表达式匹配的路径
  --truncate <number>                length to truncate lines (default: 100, off: 0) 截线长度
  --debug                            print debug information 打印调试信息

缺点

• 仅支持.jsx、.js文件类型（可以把源码下下来改一下loader）；
• 库从17年后作者不再更新维护

• 展示的结果很不友好

  

  jscpd

  https://github.com/kucherenko/jscpd

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

• jscpd采用Rabin-Karp算法,能够在150多种编程语言中检测重复代码。

  Rabin-Karp算法，它是字符串快速查找的一种算法，解决思路是把一个字符串，看作是字符集长度进制的树，如果是ASCII，这个进制就是128，如果是只考虑英文小写字母，那这个进制就是26，通过数值的比较得出字符串的比较结果。

  用法

  安装：npm install -g jscpd
  用法：jscpd /path/to/code or jscpd --pattern "src/**/*.js"

• npx jscpd --pattern "src/**/*.js"
  配置参数：
  --min-tokens, -k：代码的最小块大小。小于的代码块min-tokens将被跳过,默认为50；
  --min-lines，-l：最小代码行数，默认为5；
  --max-lines, -x: 最大代码行数，默认为1000；
  --max-size, -z:最大文件大小，单位为kb，默认100；
  --threshold, -t:重复级别的阈值，当项目重复级别大于该阈值时报错退出，默认为空；
  --ignore，-i:忽略的文件类型；
  --reporters，-r：输出类型

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

Option	Type	Default	Description
-l, –min-lines	[NUMBER]	5	min size of duplication in code lines
-t, –min-tokens	[NUMBER]	70	min size of duplication in code tokens
-f, –files	[STRING]	*	glob pattern for find code
-r, –reporter	[STRING]	xml	reporter 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 supported	list 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-comments	false	-	skip comments in code when duplications finding
-b, –blame	false	-	blame authors of duplications (get information about authors from git)
-p, –path	[PATH]	Current dir	path to code
–limit	[NUMBER]	50	limit 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

• console -报告要克隆的克隆；
• consoleFull-报告有关要克隆的克隆的代码块；
• json-jscpd-report.json具有克隆报告的输出文件为json格式；
• xml-jscpd-report.xml带有xml格式的克隆报告的输出文件；
• csv-jscpd-report.csv具有csv格式的克隆报告的输出文件；
• markdown-输出jscpd-report.md文件，其克隆报告为markdown格式；
• html-生成html报告到html/文件夹；
• verbose -向控制台输出大量调试信息；
  --output, -o:报告目录的路径。JSON和XML报告将保存在此处;
  --mode，-m:检测质量的模式；
• strict -使用所有类型的符号作为标记，仅跳过标记为已忽略的块。
• mild -跳过标记为已忽略的块以及新行和空符号。
• weak -跳过标记为已忽略的块以及新行以及空符号和注释。
  也可以把.jscpd.json文件放到项目根目录中:

{
  "threshold": 0,
  "reporters": ["html", "console", "badge"],
  "ignore": ["**/__snapshots__/**"],
  "absolute": true
}

• 在项目目录配置.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: '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']
};

输出文件：

jscpd支持输出xml和json两种格式的报告文件，为了便于查看重复代码块，建议输出xml格式文件，配置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      : 'report.xml',
            verbose     : false,
            debug       : false,
            silent      : false,
            failOnError : false,
            'xsl-href'  : 'report.xls'
        }));
});

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

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