Question

如何打造一款属于自己的 Visual Studio Code 颜色主题

Answer 1

TextMate曾是多年前最流行的代码编辑器之一，其颜色主题的文件后缀为.tmTheme，在本文中我们将其简称为tmTheme格式。Visual Studio Studio 的颜色主题采用的是标准的 TextMate 主题格式，我们可以参考这篇文章Writing a TextMate Grammar: Some Lessons Learned，大概可以理解为这样：编辑器对代码进行解析后，会为每个元素指定一个scope，这个scope即表明此元素是一个关键字还是一个常量，又或者是一个标点符号，通过tmTheme格式的文件来定义相应scope的文字样式。

根据该文章可知道以下是常见的scope列表：
comment
constant
constant.character.escape
constant.language
constant.numeric
declaration.section entity.name.section
declaration.tag
deco.folding
entity.name.function
entity.name.tag
entity.name.type
entity.other.attribute-name
entity.other.inherited-class
invalid
invalid.deprecated.trailing-whitespace
keyword
keyword.control.import
keyword.operator.js
markup.heading
markup.list
markup.quote
meta.embedded
meta.preprocessor
meta.section entity.name.section
meta.tag
storage
storage.type.method
string
string source
string.unquoted
support.class
support.constant
support.function
support.type
support.variable
text source
variable
variable.language
variable.other
variable.parameter

以下是一个tmTheme格式文件的代码片段：
<dict>
<key>name</key>
<string>Keyword</string>
<key>scope</key>
<string>keyword.control,keyword.other,variable.language,storage.type,storage.modifier,keyword.function</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#0808D1</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Invalid</string>
<key>scope</key>
<string>invalid</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#cd3131</string>
</dict>
</dict>

从上面的代码可以看出，其实这个tmTheme格式的文件似乎也挺简单的，然而初学者而言，难的是不知道scope怎么写，下文会循序渐进地对此进行说明。

创建颜色主题项目

根据官方文档，我们先执行以下命令安装Yeoman代码生成工具来创建一个默认的颜色主题项目：
$ npm install -g yo generator-code

安装完毕之后，进入~/.vscode/extensions目录执行以下命令启动生成器：
$ yo code

说明：~/.vscode/extensions表示用户根目录下的.vscode/extensions目录，之所以在此处新建项目主要是为了不用发布到扩展商店也可以在本地进行使用，并且方便调试。

选择New Color Theme创建颜色主题项目：
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `

? What type of extension do you want to create?
New Extension (TypeScript)
New Extension (JavaScript)
❯ New Color Theme
New Language Support
New Code Snippets

接着需要在命令行下交互式地填写一些问题，以下是我在执行过程中填写的内容：
? What type of extension do you want to create? New Color Theme
URL (http, https) or file name of the tmTheme file, e.g., http://www.monokai.nl/blog/wp-content/asdev/Monokai.tmTheme.
? URL or file name: http://www.monokai.nl/blog/wp-content/asdev/Monokai.tmTheme
? What's the name of your extension? my-theme
? What's the identifier of your extension? my-theme
? What's the description of your extension?
? What's your publisher name? leizongmin
? What's the name of your theme shown to the user? my-theme
? Select a base theme: Dark

需要说明的是，第一个问题URL (http, https) or file name of the tmTheme file需要提供一个已有的tmTheme文件作为基础，此处可直接复制示例中的URL。

稍等片刻，工具自动生成了项目之后，会提示我们执行以下命令开始编辑代该项目：
$ cd my-theme
$ code .

以下是生成的项目的文件结构：
.
├── README.md
├── package.json （扩展信息文件）
├── themes
│ └── Monokai.tmTheme （颜色主题定义文件）
└── vsc-extension-quickstart.md （帮助文件，上面详细说明操作步骤）

首先看看package.json文件：
{
"name": "my-theme",
"displayName": "my-theme",
"description": "",
"version": "0.0.1",
"publisher": "leizongmin",
"engines": {
"vscode": "^1.5.0"
},
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "my-theme",
"uiTheme": "vs-dark",
"path": "./themes/Monokai.tmTheme"
}
]
}
}

contributes中定义了此扩展项目包含的内容，其中themes表示颜色主题，是一个数组，我们可在此处放入多个颜色主题。以下是themes中每个元素的定义：

label表示颜色主题的名称，即在Preferences: Color Theme列表中显示的名称
uiTheme是指编辑器 UI 的颜色，可选为vs-light和vs-dark，如果我们的颜色主题是深色系的，就选vs-dark
path是tmTheme文件的位置

为了避免混淆，我们可以将文件./themes/Monokai.tmTheme改名为./themes/my-theme.tmTheme，并修改package.json相应的位置。

现在在 Visual Studio Code 中按快捷键⌘Command + Shift + P打开命令面板（Windows / Linux 系统应为Ctrl + Shift + P），输入Color Theme并按回车，再中列表中选择my-theme按回车即可使用刚刚创建的新颜色主题