從零編寫 & 發佈一個 VSCode 擴展

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

需求

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

調研

剛好目前擴展市場上沒有統計 📁 文件夾相關的擴展，只有統計 📃 單個文件的，好比：File Size

因此仍是本身造輪子吧

預覽

試用

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

開發

快速入門

三個比較好的入門方法：

1. 閱讀官方文檔
2. 使用官方示例快速入門
3. 閱讀同類型擴展源碼

你們都知道 VSCode 是用 TypeScript 寫的，因此 VSCode 擴展天然是擁抱 TS 的，固然也能夠用 JS 編寫。

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

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

功能實現

目前 Folder Size 具有三個小功能：

1. 統計文件大小
2. 統計文件夾大小
3. 統計文件夾中文件的個數

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

調試

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

• OutputChannel
• showInformationMessage
• showTextDocument

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

發佈

擴展發佈須要註冊 Azure 帳號，VSCode 使用 Azure DevOps 做爲擴展市場服務，簡單四步：

1. 建立 Azure 帳號，獲取 Personal Access Token
2. vsce 建立 publisher，須要 Token，對應 package.json 中聲明的 publisher
3. vsce 以建立的 publisher 登陸，須要 Token
4. 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.

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

---

參考

• https://code.visualstudio.com/api
• https://code.visualstudio.com/api/working-with-extensions/publishing-extension

原文： https://www.xlbd.me/posts/202...