当前博文以 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 ,本文做一些插件开发过程中遇到问题的记录。
![[assets/Pasted image 20230526112823.png]]
基础
磨刀不误砍柴工,先补了一下基础知识和概念。
一次偶然的机会,看到极客教程中的 VSCode 模块 ,里面系统性的介绍了 VSCode 的一些实现原理( 部分命令可能有些老旧,但无伤大雅)。大家如果感兴趣,可以点进去阅读一下。
当然,你也可以直接阅读官方文档。
安装
开发和编译 VSCode 插件,需要做一些准备工作,确保当前环境已经安装了 Node.js 和 Git ,然后执行以下命令安装 yeoman 和 VSCode Extension Generator 。
|
|
注意, 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 插件。安装:
|
|
而后执行 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 时的那个微软账号(要一致)。
创建完成之后 ,我们可以使用通过下述命令进行验证:
|
|
3. 发布
通过验证后,后续只需要执行如下命令,就可以方便地发布你的插件到插件市场了。
|
|
当然,我们也可以使用 vsce package
打包的 VSIX
文件,手动上传到插件市场,但是如果,你后续大频率更新插件的话,就会很困扰了。
最后
怎么说呢?初看可能很繁琐,但其实按照官方教程一步步进行操作,遇到问题后再搜索查询一下,整个过程还是很容易完成的。Just go ! 🌟