起因
看了一年多vscode原生的dark+主题,开始逐渐厌倦,于是开始寻找合眼缘的主题插件
寻了很多圈,发现了一个问题,这些第三方主题的语法高亮部分,始终看的不太习惯,但是他们的背景主题色却让我十分着迷
以monokai为例,它的背景色很好看,但是这个语法高亮却是一言难尽,让我十分怀念vscode默认的语法高亮
要是可以用monokai的背景色和默认的语法高亮那该多好阿,此时的我有了这种想法,想到就开干,我开始搜索vscode的主题是怎么生效的,发现是通过json文件配置的,那我把monokai的背景色段的配置文件,复制到原生的dark+不就好了吗(确实儿)
于是我去github找到了monkai的json配置文件,然后将它替换了默认dark主题的color,成功了吗?成功了,圆满成功
没错,这就是我想要的效果,舒服了
但从标题上看,这是主题插件发布的记录,后面又发生了什么呢?
上面的主题开心用了一个多星期后,vscode更新了,我和往常一样点了重启vscode,再次打开时,它又回到了从前那个“经典”的配色了,看来默认文件更新会被覆盖,我总不能每更新一次就手动改一次dark+的配置文件吧,这也太蠢了
于是乎,我想到monokai是从主题商店下载的,那我也把我本地用的这份主题,也上传到商店不就好了吗,插件是不会被初始化的
发布插件
发布vscode插件可以使用vscode团队提供的工具
npm install -g yo generator-code
插件开发
安装成功后,只需要输入yo code
即可创建插件
选择插件类型后,再把插件相关信息填好,工具就会为我们创建好插件项目文件
我们可以使用vscode打开项目后,通过F5/Debug验证插件是否可以正常运行再继续开发
因为我的目的只是为了自己方便使用主题,所以我简单的将本地dark+和monokai的主题配置文件融合后就开始准备发布了,没有先本地跑一遍,自信了
插件上传
-
注册一个微软账号
-
用微软账号登录Azure DevOps
-
创建一个组织
-
创建一个项目
-
生成一个Personal access token (记得保存阿)
-
安装vsce打包工具
npm install -g vsce
-
使用vsce工具命令创建发布账号
vsce create-publisher name
(name指你注册的publisher name) -
登录账号
vsce login your-publisher-name
-
发布插件
vsce publish
发布后可以在插件管理里查看插件的发布状态,需要一定时间,发布成功后即可在vscode中直接搜索自己的插件啦
结局
经过一段折腾,我在vscode搜到了自己的插件,抱着激动的心我点下了安装并选择该主题颜色
装完,不对劲,有问题,语法高亮无了,这又是为什么阿
于是乎我又探索了一段时间,发现语法高亮是由tokenColors
这个字段控制的,dark+主题里并没有对语法高亮进行设置,我猜测是判断为非默认主题后,就不会给你使用默认的高亮配置,按你插件主题的tokenColors
配置,又因为我的tokenColors
几乎为空,所以语法高亮也几乎没有,难受阿
真·瞎折腾半天,那咋办呢,我又(百度)查了一段时间,想知道vscode默认的语法高亮配置参数是什么,可没有找到,最终我去谷歌搜了一下,发现Stack Overflow有和我一样需求的哥们提出了问题,
从回答中可以知道vscode设置中workbench.colorCustomizations
,editor.tokenColorCustomizations
参数可以直接设置语法高亮和背景颜色,
最终,我在setting.json里贴上了monokon的color配置
达到了我想要的效果,这波阿,这波真是一波三折阿