共计 2903 个字符，预计需要花费 8 分钟才能阅读完成。
年初在 TO-DO 上打算了一个工作，是以解决本身需要为目标，开发一个 VSCode 扩大。
需要
最近一个小需要来了，是否在不来到 VSCode 编辑器的状况下， 查看文件或者文件夹的大小 。
调研
恰好目前扩大市场上没有统计 ???? 文件夹相干的扩大，只有统计 ???? 单个文件的，比方：File Size
所以还是本人造轮子吧
预览
试用
从网页装置，Folder Size，或者从扩大商店搜寻
开发
疾速入门
三个比拟好的入门办法：
- 浏览官网文档
- 应用官网示例疾速入门
- 浏览同类型扩大源码
大家都晓得 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.
敞开文档时触发的事件，此时重置状态栏
参考
- https://code.visualstudio.com/api
- https://code.visualstudio.com/api/working-with-extensions/publishing-extension
原文：https://www.xlbd.me/posts/202…