开发你的第一个vscode插件
先安装好Node.js和Git,然后安装Yeoman和VS Code Extension Generator:
安装脚手架
npm install -g yo generator-code
这个脚手架会生成一个可以立马开发的项目。运行生成器,然后填好下列字段:
yo code
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm
code ./helloworld
完成后进入 VS Code,按下F5
,你会立即看到一个插件发开主机窗口,其中就运行着插件。
在命令面板(Ctrl+Shift+P
)中输入Hello World
命令。
如果你看到了Hello World
提示弹窗,恭喜你成功了!
开发插件
现在让我们稍稍改动一下弹窗显示的内容:
- 将项目文件
extension.ts
中的Hello World
改为Hello VS Code
- 重新加载开发窗口
- 再次运行
Hello World
命令
你应该就能看到显示的消息更新了
请浏览你的项目目录和代码,然后进行下面的小练习:
- 为命令面板中的
Hello World
换一个名字 - 配置一个新的命令:打开一个提示弹窗,显示当前时间
- 用显示警告信息的VS Code API替换原本的
vscode.window.showInformationMessage
调试插件
VS Code 内置的调试功能已经非常方便了,在代码序号的左侧空白处点击一下,VS Code 就会设下断点,进入调试模式后将鼠标悬停于变量上显示变量值,或是在调试侧边栏中检查变量值,此时,你还可以用调试控制台直接对表达式求值。
使用 Javascript
‘
在本指南中,我们主要使用 TypeScript 开发 VS Code 插件,因为我们认为 TS 是开发插件的最佳实践。如果你想使用 JS,我们也同样提供了源码helloworld-minimal-sample
本节教程的源码可参考https://github.com/Microsoft/vscode-extension-samples/tree/master/helloworld-sample。 此外,插件指引章节还包含其他示例代码,每个例子都对应着不同的 VS Code Api 和发布内容配置。
发布插件
https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/working-with-extensions/publish-extension
发布方式
有3种方法:
- 方法一:直接把文件夹发给别人,让别人找到vscode的插件存放目录并放进去,然后重启vscode,一般不推荐;
- 方法二:打包成vsix插件,然后发送给别人安装,如果你的插件涉及机密不方便发布到应用市场,可以尝试采用这种方式;
- 方法三:注册开发者账号,发布到官网应用市场,这个发布和npm一样是不需要审核的。
本地打包
无论是本地打包还是发布到应用市场都需要借助vsce
这个工具。
安装:
npm i vsce -g
打包成vsix
文件:
vsce package
打包的时候如果没有设置repository
会有提示,所以最好设置一下。如果没有设置,就删除repository
生成好的vsix文件不能直接拖入安装,只能从扩展的右上角选择Install from VSIX
安装:
发布到应用市场
Visual Studio Code的应用市场基于微软自己的Azure DevOps
,插件的身份验证、托管和管理都是在这里。
- 要发布到应用市场首先得有应用市场的
publisher
账号; - 而要有发布账号首先得有
Azure DevOps
组织; - 而创建组织之前,首先得创建
Azure
账号; - 创建
Azure
账号首先得有Microsoft
账号;
注册账号
首先访问 https://login.live.com/ 登录你的Microsoft
账号,没有的先注册一个:
然后访问: https://aka.ms/SignupAzureDevOps
创建令牌
默认进入组织的主页后,点击右上角的Security
:
点击创建新的个人访问令牌,这里特别要注意Organization
要选择all accessible organizations
,Scopes
要选择Full access
,否则后面发布会失败。
创建令牌成功后你需要本地记下来,因为网站是不会帮你保存的。
创建发布账号
获得个人访问令牌后,使用vsce
以下命令创建新的发布者:
vsce create-publisher your-publisher-name
创建成功后会默认登录这个账号,接下来你可以直接发布了,当然,如果你是在其它地方创建的,可以试用vsce login your-publisher-name
来登录。
发布
vsce publish
发布成功后大概需要过几分钟才能在应用市场搜到。过几分钟就可以访问网页版的插件主页:https://marketplace.visualstudio.com/items?itemName=sxei.vscode-plugin-demo
更新
如果修改了插件代码想要重新发布,只需要修改版本号然后重新执行vsce publish
即可。
参考文档
- 【vscode中文开发文档】https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/
- 【VSCode插件开发全攻略】:https://www.cnblogs.com/liuxianan/p/vscode-plugin-publish.html
- 【JSONMeta语法】:https://macromates.com/manual/en/language_grammars