jscpd簡(jiǎn)介

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

開源倉(cāng)庫(kù)地址：github.com/kucherenko/jscpd/tree/master

如何使用

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

npm install -g jscpd

yarn global add jscpd

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

jscpd .

指定目錄檢測(cè)：

jscpd /path/to/code

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

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

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

工程配置

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

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

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

{
  "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
  }
  ...
}

簡(jiǎn)要介紹一下上述配置字段含義：

• threshold：表示重復(fù)度的閾值，超過這個(gè)值，就會(huì)輸出錯(cuò)誤報(bào)警。如閾值設(shè)為 10，當(dāng)重復(fù)度為18.1%時(shí)，會(huì)提示以下錯(cuò)誤?，但代碼的檢測(cè)會(huì)正常完成。

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

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

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

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

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

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

jscpd ./src -o 'report'

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

生成的報(bào)告頁面如下所示：

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

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

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

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

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

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

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

忽略代碼塊

上面所提到的ignore可以忽略某個(gè)文件或文件夾，還有一種忽略方式是忽略文件中的某一塊代碼。由于一些重復(fù)代碼在實(shí)際情況中是必要的，可以使用代碼注釋標(biāo)識(shí)的方式忽略檢測(cè)，在代碼的首尾位置添加注釋，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是一款強(qiáng)大的前端本地代碼重復(fù)度檢測(cè)工具。它可以幫助開發(fā)者快速發(fā)現(xiàn)代碼重復(fù)問題，簡(jiǎn)單的配置即可輸出直觀的代碼重復(fù)數(shù)據(jù)，通過解決重復(fù)的代碼提高代碼的質(zhì)量和可維護(hù)性。

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

最新評(píng)論