官方文档

安装Yeoman 和 VS Code Extension Generator

npm install -g yo generator-code

执行命令:yo code

VSCode 插件开发入门_插件

根据提示输入信息。

生成的目录如下:

VSCode 插件开发入门_新窗口_02

运行:打开调试窗口  也可以直接按 F5

VSCode 插件开发入门_插件_03

会打开个新窗口(如果弹出新窗口失败可以试试安装 TypeScript + Webpack Problem Matchers 插件试试)

按 CTRL + SHIFT + P 输入 hello world,选择并回车

VSCode 插件开发入门_访问令牌_04

会看到最下面的提示

VSCode 插件开发入门_新窗口_05


打包发布插件

注册一个Microsoft账号:https://marketplace.visualstudio.com/

登录后,点击右上角的用户名

VSCode 插件开发入门_打包发布_06

创建一个组织

第一个continue是选择同意条款,第二个continue上面的输入框输入组织名,下面默认即可

VSCode 插件开发入门_新窗口_07

创建一个新项目

VSCode 插件开发入门_插件_08

获取个人访问令牌
vsce只能使用个人访问令牌发布扩展

VSCode 插件开发入门_插件_09

新建令牌

VSCode 插件开发入门_插件_10

VSCode 插件开发入门_vscode_11

有效期最长时间一年,Origanization要选All accessible origanizations每个组织都可以访问它,Scopes选Full access允许所有访问

VSCode 插件开发入门_vscode_12

创建后的token,一定要自己记住,网站不会记录,只显示一次,每次发布插件或者迭代更新的时候都要输入这个token

vsce是用于打包,发布和管理VS代码扩展的命令行工具

npm install -g vsce

创建发布者:https://aka.ms/vscode-create-publisher

vsce create-publisher yunan(发布者名)

VSCode 插件开发入门_vscode_13

package.json 里加入 publisher 设置

"publisher": "yunan",

README.md 里的 http 地址要换成 https

vsce package

但是还是报错:Make sure to edit the README.md file before you package or publish your extension.

发现是因为一行的字数太多了,没办法暂时先改短一些吧

VSCode 插件开发入门_插件_14

打包成功生成 hello-0.0.1.vsix 文件

vsce publish

VSCode 插件开发入门_打包发布_15

发布成功

VSCode 插件开发入门_vscode_16