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

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

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

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

参考

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

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

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

准备

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

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

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

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

开发

1 2	# 初始化代码 yo code

结果如下：

$ 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 后按回车来选择。

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

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

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

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

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

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

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

{
  "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

构建

# 安装打包&发布工具
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账号；
同时一个组织可以创建多个PAT（Personal Access Token，个人访问令牌）；

注册账号

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

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

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

创建令牌

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

点击创建新的个人访问令牌，这里特别要注意Organization要选择all accessible organizations，Scopes要选择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

发布成功后大概需要过几分钟才能在应用市场搜到。过几分钟就可以访问网页版的插件主页：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)

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

在插件市场官网创建发布人

上传插件

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

发布注意事项

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 包上传到官网即可。

参考