jscpd--前端代码重复率检测
来源:互联网 发布:笔记本电脑蹭网软件 编辑:程序博客网 时间:2024/06/05 08:12
在实际开发中,一般的重复代码有一下几类
- 完全一致的代码或者只修改了空格和评论
- 结构上和句法上一致的代码,例如只是修改了变量名
- 插入和删除了部分代码
- 功能和逻辑上一致的代码,语义上的拷贝
很明显越往后,重复代码检测难度越大。在实际情况中,我们的检测要求只要大致能满足前两者就已经足够了。
在技术上,重复代码检测主要有以下分类:
- 基于代码行的
- 基于标识符(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.yamllanguages: - javascript - typescript - jsx - vue - cssfiles: - 'src/**' - 'less/**'exclude: - 'dist/**' - 'dest/**' - 'neurons/**' - 'node_modules/**' - 'test/**' - 'data/**' - 'css/**' - 'entries/**'reporter: xmlxsl-href: 'simple.xsl'//模板limit: 100min-tokens: 70min-lines: 5output: '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']};
- 命令行工具
所有配置参数也可以直接在终端命令行中以参数形式附加。
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。
- jscpd--前端代码重复率检测
- 使用代码克隆检测功能查找重复代码
- iOS/Android瘦身-基于PMD的重复代码检测
- [前端] 重复字符串函数
- 前端防止重复提交
- mysql检测重复索引
- 常用前端JS检测
- 代码重复
- iOS开发 jenkins(DRYPlugin)+PMD/CPD 检测重复代码
- 知网cncnki查重系统的重复率检测
- 前端代码检测利器——eslint for sublime安装指南
- 前端代码检测利器——eslint for sublime安装指南
- 前端代码检测利器——eslint for sublime安装指南
- 检测程序是否重复运行
- 检测重复文件功能实现
- IPv6的重复地址检测
- 分布式重复检测系统构思
- 前端轮询检测机制
- Unity3D
- Idea Maven 整合ssm框架: SpringMVC+Spring+MyBatis
- 华为面试题(8分钟写出代码) 有两个数组a,b,大小都为n,数组元素的值任意,无序; 要求:通过交换a,b中的元素,使数组a元素的和与数组b元素的和之间的差最小
- ffmpeg的工具ffplay.exe使用
- Git小结(入门篇)
- jscpd--前端代码重复率检测
- hdu 3966 Aragorn's Story
- 用Java实现二叉链表方式存储的二叉树
- 依赖注入
- servlet监听器
- 14 java里的udp网络编程
- 封装
- 排序之插入排序(java实现的)
- 机械、电子、计算机类优秀的论坛或者网站