vscode 插件开发

应用商店地址: https://marketplace.visualstudio.com/items?itemName=MrLeo.zpm

每个程序猿都有很多自己的代码片段,没到使用的时候都是 Ctrl+C & Ctrl+V 粘过来粘过去,对于一个爱偷懒的程序猿,这样的重复工作能不能减少呢。

工欲善其事必先利其器。vscode 作为优秀的开发工具,给我的日常开发工作提供了极大的便利。其拓展机制更是如此。

于是便想着自己来开发这么个东西来管理自己的代码片段,一方面方便后边自己使用,一方面也能学习下 vscode 的插件开发、发布方法,另一方面要是发布后对其他人有所帮助就更好了。

参考

  • VS Code 插件开发文档-中文版
  • VSCode 插件开发全攻略
  • 插件市场 / 插件管理
  • 使用 Webapck 优化 VS Code 插件加载性能

vscode 插件开发、发布主要流程

  1. 插件开发前的准备:vscode、nodejs、vscode 插件生产工具、git、微软账号
  2. 插件开发:插件构思、官方文档查阅
  3. 插件发布:打包、上传、插件市场操作
  4. 插件维护:更新迭代后打包、上传、插件市场操作

准备

vscode、nodejs、git、微软账号,这个的准备无需多说。

vscode 插件生产工具:官方推荐使用 Yeoman 和 VS Code Extension Generator。用如下命令安装:

1
2
# 插件生成器
npm install -g yo generator-code

至此开发所需的准备已做好。

开发

1
2
# 初始化代码
yo code

结果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ yo code

_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
(Move up and down to reveal more choices)

在 os 系统上通过上下键来选择要创建的类型,在 win 上输入 1、2、3 后按回车来选择。

其余步骤根据提示即可。得到如下结构目录结构:

1
2
3
4
5
6
7
8
9
.
├── .vscode // 资源配置文件
├── CHANGELOG.md // 更改记录文件,会展示到vscode插件市场
├── README.md // 插件介绍文件,会展示到vscode插件市场
├── logo.png // 插件图标
├── package.json // 资源配置文件
├── snippets // 存放所有片段
│   └── javascript.json // javascript的代码片段
└── vsc-extension-quickstart.md

ps:其余项目类型的文档目录可能会有所差别,以生成的文件目录为准。在 snippet 拓展项目下,最重要的就是snippets/*.jsonpackage.json`

如果不知道如何编写 snippet 文件,可以使用snippet-generator生成你需要的代码片段

如果想知道具体 vscode 支持的代码片段格式,可以阅读:Creating your own snippets

开发其他 vscode 插件,可以查阅文档vscode-api

添加不同语言的代码片段,只需要在snippets文件夹中添加对应语言的.json文件,然后向package.json文件的contributes.snippets属性中添加片段文件路径并制定应用的语言 👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
"name": "zpm-snippet", // 插件的名称必须用全小写无空格的字母组成。
"displayName": "zpm-snippet", // 插件市场所显示的插件名称。
"description": "智联 ZPFE API 项目 VSCode 代码片段", // 简单地描述一下你的插件是做什么的。
"version": "0.0.10", // 版本号
"publisher": "MrLeo", // 发行方名称
"icon": "logo.png", // 应用图标
// 插件市场所显示的插件关联的github仓库
"repository": {
"type": "git",
"url": "https://github.com/MrLeo/zpm-snippet.git"
},
// 一个至少包含vscode字段的对象,其值必须兼容 VS Code版本。
// 不可以是*。
// 例如:^0.10.5 表明最小兼容0.10.5版本的VS Code。
"engines": {
"vscode": "^1.31.0"
},
// 你想要使用的插件分类,可选值有:[Programming Languages, Snippets,
// Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers,
// Other, Extension Packs, Language Packs]
"categories": ["Snippets"],
// 描述插件发布内容的对象。
"contributes": {
"snippets": [
{
"language": "javascript",
"path": "./snippets/javascript.json"
}
]
}
}

更多插件清单文件说明:package.json

构建

1
2
3
4
5
# 安装打包&发布工具
npm install -g vsce

# 打包插件
vsce package

打包成功后会在根目录下得到:zpm-snippet-0.0.10.vsix文件

发布

方式一:vsce publish 工具发布

用 vsce 的vsce publish工具来发布,但是需要在官网配置Personal Access Token较为繁琐。

可参考官方教程 / 发布应用市场

Visual Studio Code 的应用市场基于微软自己的Azure DevOps,插件的身份验证、托管和管理都是在这里。

  • 要发布到应用市场首先得有应用市场的publisher账号;
  • 而要有发布账号首先得有Azure DevOps组织;
  • 而创建组织之前,首先得创建Azure账号;
  • 创建Azure账号首先得有Microsoft账号;

是不是有点晕,梳理一下:

  • 一个 Microsoft 账号可以创建多个Azure组织;
  • 一个组织可以创建多个publisher账号;
  • 同时一个组织可以创建多个PATPersonal Access Token,个人访问令牌);

注册账号

首先访问 https://login.live.com/ 登录你的Microsoft账号,没有的先注册一个:

然后访问: https://aka.ms/SignupAzureDevOps ,如果你从来没有使用过 Azure,那么会看到如下提示:

点击继续,默认会创建一个以邮箱前缀为名的组织。

创建令牌

默认进入组织的主页后,点击右上角的Security

点击创建新的个人访问令牌,这里特别要注意Organization要选择all accessible organizationsScopes要选择Full access,否则后面发布会失败。

创建令牌成功后你需要本地记下来,因为网站是不会帮你保存的。

创建发布账号

获得个人访问令牌后,使用vsce以下命令创建新的发布者:

1
vsce create-publisher your-publisher-name

your-publisher-name必须是字母数字下划线,这是全网唯一的账号,然后会依次要求输入昵称、邮箱、令牌:

创建成功后会默认登录这个账号,接下来你可以直接发布了,

当然,如果你是在其它地方创建的,可以试用vsce login your-publisher-name来登录。

除了用命令之外,你还可以使用网页版创建发布账号:https://marketplace.visualstudio.com/manage

发布

发布很简单:

1
vsce publish

img

发布成功后大概需要过几分钟才能在应用市场搜到。过几分钟就可以访问网页版的插件主页:https://marketplace.visualstudio.com/items?itemName=MrLeo.zpm-snippet

增量发布

版本号:major.minor.patch

如果想让发布之后版本号的 patch 自增,例如:1.0.2 -> 1.0.3,可以这样:

1
vsce publish patch

执行这个命令后会自动修改package.json里面的版本号。同理,vsce publish minor也是可以的。

取消发布

1
vsce unpublish (publisher name).(extension name)

方式二:在官网直接上传发布

插件市场官网创建发布人

image-20190312113750984

上传插件


上传后点击确定即可发布成功。

发布注意事项

  • README.md文件默认会显示在插件主页;
  • README.md中的资源必须全部是HTTPS的,如果是HTTP会发布失败;
  • CHANGELOG.md会显示在变更选项卡;
  • 如果代码是放在 git 仓库并且设置了 repository 字段,发布前必须先提交 git,否则会提示Git working directory not clean

另外,如前面所说,如果Organization没有选择all accessible organizations,或者Scopes没有选择Full access,发布的时候可能会报如下错误:

1
2
3
Error: Failed Request: Unauthorized(401) - https://marketplace.visualstudio.com/_apis/gallery
Be sure to use a Personal Access Token which has access to **all accessible accounts**.
See https://code.visualstudio.com/docs/tools/vscecli#_common-questions for more information.

检查

  • 在插件市场官网看状态

  • 在插件市场官网搜索

  • 在 vscode 插件页搜索

维护

在发现 bug 和新功能开发完成后,需要更新插件,只需要将新生产的.vsix 包上传到官网即可。

坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文作者: Leo
  • 本文链接: https://xuebin.me/posts/a0508b9c.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!