從零編寫和發(fā)布一個VSCode擴(kuò)展

年初在 TO-DO 上計劃了一個任務(wù)，是以解決自身需求為目的，開發(fā)一個 VSCode 擴(kuò)展。

需求

最近一個小需求來了，能否在不離開VSCode編輯器的情況下，「查看文件或者文件夾的大小」。

調(diào)研

恰好目前擴(kuò)展市場上沒有統(tǒng)計 文件夾相關(guān)的擴(kuò)展，只有統(tǒng)計 單個文件的，比如：「File Size」

所以還是自己造輪子吧

預(yù)覽

Folder Size Preview

試用

從網(wǎng)頁安裝，F(xiàn)older Size，或者從擴(kuò)展商店搜索

Folder Size Install

開發(fā)

快速入門

三個比較好的入門方法：

閱讀官方文檔

使用官方示例快速入門

閱讀同類型擴(kuò)展源碼

大家都知道 VSCode 是用 TypeScript 寫的，所以 VSCode 擴(kuò)展自然是擁抱 TS 的，當(dāng)然也可以用 JS 編寫。

閱讀同類型擴(kuò)展代碼的時候，發(fā)現(xiàn)大部分的擴(kuò)展實現(xiàn)的統(tǒng)計文件信息的方式都不太一樣，有的簡單，有的復(fù)雜。

其實我這個需求官方文檔上的例子完全就可以 Cover 住，我做的呢，只是整合了我所需要的功能特性，打開/選擇文件的時候，可以在 Status Bar (狀態(tài)欄)顯示格式為：[File | Folder] 這樣的文案。這樣我就可以在不離開 VSCode 編輯器的情況下統(tǒng)計到了文件及文件夾的信息。

功能實現(xiàn)

目前 「Folder Size」 具備三個小功能：

統(tǒng)計文件大小

統(tǒng)計文件夾大小

統(tǒng)計文件夾中文件的個數(shù)

這些功能都是基于 workspace 的事件鉤子去觸發(fā)的，在打開或切換文件、保存文件、關(guān)閉文件時觸發(fā)統(tǒng)計，下面會講到 API 用法。

調(diào)試

沒玩明白如何用 VSCode 自帶的 debug 調(diào)試擴(kuò)展的我，只能用打印內(nèi)容來調(diào)試，VSCode ?Extension 有幾個可以用于打印調(diào)試的功能。比如：

OutputChannel

showInformationMessage

showTextDocument

利用 vsce 工具進(jìn)行打包為 VSIX 各式的文件，即 VSCode 擴(kuò)展本地安裝格式。也可以將文件發(fā)給他人測試。

發(fā)布

擴(kuò)展發(fā)布需要注冊 Azure 賬號，VSCode 使用 Azure DevOps 作為擴(kuò)展市場服務(wù)，簡單四步：

創(chuàng)建 Azure 賬號，獲取 Personal Access Token

vsce 創(chuàng)建 publisher，需要 Token，對應(yīng) package.json 中聲明的 publisher

vsce 以創(chuàng)建的 publisher 登錄，需要 Token

vsce 發(fā)布

API

Folder Size 擴(kuò)展無任何第三方依賴，完全基于 VSCode ?Extension API 進(jìn)行開發(fā)，下面是用到的所有 API，簡單介紹下 API 用法

window

window.createOutputChannel

An output channel is a container for readonly textual information.

對應(yīng) VSCode 里面的輸出窗口，可以利用這個輸出內(nèi)容調(diào)試

window.showInformationMessage

Show an information message to users. Optionally provide an array of items which will be presented as clickable buttons.

對應(yīng) VSCode 信息提示框，同樣可以用于調(diào)試，也可以結(jié)合注冊命令，給用戶友好提示信息。

window.createStatusBarItem

Creates a status bar item.

創(chuàng)建一個狀態(tài)欄實例，可以顯示文本，控制顯隱。

window.activeTextEditor

The currently active editor or undefined. The active editor is the one that currently has focus or, when none has focus, the one that has changed input most recently.

用于獲取當(dāng)前選中文件的 URI

commands

vscode.commands.registerCommand

Registers a command that can be invoked via a keyboard shortcut, a menu item, an action, or directly.

Registering a command with an existing command identifier twice will cause an error.

注冊一個命令，比如給狀態(tài)欄注冊點擊反饋命令

workspace

vscoce.workspace.fs.stat

Returns the meta data for a file.

用于統(tǒng)計當(dāng)前選中文件的大小

vscode.workspace.fs.readDirectory

Allows to retrieve all entries of a directory

讀取當(dāng)前選中文件的文件夾，可用此方法遞歸文件夾，統(tǒng)計文件夾大小

vscode.workspace.getConfiguration

Get a workspace configuration object.

獲取工作區(qū)配置項，用于擴(kuò)展可自定義的配置項。

需要聲明在 package.json 中，以下配置描述了可配置的可忽略的文件夾路徑，默認(rèn)值：node_modules|.git

用擴(kuò)展去統(tǒng)計 node_modules 這個“黑洞”，可能會占用一定內(nèi)存哦，還是忽略比較好。

?

"contributes":?{
??"configuration":?[{
????"title":?"Folder?Size?Configuration",
????"properties":?{
??????"folder-size.ignoreFolders":?{
????????"type":?"string",
????????"default":?"node_modules|.git",
????????"description":?"The?Folders?Not?Counting",
????????"scope":?"resource"
??????}
????}
??}]
}

?

?

vscode.workspace.onDidSaveTextDocument

An event that is emitted when a text document is saved to disk.

保存文檔時觸發(fā)的事件，此時統(tǒng)計文件大小、文件夾大小

vscode.workspace.onDidOpenTextDocument

An event that is emitted when a text document is opened or when the language id of a text document has been changed.

打開文檔時觸發(fā)的事件，此時統(tǒng)計文件大小、文件夾大小

vscode.workspace.onDidCloseTextDocument

An event that is emitted when a text document is disposed or when the language id of a text document has been changed.

關(guān)閉文檔時觸發(fā)的事件，此時重置狀態(tài)欄

　　審核編輯：湯梓紅