隨著各個項目的迭代更新，項目中不可避免的會出現(xiàn)一些重復(fù)的代碼，這可能是CTRL C + CTRL V造成的，也有可能是因為不同的項目成員重復(fù)造輪子造成的。為了保證我們項目代碼的質(zhì)量，我們應(yīng)該盡早對項目進行代碼重復(fù)率的管控。

檢測工具介紹

jsinspect

https://github.com/danielstjules/jsinspect
jsinspect 利用 babylon 對于 JavaScript 或者 JSX 代碼構(gòu)建 AST 語法樹，根據(jù)不同的 AST 節(jié)點類型，譬如 BlockStatement、VariableDeclaration、ObjectExpression 等標(biāo)記相似結(jié)構(gòu)的代碼塊。同時還可以自由指定一個閾值，以確定要分析的最小節(jié)點子集。

抽象語法樹（abstract syntax code，AST）是源代碼的抽象語法結(jié)構(gòu)的樹狀表示，樹上的每個節(jié)點都表示源代碼中的一種結(jié)構(gòu)，這所以說是抽象的，是因為抽象語法樹并不會表示出真實語法出現(xiàn)的每一個細(xì)節(jié)，比如說，嵌套括號被隱含在樹的結(jié)構(gòu)中，并沒有以節(jié)點的形式呈現(xiàn)。抽象語法樹并不依賴于源語言的語法，也就是說語法分析階段所采用的上下文無文文法，因為在寫文法時，經(jīng)常會對文法進行等價的轉(zhuǎn)換（消除左遞歸，回溯，二義性等），這樣會給文法分析引入一些多余的成分，對后續(xù)階段造成不利影響，甚至?xí)购蟼€階段變得混亂。因些，很多編譯器經(jīng)常要獨立地構(gòu)造語法分析樹，為前端，后端建立一個清晰的接口。

用法：

安裝：npm install -g jsinspect
用法：jsinspect [options] <paths ...>
示例：jsinspect -I -L -t 20 --ignore "test" ./path/to/src
意思是檢查 ./path/to/src 路徑下文件 -I不匹配標(biāo)識符 -L不匹配文字 -t 20匹配大于20個字節(jié)的代碼 忽略test文件

Options:

  -h, --help                         output usage information 輸出使用信息
  -V, --version                      output the version number 輸出版本號
  -t, --threshold <number>           number of nodes (default: 30) 檢查字節(jié)閥值（默認(rèn)是30個字節(jié)）
  -m, --min-instances <number>       min instances for a match (default: 2) 匹配的最小實例（默認(rèn)2個字節(jié)）
  -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 不匹配標(biāo)識符
  -L, --no-literals                  do not match literals 不匹配文字
  -C, --no-color                     disable colors 禁用顏色
  --ignore <pattern>                 ignore paths matching a regex 忽略與正則表達(dá)式匹配的路徑
  --truncate <number>                length to truncate lines (default: 100, off: 0) 截線長度
  --debug                            print debug information 打印調(diào)試信息

缺點

• 僅支持.jsx、.js文件類型（可以把源碼下下來改一下loader）；
• 庫從17年后作者不再更新維護

• 展示的結(jié)果很不友好

  
  
  image.png

jscpd

https://github.com/kucherenko/jscpd
jscpd采用Rabin-Karp算法,能夠在150多種編程語言中檢測重復(fù)代碼。

Rabin-Karp算法，它是字符串快速查找的一種算法，解決思路是把一個字符串，看作是字符集長度進制的樹，如果是ASCII，這個進制就是128，如果是只考慮英文小寫字母，那這個進制就是26，通過數(shù)值的比較得出字符串的比較結(jié)果。

用法

安裝：npm install -g jscpd
用法：jscpd /path/to/code or jscpd --pattern "src/**/*.js"
配置參數(shù)：
--min-tokens, -k：代碼的最小塊大小。小于的代碼塊min-tokens將被跳過,默認(rèn)為50；
--min-lines，-l：最小代碼行數(shù)，默認(rèn)為5；
--max-lines, -x: 最大代碼行數(shù)，默認(rèn)為1000；
--max-size, -z:最大文件大小，單位為kb，默認(rèn)100；
--threshold, -t:重復(fù)級別的閾值，當(dāng)項目重復(fù)級別大于該閾值時報錯退出，默認(rèn)為空；
--ignore，-i:忽略的文件類型；
--reporters，-r：輸出類型

• console -報告要克隆的克??；
• consoleFull-報告有關(guān)要克隆的克隆的代碼塊；
• json-jscpd-report.json具有克隆報告的輸出文件為json格式；
• xml-jscpd-report.xml帶有xml格式的克隆報告的輸出文件；
• csv-jscpd-report.csv具有csv格式的克隆報告的輸出文件；
• markdown-輸出jscpd-report.md文件，其克隆報告為markdown格式；
• html-生成html報告到html/文件夾；
• verbose -向控制臺輸出大量調(diào)試信息；
  --output, -o:報告目錄的路徑。JSON和XML報告將保存在此處;
  --mode，-m:檢測質(zhì)量的模式；
• strict -使用所有類型的符號作為標(biāo)記，僅跳過標(biāo)記為已忽略的塊。
• mild -跳過標(biāo)記為已忽略的塊以及新行和空符號。
• weak -跳過標(biāo)記為已忽略的塊以及新行以及空符號和注釋。
  也可以把.jscpd.json文件放到項目根目錄中:

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

輸出：

輸出文件：

image.png

首頁：

image.png

image.png