VSCode 插件 CVE Keymap 的开发记录

简介

在 [[键位映射那些事儿]] 中， blablabla…… 说了好多。之前，我一直在个人电脑上使用 vscode ，各种插件和键位设置都是可以自动同步的。然而，当切换到别人的电脑时，就又不得不面对原版的键位模式。还是那句话，不是不能接受，只是有点困扰，哎，处女座……

于是，我开发了一款简单易用的 vscode 插件 – CVE Keymap ，本文做一些插件开发过程中遇到问题的记录。

![[assets/Pasted image 20230526112823.png]]

基础

磨刀不误砍柴工，先补了一下基础知识和概念。

一次偶然的机会,看到极客教程中的 VSCode 模块 ,里面系统性的介绍了 VSCode 的一些实现原理（部分命令可能有些老旧，但无伤大雅）。大家如果感兴趣，可以点进去阅读一下。

当然，你也可以直接阅读官方文档。

安装

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

1
2
3
4


npm install -g yo generator-code

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

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

![[assets/Pasted image 20230526112833.png]]

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

:: 这个过程中，唯一可能遇到的问题，就是我们提到的 Node.js 版本的问题。

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

.
├── 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 插件。安装：

1

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 时的那个微软账号（要一致）。

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

1

vsce login <publisher name>

3. 发布

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

1

vsce publish

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

最后

怎么说呢？初看可能很繁琐，但其实按照官方教程一步步进行操作，遇到问题后再搜索查询一下，整个过程还是很容易完成的。Just go ！ 🌟