JavaScript工具庫jscpd檢測前端代碼重復度

更新時間：2023年10月30日 11:09:18 作者：南城FE

在前端開發(fā)中,代碼的重復度是一個常見的問題,重復的代碼不僅增加了代碼的維護成本,還可能導致程序的低效運行,為了解決這個問題,有許多工具和技術被用來檢測和消除代碼重復,其中一個被廣泛使用的工具就是jscpd

jscpd簡介

jscpd是一款開源的JavaScript的工具庫，用于檢測代碼重復的情況，針對復制粘貼的代碼檢測很有效果。它可以通過掃描源代碼文件，分析其中的代碼片段，并比較它們之間的相似性來檢測代碼的重復度。jscpd支持各種前端框架和語言，包括HTML、CSS和JavaScript等150種的源碼文件格式。無論是原生的JavaScript、CSS、HTML代碼，還是使用typescript、scss、vue、react等代碼，都能很好的檢測出項目中的重復代碼。

開源倉庫地址：github.com/kucherenko/jscpd/tree/master

如何使用

使用jscpd進行代碼重復度檢測非常簡單。我們需要安裝jscpd?？梢酝ㄟ^npm或yarn來安裝jscpd。

npm install -g jscpd

yarn global add jscpd

安裝完成后，我們可以在終端運行jscpd命令，指定要檢測的代碼目錄或文件。例如，我們可以輸入以下命令來檢測當前目錄下的所有JavaScript文件：

jscpd .

指定目錄檢測：

jscpd /path/to/code

在命令行執(zhí)行成功后的效果如下圖所示：

簡要說明一下對應圖中的字段內(nèi)容：

Clone found (javascript)：
顯示找到的重復代碼塊，這里是javascript文件。并且會顯示重復代碼在文件中具體的行數(shù)，便于查找。
Format：文件格式，這里是 javascript，還可以是 scss、markup 等。
Files analyzed：已分析的文件數(shù)量，統(tǒng)計被檢測中的文件數(shù)量。
Total lines：所有文件的總行數(shù)。
Total tokens：所有的token數(shù)量，一行代碼一般包含幾個到幾十個不等的token數(shù)量。
Clones found：找到的重復塊數(shù)量。
Duplicated lines：重復的代碼行數(shù)和占比。
Duplicated tokens：重復的token數(shù)量和占比。
Detection time：檢測耗時。

工程配置

以上示例是比較簡單直接檢測單個文件或文件夾。當下主流的前端項目大多都是基于腳手架生成或包含相關前端工程化的文件，由于很多文件是輔助工具如依賴包、構建腳本、文檔、配置文件等，這類文件都不需要檢測，需要排除。這種情況下的工程一般使用配置文件的方式，通過選項配置規(guī)范 jscpd 的使用。

jscpd 的配置選項可以通過以下兩種方式創(chuàng)建，增加的內(nèi)容都一致無需區(qū)分對應的前端框架。

在項目根目錄下創(chuàng)建配置文件 .jscpd.json，然后在該文件中增加具體的配置選項：

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

也可直接在 package.json 文件中添加jscpd：

{
  ...
  "jscpd": {
    "threshold": 0.1,
    "reporters": ["html", "console", "badge"],
    "ignore": ["**/__snapshots__/**"],
    "absolute": true,
    "gitignore": true
  }
  ...
}

簡要介紹一下上述配置字段含義：

threshold：表示重復度的閾值，超過這個值，就會輸出錯誤報警。如閾值設為 10，當重復度為18.1%時，會提示以下錯誤?，但代碼的檢測會正常完成。

ERROR: jscpd found too many duplicates (18.1%) over threshold (10%)

reporters：表示生成結(jié)果檢測報告的方式，一般有以下幾種：

console：控制臺打印輸出
consoleFull：控制臺完整打印重復代碼塊
json：輸出 json 格式的報告
xml：輸出 xml 格式的報告
csv：輸出 csv 格式的報告
markdown：輸出帶有 markdown 格式的報告
html：生成html報告到html文件夾
verbose：輸出大量調(diào)試信息到控制臺
ignore：檢測忽略的文件或文件目錄，過濾一些非業(yè)務代碼，如依賴包、文檔或靜態(tài)文件等
format：需要進行重復度檢測的源代碼格式，目前支持150多種，我們常用的如 javascript、typescript、css 等
absolute：在檢測報告中使用絕對路徑

除此之外還有很多其他的配置，有興趣的可以看源碼文檔中有詳細的介紹。

完整配置文檔地址：github.com/kucherenko/jscpd/tree/master/packages/jscpd

完成以上jscpd配置后執(zhí)行以下命令即可輸出對應的重復檢測報告。運行完畢后，jscpd會生成一個報告，展示每個重復代碼片段的信息。報告中包含了重復代碼的位置、相似性百分比和代碼行數(shù)等詳細信息。通過這些信息，我們可以有針對性的進行代碼重構。

jscpd ./src -o 'report'

項目中的業(yè)務代碼通常會選擇放在 ./src 目錄下，所以可以直接檢測該目錄下的文件，如果是放在其他目錄下根據(jù)實際情況調(diào)整即可。
通過命令行參數(shù)-o 'report'輸出檢測報告到項目根目錄下的 report 文件夾中，這里的report也可以自定義其他目錄名稱，輸出的目錄結(jié)構如下所示：

生成的報告頁面如下所示：

項目概覽數(shù)據(jù)：

具體重復代碼的位置和行數(shù)：

默認檢測重復代碼的行數(shù)（5行）和tokens（50）比較小，所以產(chǎn)生的重復代碼塊可能比較多，在實際使用中可以針對檢測范圍進行設置，如下設置參數(shù)供參考：

最小tokens：--min-tokens，簡寫 -k
最小行數(shù)：--min-lines，簡寫 -l
最大行數(shù)：--max-lines，簡寫 -x

jscpd ./src --min-tokens 200 --min-lines 20 -o 'report'

為了更便捷的使用此命令，可將這段命令集成到 package.json 中的 scripts 中，后續(xù)只需執(zhí)行 npm run jscpd 即可執(zhí)行檢測。如下所示：

"scripts": {
  ...
  "jscpd": "jscpd ./src --min-tokens 200 --min-lines 20 -o 'report'",
  ...
}

忽略代碼塊

上面所提到的ignore可以忽略某個文件或文件夾，還有一種忽略方式是忽略文件中的某一塊代碼。由于一些重復代碼在實際情況中是必要的，可以使用代碼注釋標識的方式忽略檢測，在代碼的首尾位置添加注釋，jscpd:ignore-start 和 jscpd:ignore-end 包裹代碼即可。

在js代碼中使用方式：

/* jscpd:ignore-start */
import lodash from 'lodash';
import React from 'react';
import {User} from './models';
import {UserService} from './services';
/* jscpd:ignore-end */

在CSS和各種預處理中與js中的用法一致：

/* jscpd:ignore-start */
.style {
  padding: 40px 0;
  font-size: 26px;
  font-weight: 400;
  color: #464646;
  line-height: 26px;
}
/* jscpd:ignore-end */

在html代碼中使用方式：

<!--
// jscpd:ignore-start
-->
<meta data-react-helmet="true" name="theme-color" content="#cb3837"/>
<link data-react-helmet="true" rel="stylesheet"  rel="external nofollow" />
<link data-react-helmet="true" rel="apple-touch-icon" sizes="120x120"  rel="external nofollow" />
<link data-react-helmet="true" rel="icon" type="image/png"  rel="external nofollow"  sizes="32x32"/>
<!--
// jscpd:ignore-end
-->