检测前端代码重复率工具

4,381 阅读4分钟

我们的项目中不可避免的会出现一些重复的代码,这可能是日常CV(滑稽)造成的,也有可能是因为不同的项目开发者重复造轮子造成的。为了保证我们项目代码的质量,我们应该尽早对项目进行代码重复率的管控。

检测工具介绍

jsinspect

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

抽象语法树(abstract syntax code,AST)是源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构,这所以说是抽象的,是因为抽象语法树并不会表示出真实语法出现的每一个细节,比如说,嵌套括号被隐含在树的结构中,并没有以节点的形式呈现。抽象语法树并不依赖于源语言的语法,也就是说语法分析阶段所采用的上下文无文文法,因为在写文法时,经常会对文法进行等价的转换(消除左递归,回溯,二义性等),这样会给文法分析引入一些多余的成分,对后续阶段造成不利影响,甚至会使合个阶段变得混乱。因些,很多编译器经常要独立地构造语法分析树,为前端,后端建立一个清晰的接口。

用法:

安装: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年后作者不再更新维护
  • 展示的结果很不友好

image.png

jscpd

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

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

用法

安装:npm install -g jscpd 用法:jscpd /path/to/code or 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:输出类型

  • 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
}

输出:

输出文件:

image.png

首页:

image.png

重复代码块:

image.png