VSCode 插件 CVE Keymap 的开发记录

开发和编译 VSCode 插件，需要做一些准备工作，确保当前环境已经安装了 Node.js 和 Git ，然后执行以下命令安装 yeoman 和 VSCode Extension Generator 。

npm install -g yo generator-code

# 使用脚手架创建插件模板， myextension 是你的插件名称
yo code myextension

注意， Node.js 的版本不能太低，本机使用的是 16+ ，最低不要低于 14 ，不然有些依赖不兼容。如果，你的已有项目依赖低版本的 Node.js （哎，历史项目啦），那么你需要 nvm 。

我们选择 New Keymap 模板，其他模板请自行了解 😅。

一系列操作之后，就生成了我们的插件目录。如下：

.
├── CHANGELOG.md
├── .git
├── .gitattributes
├── .gitignore
├── package.json
├── README.md
├── vsc-extension-quickstart.md
├── .vscode
└── .vscodeignore

2 directories, 7 files

使用 VSCode 打开该目录，即可进行开发工作了。具体细节，请参考官方文档。

开发过程中，可以使用 F5 进入到调试预览模式，它会新打开一个 VSCode 窗口（微软良心开发工具 🥰）。

在插件开发完成之后呢，就可以打包成 VSIX 格式的插件包分享给其他小伙伴使用了。更多了解 Publishing Extensions。

打包、发布在配置完成之后，后续执行都是很简单的。

首先，我们先准备一个 CLI 工具 – vsce ，来管理我们的 VSCode 插件。安装：

npm install -g vsce

而后执行 vsce package 即可完成打包。But 你也大概率可能会遇到以下问题，来看看吧。

# 问题 1
Error:Make sure to edit the README.md file before you publish your extension.

直接删除目录中的 README.md ，新建一个写些说明保存提交即可。 不要用原文件进行修改，我这边试了好多次都通不过，一直报上述错误。

> 注意：同于安全考虑， vsce 不允许插件中包含用户自己添加的 SVG 格式图片，且远程图片链接要使用 https URLs 。

1. 获取 PAT

因为 VSCode 使用 Azure DevOps 为插件市场提供服务，所以去申请一个账号吧，如果你还没有的话。

vsce 可以通过 Personal Access Tokens 发布扩展，所以，如果我们想要更加方便的发布插件，就需要先创建一个 PAT(Personal Access Tokens ，私人访问令牌) 。如何创建呢？点击这里查看 。

注意：给 PAT 复制下来记录一下，关了页面之后 ，你就再也找不到了。

2.创建 publisher

# 问题 2
Error:Missing publisher name. Learn more:https://code.visualstudio.com...

publisher 自然就是发布者了，它是插件市场的一种身份认证，随后你需要在 package.json 中插入 "publisher": "xxxx" 类似行，更多详情查看 package.json 。

我们可以通过插件市场的 management page 来创建一个 publisher 。

注意，这里需要使用申请 PAT 时的那个微软账号（要一致）。

创建完成之后 ，我们可以使用通过下述命令进行验证：

vsce login <publisher name>

3. 发布

通过验证后，后续只需要执行如下命令，就可以方便地发布你的插件到插件市场了。

vsce publish

当然，我们也可以使用 vsce package 打包的 VSIX 文件，手动上传到插件市场，但是如果，你后续大频率更新插件的话，就会很困扰了。