jscpd簡介

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

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

如何使用

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

npm install -g jscpd

yarn global add jscpd

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

jscpd .

指定目錄檢測：

jscpd /path/to/code

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

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

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

工程配置

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

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

在項目根目錄下創(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：表示重復(fù)度的閾值，超過這個值，就會輸出錯誤報警。如閾值設(shè)為 10，當(dāng)重復(fù)度為18.1%時，會提示以下錯誤?，但代碼的檢測會正常完成。

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

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

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

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

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

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

jscpd ./src -o 'report'

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

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

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

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

默認檢測重復(fù)代碼的行數(shù)（5行）和tokens（50）比較小，所以產(chǎn)生的重復(fù)代碼塊可能比較多，在實際使用中可以針對檢測范圍進行設(shè)置，如下設(shè)置參數(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可以忽略某個文件或文件夾，還有一種忽略方式是忽略文件中的某一塊代碼。由于一些重復(fù)代碼在實際情況中是必要的，可以使用代碼注釋標識的方式忽略檢測，在代碼的首尾位置添加注釋，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和各種預(yù)處理中與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
-->

總結(jié)

jscpd是一款強大的前端本地代碼重復(fù)度檢測工具。它可以幫助開發(fā)者快速發(fā)現(xiàn)代碼重復(fù)問題，簡單的配置即可輸出直觀的代碼重復(fù)數(shù)據(jù)，通過解決重復(fù)的代碼提高代碼的質(zhì)量和可維護性。

使用jscpd我們可以有效地優(yōu)化前端開發(fā)過程，提高代碼的效率和性能。希望本文能夠?qū)δ懔私饣?code>jscpd的前端本地代碼重復(fù)度檢測有所幫助，更多關(guān)于JavaScript jscpd代碼重復(fù)檢測的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論