从零编写 & 发布一个 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...