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

关闭文档时触发的事件，此时重置状态栏

　　审核编辑：汤梓红