从零编写和发布一个VSCode扩展

第第页从零编写和发布一个VSCode扩展年初在TO-DO上计划了一个任务，是以解决自身需求为目的，开发一个VSCode扩展。

需求

最近一个小需求来了，能否在不离开VSCode编辑器的情况下，「查看文件或者文件夹的大小」。

调研

恰好目前扩展市场上没有统计文件夹相关的扩展，只有统计单个文件的，比如：「FileSize」

所以还是自己造轮子吧

预览

FolderSizePreview

试用

从网页安装，FolderSize，或者从扩展商店搜索

FolderSizeInstall

开发

快速入门

三个比较好的入门方法：

阅读官方文档

使用官方示例快速入门

阅读同类型扩展源码

大家都知道VSCode是用TypeScript写的，所以VSCode扩展自然是拥抱TS的，当然也可以用JS编写。

阅读同类型扩展代码的时候，发现大部分的扩展实现的统计文件信息的方式都不太一样，有的简单，有的复杂。

其实我这个需求官方文档上的例子完全就可以Cover住，我做的呢，只是整合了我所需要的功能特性，打开/选择文件的时候，可以在StatusBar(状态栏)显示格式为：[File|Folder]这样的文案。这样我就可以在不离开VSCode编辑器的情况下统计到了文件及文件夹的信息。

功能实现

目前「FolderSize」具备三个小功能：

统计文件大小

统计文件夹大小

统计文件夹中文件的个数

这些功能都是基于workspace的事件钩子去触发的，在打开或切换文件、保存文件、关闭文件时触发统计，下面会讲到A（PI）用法。

调试

没玩明白如何用VSCode自带的debug调试扩展的我，只能用打印内容来调试，VSCode

Ex（te）nsion有几个可以用于打印调试的功能。比如：

OutputChannel

showInformationMessage

showTextDocument

利用vsce工具进行打包为VSIX各式的文件，即VSCode扩展本地安装格式。也可以将文件发给他人测试。

发布

扩展发布需要注册Azure账号，VSCode使用AzureDevOps作为扩展市场服务，简单四步：

创建Azure账号，获取Pe（rs）onalAccessToken

vsce创建publisher，需要Token，对应package.json中声明的publisher

vsce以创建的publisher登录，需要Token

vsce发布

API

FolderSize扩展无任何第三方依赖，完全基于VSCode

ExtensionAPI进行开发，下面是用到的所有API，简单介绍下API用法

window

window.createOutputChannel

Anoutputchannelisacont（ai）nerforre（ad）onlytextualinformation.

对应VSCode里面的输出窗口，可以利用这个输出内容调试

window.showInformationMessage

Showaninforma（ti）onmessagetousers.Optionallyprovideanarrayofitemswhichwillbepresentedasclickablebuttons.

对应VSCode信息提示框，同样可以用于调试，也可以结合注册命令，给用户友好提示信息。

window.createStat（usB）arItem

Createsastatusbaritem.

创建一个状态栏实例，可以显示文本，控制显隐。

window.activeTextEditor

Thecurrentlyactiveeditororundefined.Theactiveeditoristheonethatcurrentlyhasfocusor,whennonehasfocus,theonethathaschangedinputmostrecently.

用于获取当前选中文件的URI

commands

mands.registerCommand

Registersacommandthat（can）beinvokedviaakeyboardshortcut,amenuitem,anaction,ordirectly.

Registeringacommandwithanexistingcommandidentifiertwicewillcauseanerror.

注册一个命令，比如给状态栏注册点击反馈命令

workspace

vscoce.workspace.fs.stat

Returnsthemetadataforafile.

用于统计当前选中文件的大小

vscode.workspace.fs.readDirectory

Allowstoretrieveallentriesofadirectory

读取当前选中文件的文件夹，可用此方法递归文件夹，统计文件夹大小

vscode.workspace.getConfiguration

Getaworkspaceconfigurationobject.

获取工作区配置项，用于扩展可自定义的配置项。

需要声明在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

Aneventthatisemittedwhenatextdocumentissavedtodisk.

保存文档时触发的事件，此时统计文件大小、文件夹大小

vscode.workspace.onDidOpenTextDocument

Aneventthatisemittedwhenatextdocumentisopenedorwhenthelanguageidofatextdocumenthasbeenchanged.

打开文档时触发的事件，此时统计文件大小、文件夹大小

vscode.workspace