[Node] VSCode Extension 的编写和发布

背景

目前在开发过程中，VSCode 编辑器已经很常用了。
编写一个辅助开发 VSCode Extension 也是一种常见的需要了。

下文整理了，一个空的 VSCode Extension 的编写和发布过程。

1. VSCode Empty Extension

项目我已经建好了 github: vscode-empty

把代码克隆下来，安装依赖，执行构建，按 F5 就可以进行调试了。

$ git clone https://github.com/thzt/vscode-empty.git
$ cd vscode-empty
$ npm i
$ npm run watch

目录结构如下，

vscode-empty
├── .gitignore
├── .vscode
│   └── launch.json
├── README.md
├── icon.png
├── node_modules
├── out
├── package.json
├── src
│   └── extension.ts
└── tsconfig.json

该 Extension 用 TypeScript 进行开发，
方便获取 @types/vscode 模块导出的类型信息。

package.json、tsconfig.json 和 .vscode/launch.json 中，配了尽量少的内容。
（1）package.json
main：模块的入口文件路径
scripts.build：构建命令
scripts.watch：开发时 watch 文件的命令

publisher：VSCode Marketplace 注册的发布者名字
displayName：Extension 在 VSCode 面板中展示的名字
icon：Extension 在 VSCode 面板中展示的图标
engines.vscode：适用于哪个版本的 VSCode
activationEvents：Extension 在什么情况下激活（* 表示 VSCode 启动时就激活）

（2）tsconfig.json：TypeScript 项目配置
compilerOptions.rootDir：源码位置
compilerOptions.outDir：编译产物目录
compilerOptions.sourceMap：是否开启 source map

（3）.vscode/launch.json：调试配置
name：调试面板展示的名字
type：extensionHost 表示调试 VSCode Extension
args：[ "--extensionDevelopmentPath=${workspaceFolder}" ] Extension 的根目录
outFiles：Extension 的入口文件路径

2. Publish

完成了 Extension 开发，剩下的工作就是打包和发布了。

（1）打包
Extension 打包需要安装官方的 vsce 工具，

$ npm i -g vsce
$ cd vscode-empty  # Extension 根目录
$ vsce package  # 在 Extension 根目录执行

打包完成，会生成一个 vscode-empty-1.0.0.vsix 文件。

（2）发布
注册并登录 VSCode Marketplace，

点击右上角的，Publish extensions

点击列表标题栏 + New extension，并选择 Visual Studio Code 类型，

就会打开一个对话框，直接将 vsix 文件拖进来，或者点击上传，

就会进入审核状态，

等待大概 5 - 10 min，会审核通过，

在 VSCode 中就可以搜到了，

（3）升级版本
需要更新 Extension 时，要重新使用 vsce 打包，
然后在 VSCode Marketplace 中进行更新，

---

参考

github: vscode-empty
VSCode Marketplace
VSCode: Publishing Extensions