制作自己的Vscode主题插件

0x00.缘起

折腾是技术宅的美德，作为一个vscode的深度使用者以及一个挑剔的人，vscode扩展商店里的众多主题我都不是很喜欢，唯独有一款名为Darktooth theme的主题我一直很喜欢，它的配色正是我喜欢的风格，而转折发生在使用vscode书写markdown之后，我发现这款主题并不支持markdown的语法高亮，而在扩展商店搜寻许久也没找到看着特别喜欢的主题，遂决定自行开发一款自己的主题，于是就有了All-Gray的故事

下载地址：VsCode扩展商店地址
Github地址

下面来具体说说怎么开发，我回先说怎么去开发插件，然后再说插件的发布

0x01.主题插件的开发

（1）安装扩展生成器

在命令行执行以下命令安装（注意你一定要有npm环境，没有的话可以上网搜下怎么安装，很简单，不再赘述）：

npm install -g yo generator-code

进入（Windows下）C:\Users\lenovo\.vscode\extensions目录，输入

yo code

命令来运行代码生成器：

我们用上下键选择第三项 New Color Theme

Enter 进入，这时候他会问你是从头开始新建一个新主题还是还是导入一个主题在它上面修改，由于我们是完全自己设计，故选择第一个：

这是后它会问你这几个问题，第一个是你扩展的名字是什么，第二个问你扩展的标识是什么，第三个问描述，第四个问你希望用什么名字展示给使用者，即你在扩展商店发布后的名字，这里如无特殊需要，第一二四个问题填你起的名字即可，第三个填写简单的描述就可以，暂时不填也可，在文件里填写就行

成功后大致如下：

（2）配置主题

根据提示，先输入 cd test（这里你的文件名）进入扩展文件夹，然后 code .会发现打开了vscode,目录树如下：

│  .vscodeignore
│  CHANGELOG.md
│  package.json
│  README.md
│  vsc-extension-quickstart.md
│
├─.vscode
│      launch.json
│
└─themes
        Test-color-theme.json

这里我们需要配置的是 themes目录下的 Test-color-theme.json文件,打开：

这里的每一个配置项对应的是vscode编辑器的一个个scope，比方说Comment对应的是你注释的颜色，你可以根据自己的设计方法配置，但问题来了，难道我们只能在这里配置而不能实时的一遍配置一遍看效果吗，当然不会，你只需要F5开始调试，然后，即可打开一个新的处于调试模式下的vscode窗口：

打开之后，使用 Ctrl+Shift+P进入vscode的命令窗口，输入 Developer:Inspect Editor Tokens and Scopes进入开发者模式，检查编辑器和标记作用域模式，这时候你会发现点击你调试窗口中你想修改的部分，会出现相关的scope信息

这个时候你就可以根据自己的想法，或者去一些设计配色网站找到自己喜欢的配色方案进行修改了，只需要将你想修改的作用域在配置文件中找到，然后将其中的颜色配置改为你喜欢的颜色的值就可以，需要注意的是，这里的颜色填的是颜色的十六进制数值，还有关于字体的设置，是由 fontstyle属性控制的：

它有八个值，意思也很明确不在赘述，若果你想为某个作用域配置字体设置而它原本没有这一项的话只需要自行加上即可

（3)关于如何去设计一个有多个版本（如dark版和light版）的主题

我们在使用别人的主题是可能会发现，某个主题有两三个甚至七八个版本，但生成器生成的却只有一个版本，那么如何去给自己的扩展增加一个版本而不是再去创建一个扩展项目呢，其实很简单，首先我们打开 package.json文件，大约是这样的：

我们只需要先把之前修改的Themes文件夹里面的文件先复制一份，改为这个版本的名称，然后再package.json文件的themes属性下增加一项即可，例如你想增加一个light版的主题，只需要像下面这样即可，注意要将uiTheme改为vs，vs表示的是该主题为light版，uiTheme共有三个值，除了我们已经用到的两个，还有一个设置的是高对比度主题：

注意你复制后的Themes文件夹里的配置新版本主题的json文件中，type一项要改为light：

关于package.json文件，你可以在其中设置你的项目GitHub地址，版权信息，发布者名称，description，还有图标文件的信息之类的发布信息例如下面就是我All-gray的配置：

本文不会教你怎么去设计一个主题，所以这一部分就到这里了，有什么问题欢迎留言讨论

0x02.主题插件的发布

（1）注册Azure的开发者账号并设置token

Azure

点击上面的链接进入Azure 开发者服务网站注册一个账号，你可以使用电子邮件，也可以使用GitHub关联注册，都可以，注册完成后新建一个Public项目

完成之后，点击你的个人设置，选择Personal Access Tokens

进入之后新建一个Token，Name写你的id即可，注意Organization一定要如图选，不然一会可能会连不上，然后点击图中1处，找到MarketPlace项如图配置

点击Create，他会给你一个Token，复制并保存下来，这是唯一保存的机会

（2）安装 vsce 并使用其来发布扩展

打开命令行，进入你扩展的目录，使用以下命令安装vsce

npm install -g vsce

安装完成后，使用以下命令来创建一个vsce账户：

vsce create-publisher (发布者的名字)

注意Windows下可能会有这样的问题：

根据官方文档，这是由于Windows的一些对执行政策的配置导致的，你可以按照下面的方法来解决：

首先使用以下命令查看当前的执行策略：

Get-ExecutionPolicy -List

输出大概如下：

Scope ExecutionPolicy
        ----- ---------------
MachinePolicy       Undefined
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser       Undefined
 LocalMachine       AllSigned

在这种情况下，有效的执行策略是 RemoteSigned 所以可以执行以下命令更改执行策略：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

执行之后应该就可以连接了

成功之后大约会是下面这样：

这里Email填写你的注册邮箱即可，Token使用你刚才保存的token

成功之后，进入你的扩展目录，使用以下命令现将你的扩展打包成vsix文件

vsce package

然后直接使用以下命令即可发布：

vsce publish

再过几分钟就可以在扩展商店搜索到自己的插件了

本文到这里就全部结束了，各位有什么问题欢迎留言讨论

参考资料 https://docs.microsoft.com/zh-cn/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7
https://juejin.im/post/5cb810d651882532525a0c95
参考资料 https://docs.microsoft.com/zh-cn/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7
https://juejin.im/post/5cb810d651882532525a0c95
https://code.visualstudio.com/api/working-with-extensions/publishing-extension