從零編寫和發布一個VSCode擴展

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

需求

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

調研

恰好目前擴展市場上沒有統計文件夾相關的擴展，只有統計單個文件的，比如：「File Size」

所以還是自己造輪子吧

預覽

Folder Size Preview

試用

從網頁安裝，Folder Size，或者從擴展商店搜索

Folder Size Install

開發

快速入門

三個比較好的入門方法：

閱讀官方文檔

使用官方示例快速入門

閱讀同類型擴展源碼

大家都知道 VSCode 是用 TypeScript 寫的，所以 VSCode 擴展自然是擁抱 TS 的，當然也可以用 JS 編寫。

閱讀同類型擴展代碼的時候，發現大部分的擴展實現的統計文件信息的方式都不太一樣，有的簡單，有的復雜。

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

功能實現

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

統計文件大小

統計文件夾大小

統計文件夾中文件的個數

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

調試

沒玩明白如何用 VSCode 自帶的 debug 調試擴展的我，只能用打印內容來調試，VSCode ?Extension 有幾個可以用于打印調試的功能。比如：

OutputChannel

showInformationMessage

showTextDocument

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

發布

擴展發布需要注冊 Azure 賬號，VSCode 使用 Azure DevOps 作為擴展市場服務，簡單四步：

創建 Azure 賬號，獲取 Personal Access Token

vsce 創建 publisher，需要 Token，對應 package.json 中聲明的 publisher

vsce 以創建的 publisher 登錄，需要 Token

vsce 發布

API

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

window

window.createOutputChannel

An output channel is a container for readonly textual information.

對應 VSCode 里面的輸出窗口，可以利用這個輸出內容調試

window.showInformationMessage

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

對應 VSCode 信息提示框，同樣可以用于調試，也可以結合注冊命令，給用戶友好提示信息。

window.createStatusBarItem

Creates a status bar item.

創建一個狀態欄實例，可以顯示文本，控制顯隱。

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.

用于獲取當前選中文件的 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.

注冊一個命令，比如給狀態欄注冊點擊反饋命令

workspace

vscoce.workspace.fs.stat

Returns the meta data for a file.

用于統計當前選中文件的大小

vscode.workspace.fs.readDirectory

Allows to retrieve all entries of a directory

讀取當前選中文件的文件夾，可用此方法遞歸文件夾，統計文件夾大小

vscode.workspace.getConfiguration

Get a workspace configuration object.

獲取工作區配置項，用于擴展可自定義的配置項。

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

用擴展去統計 node_modules 這個“黑洞”，可能會占用一定內存哦，還是忽略比較好。

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

保存文檔時觸發的事件，此時統計文件大小、文件夾大小

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.

打開文檔時觸發的事件，此時統計文件大小、文件夾大小

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.

關閉文檔時觸發的事件，此時重置狀態欄

　　審核編輯：湯梓紅

閱讀全文