今天试着从0开始做个vscode插件,网上查了很多资料,比较绕,前后花了四五个小时才跑通。
于是梳理了本文,以 vscode 的 "js 代码片断---bst"插件为例,演示开发 & 发布 vscode 插件的全流程,试着一文以概之。
如果仍有疑问,欢迎评论,我再更新。
1. 项目初始化
(亦可参考官方文档vscode - your-first-extension)
初始化示例:项目名为bst
,插件用作Snippets
,语言为JavaScript
。
开始:
yarn global add yo generator-code
yo code
- ? What type of extension do you want to create? ——
New Code Snippets
- ? Folder name for import or none for new ——
回车即可
- ? What's the name of your extension? ——
bst
- ? What's the identifier of your extension? (bst) ——
回车即可
- ? What's the description of your extension? —— :
回车即可
- ? What's the description of your extension?
Enter the language for which the snippets should appear. The id is an identifier and is single, lower-case name su
ch as 'php', 'javascript'——
javascript
至此,工作区多了一个文件夹为bst
。
目录结构为:
2. 获得开发者账号
首先,注册axuze。
从您组织的主页(例如:) dev.azure.com/vscode,转到“ 安全性”页面:
选择Personal access tokens并单击“ 新建令牌”以创建新的个人访问令牌:
为个人访问令牌指定一个名称,可选择将其到期日期延长至1年,使其可供每个组织访问,选择自定义范围规则集并单击显示所有范围:
点击创建后,会生成一个token。务必把这个token记住。第4步发布的时候要用。
3. 修改内容(以便发布)
打开项目:
cd bst && code .
(1) 在 snippets/snippets.json 中添加内容:
{
"Button": {
"prefix": "bstbtn",
"body": [
"<Button type=\"${1|default,primary,dashed,danger|}\">$2</Button>",
""
]
}
}
(2) 在package.json里添加publisher和repository(其中,publisher为第2步申请下来的publisher):
{
...
"publisher": "yanxingzhe",
"repository": {
"type": "git",
"url": "https://github.com/anyexinglue/bst-snippets/"
}
...
}
(3) 修改下readme.md(否则也发布不了),内容任意。
4. 打包和发布
亦可参考官方的publishing-extensions
第3步,修改完便可以打包发布了。
- 首先需要安装vsce:
yarn global add vsce
- 登录:
vsce login yanxingzhe
(如果没有,可以登录管理页创建) - 打包出带
.vsix
后缀的包:vsce package
- 发布:
vsce publish
至此,全流程已走通,几分钟后,邮件通知发布成功,便可在vscode插件安装区下载 marketplace.visualstudio.com/items?itemN…
vscode中安装后:
5. Demo项目
以上创建的demo代码:github.com/anyexinglu/… ,是基于vscode 的 "js 代码片断---bst"插件。
如果想发布自己的 snippet 插件,可以:
(1)直接 fork 本项目,修改 snippets 里的 snippets.json,和 package.json 里的 publisher 即可。
- 打包:
vsce package
(非必须,可以直接发布) - 发布:
vsce publish v0.0.2
(2)按本文,从第1步项目初始化开始~