電子發燒友App
年初在 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.
關閉文檔時觸發的事件，此時重置狀態欄
審核編輯：湯梓紅
工商網監
評論