您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“jscpd統(tǒng)計(jì)項(xiàng)目中的代碼怎么重復(fù)使用”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“jscpd統(tǒng)計(jì)項(xiàng)目中的代碼怎么重復(fù)使用”吧!
jscpd是一個(gè)開(kāi)源的js工具庫(kù),用于檢測(cè)項(xiàng)目的代碼重復(fù)率,針對(duì)復(fù)制粘貼的代碼尤其有效,支持超過(guò)150種的源碼文件格式。
我們?cè)谇岸隧?xiàng)目中,無(wú)論是原生的javascript、css、html代碼,還是使用typescript、less、vue、react等代碼,都能較好的識(shí)別出項(xiàng)目中的重復(fù)代碼。
當(dāng)然,這里的重復(fù),更多的指代碼完全重復(fù),即代碼行與代碼字符串,都相同。
下面,先看下如何使用它。
我們先以全局方式,安裝該工具庫(kù):
npm install jscpd -g
安裝成功后,系統(tǒng)就有一個(gè)全局命令 jscpd
,可以查看版本號(hào),當(dāng)前最新版本是 3.5.3
,如下所示:
$ jscpd -V 3.5.3
安裝成功后,我們就可以很方便的使用它。
例如,我們需要統(tǒng)計(jì)一個(gè)文件 app.js
,只需要在文件目錄執(zhí)行以下命令:
jscpd ./app.js
執(zhí)行成功后,在命令行界面會(huì)顯示結(jié)果,如下圖所示:
圖中的內(nèi)容,我們下面一一做個(gè)說(shuō)明說(shuō)明:
Clone found (javascript)
顯示找到的拷貝的重復(fù)代碼塊,這里是javascript文件。
并且會(huì)顯示重復(fù)代碼在文件中具體的行數(shù),便于查找。
HTML report saved to report\html\
這句話的意思是,會(huì)在文件目錄下輸出對(duì)應(yīng)報(bào)告的html頁(yè)面,一般默認(rèn)是 report\html\
目錄下,用于在頁(yè)面中展示結(jié)果。
Format
文件格式,這里是 javascript
,還可以是 typescript
、tsx
等。
Files analyzed
已分析的文件數(shù)量,統(tǒng)計(jì)項(xiàng)目中的代碼文件數(shù)。
Total lines
所有文件的總行數(shù)。
這里只有一個(gè)文件,總行數(shù)是105行。
Total tokens
所有的token數(shù)量。
這里一般以 標(biāo)識(shí)符/變量等
、數(shù)字
、字符串
、空格
或 符號(hào)
等等作為一個(gè) token
來(lái)統(tǒng)計(jì)數(shù)量。
一行代碼一般包含幾個(gè)到幾十個(gè)不等的token數(shù)量。
Clones found
找到拷貝的重復(fù)塊數(shù)量。
Duplicated lines
重復(fù)的代碼行數(shù),以及占比。
在表格的 Total
行里,重復(fù)代碼的占比就是代碼行的重復(fù)度了,這里是18.1%。
Duplicated tokens
重復(fù)的token數(shù)量,以及占比。
Found 0 clones
找到了1個(gè)重復(fù)塊。
Detection time
檢測(cè)耗時(shí)。
由此可知,./app.js
檢測(cè)1個(gè)文件,發(fā)現(xiàn)了1個(gè)重復(fù)快,在總行數(shù)為105行的代碼中,共有19行代碼完全重復(fù),重復(fù)度為 18.1%
。
以上示例是比較簡(jiǎn)單的,直接檢測(cè)單個(gè)文件,通過(guò)命令行檢測(cè)單個(gè)文件,打印結(jié)果,并默認(rèn)生成report報(bào)告的頁(yè)面。
如果是在當(dāng)前主流的前端項(xiàng)目中,由于很多文件是輔助工具如依賴包、構(gòu)建、文檔等,并不是有效的代碼,需要排除。這種情況下,我們一般使用配置文件的方式,通過(guò)選項(xiàng)配置規(guī)范 jscpd
的使用場(chǎng)景。
jscpd
的配置選項(xiàng)可以通過(guò)以下兩種方式創(chuàng)建:
在項(xiàng)目根目錄下創(chuàng)建配置文件 .jscpd.json
,然后在該文件中增加具體的配置選項(xiàng);
也可以直接在 package.json
文件中添加
如果項(xiàng)目根目錄下沒(méi)有 package.json
文件,可以自行添加一個(gè),然后在該件中個(gè)增加對(duì)應(yīng)的配置。
無(wú)論是Vue還是React項(xiàng)目,使用大致都一樣,如下,在 package.json
中增加 jscpd
配置屬性:
"jscpd": { "threshold": 1, "reporters": [ "html", "console" ], "ignore": [ ".git", "node_modules", "public", ".husky" ], "format": ["javascript", "typescript"], "absolute": true }
以上是一個(gè)常用的配置,具體說(shuō)明:
threshold 表示重復(fù)度的閾值,超過(guò)這個(gè)值,就會(huì)打印錯(cuò)誤報(bào)警。
如閾值設(shè)為 1,當(dāng)重復(fù)度為18.1%時(shí),會(huì)報(bào)錯(cuò):ERROR: jscpd found too many duplicates (18.1%) over threshold (1%)
。
雖然報(bào)錯(cuò),但代碼的檢測(cè)仍然會(huì)正常完成。
reporters 表示生成結(jié)果檢測(cè)報(bào)告的方式,一般有以下幾種:
console:控制臺(tái)打印
html:創(chuàng)建可訪問(wèn)的 html
頁(yè)面
json:輸出 json
格式的文件報(bào)告
xml:輸出 xml
格式的文件報(bào)告
csv:輸出 csv
格式的文件報(bào)告
markdown:輸出 md
格式的文件報(bào)告
consoleFull:控制臺(tái)完整打印重復(fù)代碼塊
verbose:控制臺(tái)輸出 debug
信息
ignore
檢測(cè)時(shí)會(huì)忽略的文件目錄或文件,用于過(guò)濾一些非業(yè)務(wù)代碼,如依賴包、構(gòu)建或靜態(tài)文件等
format
需要進(jìn)行重復(fù)度檢測(cè)的源代碼格式,目前支持150多種,我們常用的如 javascript
、typescript
、css
等
absolute
在檢測(cè)報(bào)告中使用絕對(duì)路徑
除此以外,還有很多配置屬性,我們這里不在一一介紹。
上面介紹會(huì)輸出重復(fù)度檢測(cè)報(bào)告,我們?cè)陧?xiàng)目中設(shè)置好配置文件以后,執(zhí)行以下命令:
jscpd ./src -o 'report'
項(xiàng)目中的業(yè)務(wù)代碼,通常會(huì)選擇放在 ./src
目錄下,所以我們可以直接檢測(cè)該目錄。-o 'report'
通過(guò)命令行參數(shù),輸出檢測(cè)報(bào)告到項(xiàng)目根目錄下的 report
文件夾中——當(dāng)然也可以自定義目錄,這時(shí)候就會(huì)生成對(duì)應(yīng)的頁(yè)面文件:
如上所示,本質(zhì)上是一個(gè)本地網(wǎng)頁(yè),而且是基于 VUE
框架創(chuàng)建的網(wǎng)頁(yè),可以在瀏覽器訪問(wèn)查看,界面長(zhǎng)這樣:
從上圖可知,檢測(cè)了149個(gè)文件,其中存在8塊拷貝復(fù)制的代碼,代碼行計(jì)算的重復(fù)度是 1.18%
,非常直觀。
通過(guò)生成本地網(wǎng)頁(yè)直接展示所有的檢測(cè)報(bào)告,并且還能查看到重復(fù)的代碼在哪:
上圖可以看到,在兩個(gè) tsx
組件文件中,存在一段重復(fù)的代碼,也標(biāo)識(shí)除了這兩段代碼在文件中具體行數(shù)。
上面介紹的是單個(gè)項(xiàng)目的重復(fù)度檢測(cè),如果有多個(gè)項(xiàng)目,且存在代碼的復(fù)制粘貼現(xiàn)象,也可以通過(guò)jscpd工具進(jìn)行檢測(cè)處理。
我們只需要在多個(gè)項(xiàng)目的上層目錄下新建一個(gè) package.json
文件,設(shè)置相應(yīng)的配置選項(xiàng),就能根據(jù)設(shè)置檢測(cè)這些項(xiàng)目間的重復(fù)代碼。這里需要注意的是,一般只需要檢測(cè)業(yè)務(wù)代碼 src
,在配置文件中 ignore
屬性的忽略目錄,需要帶上各項(xiàng)目的項(xiàng)目名稱。
"ignore": [ "project1/.git", "project1/node_modules", "project2/.git", "project2/node_modules" // ... ]
這樣,就能快速檢測(cè)出多個(gè)項(xiàng)目中的重復(fù)代碼,仍然可在命令行輸出基本信息,以及對(duì)應(yīng)的report頁(yè)面報(bào)告。
當(dāng)我們使用jscpd執(zhí)行項(xiàng)目的重復(fù)度檢測(cè)時(shí),由于一些重復(fù)代碼可能是必要的,不想檢測(cè),可以使用代碼注釋標(biāo)識(shí)的方式,讓這部分代碼不用檢測(cè)。
在代碼的首尾位置添加相應(yīng)注釋,jscpd:ignore-start
和 jscpd:ignore-end
,包裹代碼即可。
如在js代碼中,可以這樣使用:
/* jscpd:ignore-start */ import { provide, computed, watch, onMounted, defineComponent } from 'vue' import { useStore } from 'vuex' /* jscpd:ignore-end */
在css及各種預(yù)處理中,也是與js中的用法一樣:
/* jscpd:ignore-start */ .content { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; overflow: hidden; } /* jscpd:ignore-end */
如下在html中的使用:
<!-- // jscpd:ignore-start --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- // jscpd:ignore-end -->
通過(guò)以上注釋標(biāo)識(shí)以后,這部分的代碼就不會(huì)再被統(tǒng)計(jì)為重復(fù)代碼了。
到此,相信大家對(duì)“jscpd統(tǒng)計(jì)項(xiàng)目中的代碼怎么重復(fù)使用”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。