记一次主题插件发布

Friday, May 14, 2021

起因

看了一年多vscode原生的dark+主题,开始逐渐厌倦,于是开始寻找合眼缘的主题插件

寻了很多圈,发现了一个问题,这些第三方主题的语法高亮部分,始终看的不太习惯,但是他们的背景主题色却让我十分着迷

image-20210514173356854

以monokai为例,它的背景色很好看,但是这个语法高亮却是一言难尽,让我十分怀念vscode默认的语法高亮

image-20210514173815059

要是可以用monokai的背景色和默认的语法高亮那该多好阿,此时的我有了这种想法,想到就开干,我开始搜索vscode的主题是怎么生效的,发现是通过json文件配置的,那我把monokai的背景色段的配置文件,复制到原生的dark+不就好了吗(确实儿)

image-20210514174423357

于是我去github找到了monkai的json配置文件,然后将它替换了默认dark主题的color,成功了吗?成功了,圆满成功

image-20241125165401502

image-20210514174618419

没错,这就是我想要的效果,舒服了

但从标题上看,这是主题插件发布的记录,后面又发生了什么呢?

上面的主题开心用了一个多星期后,vscode更新了,我和往常一样点了重启vscode,再次打开时,它又回到了从前那个“经典”的配色了,看来默认文件更新会被覆盖,我总不能每更新一次就手动改一次dark+的配置文件吧,这也太蠢了

于是乎,我想到monokai是从主题商店下载的,那我也把我本地用的这份主题,也上传到商店不就好了吗,插件是不会被初始化的

发布插件

发布vscode插件可以使用vscode团队提供的工具

npm install -g yo generator-code

插件开发

安装成功后,只需要输入yo code即可创建插件

image-20210514181302667

选择插件类型后,再把插件相关信息填好,工具就会为我们创建好插件项目文件

我们可以使用vscode打开项目后,通过F5/Debug验证插件是否可以正常运行再继续开发

因为我的目的只是为了自己方便使用主题,所以我简单的将本地dark+和monokai的主题配置文件融合后就开始准备发布了,没有先本地跑一遍,自信了

插件上传

官方流程文档

  1. 注册一个微软账号

  2. 用微软账号登录Azure DevOps

  3. 创建一个组织

  4. 创建一个项目

  5. 生成一个Personal access token (记得保存阿)

  6. 安装vsce打包工具

    npm install -g vsce

  7. 使用vsce工具命令创建发布账号

    vsce create-publisher name(name指你注册的publisher name)

  8. 登录账号

    vsce login your-publisher-name

  9. 发布插件

    vsce publish

发布后可以在插件管理里查看插件的发布状态,需要一定时间,发布成功后即可在vscode中直接搜索自己的插件啦

结局

经过一段折腾,我在vscode搜到了自己的插件,抱着激动的心我点下了安装并选择该主题颜色

image-20210514183036812

装完,不对劲,有问题,语法高亮无了,这又是为什么阿

于是乎我又探索了一段时间,发现语法高亮是由tokenColors这个字段控制的,dark+主题里并没有对语法高亮进行设置,我猜测是判断为非默认主题后,就不会给你使用默认的高亮配置,按你插件主题的tokenColors配置,又因为我的tokenColors几乎为空,所以语法高亮也几乎没有,难受阿

真·瞎折腾半天,那咋办呢,我又(百度)查了一段时间,想知道vscode默认的语法高亮配置参数是什么,可没有找到,最终我去谷歌搜了一下,发现Stack Overflow有和我一样需求的哥们提出了问题

从回答中可以知道vscode设置中workbench.colorCustomizationseditor.tokenColorCustomizations参数可以直接设置语法高亮和背景颜色,

Customizing a Color Theme

最终,我在setting.json里贴上了monokon的color配置

image-20210514184129755

达到了我想要的效果,这波阿,这波真是一波三折阿