如何创建自己的Visual Studio代码颜色主题？
让我们来看看其中两个的效果:
一般来说，我们不需要重新制作一个颜色主题。首先我们需要选择一个喜欢的色彩主题(或者找一个和自己想法最相似的色彩主题)，然后在这个基础上做一些调整。另外，如果要将颜色主题发布到微软的Visual Studio代码扩展商店，需要注册一个微软开发者账号，通过vsce工具发布，下面会详细说明。
tmTheme格式的颜色主题
多年前，TextMate曾经是最受欢迎的代码编辑器之一。其颜色主题的文件后缀是。tmTheme，在本文中简称为tmTheme格式。Visual Studio Studio的颜色主题采用标准的TextMate主题格式。我们可以参考这篇文章写一个Textmate文法:一些经验教训，大致可以理解为:编辑器解析代码后，会给每个元素分配一个作用域。这个作用域表示这个元素是关键字还是常量，还是标点符号，通过一个tmTheme格式的文件定义了对应作用域的文本样式。
根据这篇文章，我们可以知道下面是一个常见范围的列表:
评论
常数
常量.字符.转义
常量.语言
常数.数字
声明.节实体.名称.节
声明.标签
装饰折叠
实体.名称.功能
实体.名称.标签
实体.名称.类型
实体.其他.属性-名称
entity.other.inherited-class
无效的
invalid . deprecated . trailing-空白
关键字
关键字.控件.导入
关键字.运算符. js
标记.标题
标记.列表
加价.报价
元嵌入式
元预处理程序
meta.section实体.名称.节
meta .标签
储存；储备
存储.类型.方法
线
字符串源
string .无引号
支持.类
支持。常数
支持.功能
支持类型
支持变量
文本源
可变的
变量.语言
变量.其他
变量.参数
下面是一个tmTheme格式文件的代码片段:
& ltdict & gt
& ltkey & gt名称& lt/key & gt；
& lt字符串& gt关键字& lt/string & gt；
& ltkey & gt范围& lt/key & gt；
& lt字符串& gtkeyword.control，keyword.other，variable.language，storage.type，storage.modifier，keyword.function & lt/string & gt；
& ltkey & gt设置& lt/key & gt；
& ltdict & gt
& ltkey & gt前景& lt/key & gt；
& lt字符串& gt# 0808d 1 & lt；/string & gt；
& lt/dict & gt；
& lt/dict & gt；
& ltdict & gt
& ltkey & gt名称& lt/key & gt；
& lt字符串& gt无效的& lt/string & gt；
& ltkey & gt范围& lt/key & gt；
& lt字符串& gt无效的& lt/string & gt；
& ltkey & gt设置& lt/key & gt；
& ltdict & gt
& ltkey & gt前景& lt/key & gt；
& lt字符串& gt# CD 3131 & lt；/string & gt；
& lt/dict & gt；
& lt/dict & gt；
从上面的代码可以看出，其实这个tmTheme格式的文件看起来挺简单的，但是对于初学者来说，很难知道如何写scope，下面会一步步讲解。
创建一个颜色主题项目
根据官方文档，我们首先执行以下命令来安装Yeoman代码生成工具，以创建一个默认的颜色主题项目:
$ npm安装-g yo发电机-代码
安装完成后，输入~/。vscode/extensions目录，并执行以下命令来启动生成器:
$ yo代码
注:~/。vscode/extensions表示的目录。用户根目录下的vscode/extensions。之所以在这里新建项目，是因为不用发布到扩展库就可以在本地使用，方便调试。
选择“新建颜色主题”以创建颜色主题项目:
_ - _ ╭——————————————————————————╮
| | │欢迎来到视觉│
| - (o) - | │工作室代码扩展│
` - ?│发电机！│
( _?u ` _)╰——————————————————————————╯
/_ _ _ A _ _ \/
| ~ |
__'.___.'__
？` | ?你好
您想创建哪种类型的扩展？
新扩展(TypeScript)
新扩展(JavaScript)
新颜色主题
新语言支持
新代码片段
然后我需要在命令行交互填写一些问题。以下是我在执行过程中填写的内容:
您想创建哪种类型的扩展？新颜色主题
URL (/app/？23C4FA & lt/string & gt；
& lt/dict & gt；
& lt/dict & gt；
第一项，name，代表我们给规则起的名字；范围是适用的范围。例如，如果多个项目可以用逗号分隔，那么用户定义的常量的范围值就是常量。性格，不变。其他；设置是特定的样式信息，如颜色值。
从源代码中可以看出，支持的样式只有foreground和fontStyle，而background从评论中可以看出，Visual Studio代码由于某种原因暂时不支持。
如果作用域值是template.expression，可以认为是上面提到的开发者工具演示视频中的CSS类选择器token.template.expression，模板字符串的变量名是用HTML呈现的
需要注意的是，如果不把作用域的定义写详细，可能会误配其他元素，造成好的部分和不好的部分，要想做到完美并不容易。
发布到扩展存储
要将扩展发布到扩展存储，以便更多的人可以使用它，我们需要使用vsce命令行工具，并参考文档vsce-Publishing Tool Reference。以下是基本步骤:
安装vsce命令行工具。执行命令npm install -g vsce。
注册一个Visual Studio Team Services帐户并获取一个访问令牌。
创建发布者。执行命令vsce create-publisher。
登录到Publisher。执行命令vsce login。
松开加长杆。执行命令vsce publish。
详细操作步骤请参考相应的官方文档。
本文并没有详细说明如何创建Visual Studio代码颜色主题，只是提到了我认为在折腾过程中比较关键且很难通过文档找到的几点。爱折腾是程序员的天性。希望这篇文章能让你少走弯路，玩出自己喜欢的Visual Studio代码。