亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jscpd統計項目中的代碼怎么重復使用

發布時間:2023-03-28 16:10:19 來源:億速云 閱讀:130 作者:iii 欄目:開發技術

本篇內容主要講解“jscpd統計項目中的代碼怎么重復使用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“jscpd統計項目中的代碼怎么重復使用”吧!

jscpd是什么

jscpd是一個開源的js工具庫,用于檢測項目的代碼重復率,針對復制粘貼的代碼尤其有效,支持超過150種的源碼文件格式。

我們在前端項目中,無論是原生的javascript、css、html代碼,還是使用typescript、less、vue、react等代碼,都能較好的識別出項目中的重復代碼。

當然,這里的重復,更多的指代碼完全重復,即代碼行與代碼字符串,都相同。

如何使用它

下面,先看下如何使用它。

安裝

我們先以全局方式,安裝該工具庫:

npm install jscpd -g

安裝成功后,系統就有一個全局命令 jscpd,可以查看版本號,當前最新版本是 3.5.3,如下所示:

$ jscpd -V
3.5.3

安裝成功后,我們就可以很方便的使用它。

示例

例如,我們需要統計一個文件 app.js,只需要在文件目錄執行以下命令:

jscpd ./app.js

執行成功后,在命令行界面會顯示結果,如下圖所示:

jscpd統計項目中的代碼怎么重復使用

圖中的內容,我們下面一一做個說明說明:

  • Clone found (javascript)顯示找到的拷貝的重復代碼塊,這里是javascript文件。
    并且會顯示重復代碼在文件中具體的行數,便于查找。

  • HTML report saved to report\html\這句話的意思是,會在文件目錄下輸出對應報告的html頁面,一般默認是 report\html\ 目錄下,用于在頁面中展示結果。

  • Format文件格式,這里是 javascript,還可以是 typescripttsx 等。

  • Files analyzed已分析的文件數量,統計項目中的代碼文件數。

  • Total lines所有文件的總行數。
    這里只有一個文件,總行數是105行。

  • Total tokens所有的token數量。
    這里一般以 標識符/變量等數字字符串空格符號 等等作為一個 token 來統計數量。
    一行代碼一般包含幾個到幾十個不等的token數量。

  • Clones found找到拷貝的重復塊數量。

  • Duplicated lines重復的代碼行數,以及占比。
    在表格的 Total 行里,重復代碼的占比就是代碼行的重復度了,這里是18.1%。

  • Duplicated tokens重復的token數量,以及占比。

  • Found 0 clones找到了1個重復塊。

  • Detection time檢測耗時。

由此可知,./app.js 檢測1個文件,發現了1個重復快,在總行數為105行的代碼中,共有19行代碼完全重復,重復度為 18.1%

配置選項

以上示例是比較簡單的,直接檢測單個文件,通過命令行檢測單個文件,打印結果,并默認生成report報告的頁面。
如果是在當前主流的前端項目中,由于很多文件是輔助工具如依賴包、構建、文檔等,并不是有效的代碼,需要排除。這種情況下,我們一般使用配置文件的方式,通過選項配置規范 jscpd 的使用場景。

jscpd 的配置選項可以通過以下兩種方式創建:

  • 在項目根目錄下創建配置文件 .jscpd.json,然后在該文件中增加具體的配置選項;

  • 也可以直接在 package.json 文件中添加

如果項目根目錄下沒有 package.json 文件,可以自行添加一個,然后在該件中個增加對應的配置。

無論是Vue還是React項目,使用大致都一樣,如下,在 package.json 中增加 jscpd 配置屬性:

"jscpd": {
  "threshold": 1,
  "reporters": [
    "html",
    "console"
  ],
  "ignore": [
    ".git",
    "node_modules",
    "public",
    ".husky"
  ],
  "format": ["javascript", "typescript"],
  "absolute": true
}

以上是一個常用的配置,具體說明:

threshold 表示重復度的閾值,超過這個值,就會打印錯誤報警。

  • 如閾值設為 1,當重復度為18.1%時,會報錯:ERROR: jscpd found too many duplicates (18.1%) over threshold (1%)
    雖然報錯,但代碼的檢測仍然會正常完成。

reporters 表示生成結果檢測報告的方式,一般有以下幾種:

  • console:控制臺打印

  • html:創建可訪問的 html 頁面

  • json:輸出 json 格式的文件報告

  • xml:輸出 xml 格式的文件報告

  • csv:輸出 csv 格式的文件報告

  • markdown:輸出 md 格式的文件報告

  • consoleFull:控制臺完整打印重復代碼塊

  • verbose:控制臺輸出 debug 信息

ignore

  • 檢測時會忽略的文件目錄或文件,用于過濾一些非業務代碼,如依賴包、構建或靜態文件等

format

  • 需要進行重復度檢測的源代碼格式,目前支持150多種,我們常用的如 javascripttypescriptcss

absolute

  • 在檢測報告中使用絕對路徑

除此以外,還有很多配置屬性,我們這里不在一一介紹。

輸出報告

上面介紹會輸出重復度檢測報告,我們在項目中設置好配置文件以后,執行以下命令:

jscpd ./src -o 'report'

項目中的業務代碼,通常會選擇放在 ./src 目錄下,所以我們可以直接檢測該目錄。
-o 'report' 通過命令行參數,輸出檢測報告到項目根目錄下的 report 文件夾中——當然也可以自定義目錄,這時候就會生成對應的頁面文件:

jscpd統計項目中的代碼怎么重復使用

如上所示,本質上是一個本地網頁,而且是基于 VUE 框架創建的網頁,可以在瀏覽器訪問查看,界面長這樣:

jscpd統計項目中的代碼怎么重復使用

從上圖可知,檢測了149個文件,其中存在8塊拷貝復制的代碼,代碼行計算的重復度是 1.18%,非常直觀。

通過生成本地網頁直接展示所有的檢測報告,并且還能查看到重復的代碼在哪:

jscpd統計項目中的代碼怎么重復使用

上圖可以看到,在兩個 tsx 組件文件中,存在一段重復的代碼,也標識除了這兩段代碼在文件中具體行數。

多個項目

上面介紹的是單個項目的重復度檢測,如果有多個項目,且存在代碼的復制粘貼現象,也可以通過jscpd工具進行檢測處理。
我們只需要在多個項目的上層目錄下新建一個 package.json 文件,設置相應的配置選項,就能根據設置檢測這些項目間的重復代碼。這里需要注意的是,一般只需要檢測業務代碼 src,在配置文件中 ignore 屬性的忽略目錄,需要帶上各項目的項目名稱。

"ignore": [
  "project1/.git",
  "project1/node_modules",
  "project2/.git",
  "project2/node_modules"
  // ...
]

這樣,就能快速檢測出多個項目中的重復代碼,仍然可在命令行輸出基本信息,以及對應的report頁面報告。

規避代碼檢測

當我們使用jscpd執行項目的重復度檢測時,由于一些重復代碼可能是必要的,不想檢測,可以使用代碼注釋標識的方式,讓這部分代碼不用檢測。
在代碼的首尾位置添加相應注釋,jscpd:ignore-startjscpd:ignore-end,包裹代碼即可。

如在js代碼中,可以這樣使用:

/* jscpd:ignore-start */
import { provide, computed, watch, onMounted, defineComponent } from 'vue'
import { useStore } from 'vuex'
/* jscpd:ignore-end */

在css及各種預處理中,也是與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
-->

通過以上注釋標識以后,這部分的代碼就不會再被統計為重復代碼了。

到此,相信大家對“jscpd統計項目中的代碼怎么重復使用”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

柳林县| 游戏| 闽清县| 潮安县| 丰顺县| 芦溪县| 铁岭县| 水富县| 浦城县| 玉门市| 建瓯市| 定边县| 扬中市| 鹤庆县| 正镶白旗| 富平县| 霍山县| 静宁县| 灵璧县| 醴陵市| 子洲县| 普定县| 西乡县| 昭平县| 东兴市| 马边| 墨竹工卡县| 房产| 昂仁县| 湄潭县| 鄱阳县| 万安县| 乌拉特后旗| 手游| 奉节县| 赤壁市| 瓦房店市| 轮台县| 会理县| 兴隆县| 恩平市|