背景

目前在開發(fā)過程中，VSCode 編輯器已經(jīng)很常用了。
編寫一個輔助開發(fā) VSCode Extension 也是一種常見的需要了。

下文整理了，一個空的 VSCode Extension 的編寫和發(fā)布過程。

1. VSCode Empty Extension

項目我已經(jīng)建好了 github: vscode-empty

把代碼克隆下來，安裝依賴，執(zhí)行構(gòu)建，按 F5 就可以進行調(diào)試了。

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

目錄結(jié)構(gòu)如下，

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

該 Extension 用 TypeScript 進行開發(fā)，
方便獲取 @types/vscode 模塊導(dǎo)出的類型信息。

package.json、tsconfig.json 和 .vscode/launch.json 中，配了盡量少的內(nèi)容。
（1）package.json
main：模塊的入口文件路徑
scripts.build：構(gòu)建命令
scripts.watch：開發(fā)時 watch 文件的命令

publisher：VSCode Marketplace 注冊的發(fā)布者名字
displayName：Extension 在 VSCode 面板中展示的名字
icon：Extension 在 VSCode 面板中展示的圖標(biāo)
engines.vscode：適用于哪個版本的 VSCode
activationEvents：Extension 在什么情況下激活（* 表示 VSCode 啟動時就激活）

（2）tsconfig.json：TypeScript 項目配置
compilerOptions.rootDir：源碼位置
compilerOptions.outDir：編譯產(chǎn)物目錄
compilerOptions.sourceMap：是否開啟 source map

（3）.vscode/launch.json：調(diào)試配置
name：調(diào)試面板展示的名字
type：extensionHost 表示調(diào)試 VSCode Extension
args：[ "--extensionDevelopmentPath=${workspaceFolder}" ] Extension 的根目錄
outFiles：Extension 的入口文件路徑

2. Publish

完成了 Extension 開發(fā)，剩下的工作就是打包和發(fā)布了。

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

$ npm i -g vsce
$ cd vscode-empty  # Extension 根目錄
$ vsce package  # 在 Extension 根目錄執(zhí)行

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

（2）發(fā)布
注冊并登錄 VSCode Marketplace，

點擊右上角的，Publish extensions

點擊列表標(biāo)題欄 + New extension，并選擇 Visual Studio Code 類型，

就會打開一個對話框，直接將 vsix 文件拖進來，或者點擊上傳，

就會進入審核狀態(tài)，

等待大概 5 - 10 min，會審核通過，

在 VSCode 中就可以搜到了，

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

參考

github: vscode-empty
VSCode Marketplace
VSCode: Publishing Extensions