在实际开发中,一般的重复代码有一下几类
- 完全一致的代码或者只修改了空格和评论
- 结构上和句法上一致的代码,例如只是修改了变量名
- 插入和删除了部分代码
- 功能和逻辑上一致的代码,语义上的拷贝
很明显越往后,重复代码检测难度越大。在实际情况中,我们的检测要求只要大致能满足前两者就已经足够了。
在技术上,重复代码检测主要有以下分类:
- 基于代码行的
- 基于标识符(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安装
npm install jscpd -g
- 在项目目录配置.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']
};
- 命令行工具
所有配置参数也可以直接在终端命令行中以参数形式附加。
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 |
4. 查看结果
执行jscpd命令行,在终端可以看到简要的重复代码位置,以及总的重复率计算结果。指定verbose参数,可以看到重复代码块。
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'
}));
});
- 值得注意的是,failOnError配置项指定检查完毕后是否抛出错误,默认true,会终止打包流程。在CI中,若不希望重复率检查停止正常打包,应指定为false。