2022-07-06  2023-02-28    1433 字  3 分钟

当前博文以 Org Mode 格式编辑。

I have a vim, I have a emacs.
Eh~ vim-emacs!
I have a code, I have a vim-emacs.
Eh~ code-vim-emacs!
CVE!

简介

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

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

<img src="imgs/1.jpg" width="" style="float: ;" />

基础

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

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

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

安装

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

npm install -g yo generator-code

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

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

<img src="imgs/tn.jpg" width="" style="float: ;" />

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

<div class="oh-essay"> 这个过程中,唯一可能遇到的问题,就是我们提到的 Node.js 版本的问题。 </div>

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

.
├── 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

<div class="oh-essay"> 如果,你是第一次制作插件,并准备发布它,恭喜你,坑才刚刚开始,你还有一系列准备工作要完成。 </div>

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

首先,我们先准备一个 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 为插件市场提供服务,所以去申请一个账号吧,如果你还没有的话。

<div class="oh-essay"> 此处,建议使用你平时使用的微软账号。 </div>

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 文件,手动上传到插件市场,但是如果,你后续大频率更新插件的话,就会很困扰了。

最后

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