VSCode护眼绿主题插件开发

鉴于上一篇文章《修改VSCode的主题颜色为护眼绿》，操作方法为修改隐藏很深的settings.json，对于新手或者不喜欢折腾的朋友可能不太方便，所以就有了做一个主题插件的想法，以下为成品笔记。

1. 安装yo和generator-code

npm install -g yo generator-code

2. 初始化一个新插件

yo code

3. 配置package.json

修改 icon keywords bugs homepage repository badges

__metadata 会随着VSCode加载自动设置，前提插件在~/.vscode/extensions下

详细修改见我的源码: vscode-theme-green-eyecare

4. 修改themes下的json文件

确保json文件以.color-theme.json结尾，此类文件VSCode会有输入提示

不确定某个地方的textmate scopes写法时，可通过F1或cmd+shift+p打开快捷指令，输入: 开发人员: 检查编辑器标记和作用域(英文名字: Inspet Editor Token And Scopes)打开textmate scopes提示，一般输入前几个字母就会出来结果，如下图

然后点击任意位置，就会有相应textmate scopes的提示弹出，如下图

如果希望知道制作一个主题需要修改哪些textmate scopes，欢迎参考我的源码: vscode-theme-green-eyecare

5. 发布

1. 安装打包发布工具

   npm i vsce -g

2. 登录AzureDevOps，右上角创建Personal access tokens，复制供下一步使用

   生成时一定要注意，否则会报401

   • Organization一定要选All accessible organizations
   • Scopes一定要选Full access

3. 新增发布者（会要求输入Personal access tokens）

   vsce create-publisher 自定义

4. 修改package.json中的publisher

5. 发布

   vsce publish

6. 更新版本 - 2020-06-17

1. 修改package.json中的version
2. 发布

   vsce publish

7. 插件成品

7.1. 预览图

Enjoy!