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

检测工具介绍

jsinspect

https://github.com/danielstjules/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

https://github.com/kucherenko/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

检测代码重复率工具

检测代码重复率工具

检测工具介绍

jsinspect

用法：

缺点

jscpd

用法

输出：