实例演示vscode插件开发 & 发布全流程

2,558 阅读2分钟

今天试着从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步项目初始化开始~