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

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

微软VisualStudioCode代码编辑器更新至0.8.0。本次更新增加了多种主题，包括著名的Monokai；针对WIndows系统采用基于InnoSetup的安装格式，提升安装体验。除此之外，还包括其他一些更新。使用该工具的朋友可下载升级。主要更新内容包括：•Windows系统基于InnoSetup的新安装格式，提升安装体验；•新增多种主题，包括著名的Monokai；•NodeDebug不再依赖Mono；•Debug可打开Console；•语言更新及版本升级。

字体可以 File -> Preference -> User Settings，右侧添加 "editorfontFamily": "" Theme貌似不行，只能选择内置的两种Visual Studio Code 的颜色和字体可以自定义吗

Visual Studio Code 是我在最近一年中最喜欢的一款编辑器，微软每一次的更新都会给大家带来惊喜，更是令人愈加喜欢。之前一直使用内置的颜色主题 Light+ 和 Dark+ ，但近来突然觉得前者颜色区分度不高，一眼看上去就密密麻麻的一对代码，而后者则是被选中的文本背景色太浅，跟编辑器的背景颜色很相似，很难区分出来，于是萌生了要制作一款自己的颜色主题的想法。经过几天的研究，终于捣鼓出来了 Lei Theme 系列颜色主题。

先来看看其中两款主题的效果：

一般来说，我们并不需要重头来制作一款颜色主题，首先需要选择一款自己最喜欢的颜色主题（或者说先找一款与自己的想法最相似的颜色主题），然后在此基础上进行些许调整即可。另外如果想将颜色主题发布到微软的 Visual Studio Code 扩展商店上，还需要注册一个微软开发者账号，并通过 vsce 工具来发布出去，下文会对此进行详细说明。
tmTheme 格式的颜色主题

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 按回车即可使用刚刚创建的新颜色主题：

从上图可以看出，这其实就是一个标准的 Monokai 主题。
tmTheme 编辑器

从生成的 vsc-extension-quickstart.md 文件中我们得知有一款 Web 版的在线 tmTheme 编辑器 ，通过该编辑器可以进行可视化地编辑 tmTheme 文件。比如以下视频是更改 String 和 Keyword 颜色的示例：
你的浏览器不支持 标签.

主要的操作方法为：

在左侧 Scope Name 列表中选中一项，然后双击 FG 列上的颜色（FG 表示 foreground，即前景颜色），然后选择要更改的颜色即可，可以看到代码预览区域的颜色会实时改变
点击顶部栏的【Download】按钮即可下载编辑后的 tmTheme 文件，直接将其覆盖项目中的 ./themes/my-theme.tmTheme 文件即可
在 Visual Studio Code 中按快捷键 ⌘Command + Shift + P 打开命令面板，输入 Reload Window 并按回车即可看到修改后的颜色主题

但是，在一些实现细节上，Visual Studio Code 并不与该 tmTheme 编辑器一致，所以我们在该在线编辑器上看到的效果可能与 Visual Studio Code 上稍有不同，所以我们可能还需要直接编辑 tmTheme 文件。
如何知道 scope 是什么

下面是这款主题中，模板字符串的渲染效果：

从图中可以看到，模板字符串中的字符串和变量的颜色都是一样的，而假如我想改变模板字符串中变量的颜色，却是无从下手，因为即使翻遍 TextMate 官方文档中关于 tmTheme 的介绍也找不到模板字符串的 scope 是什么。

其实我们可以借助 Visual Studio Code 的开发者工具来找到任意元素的 scope ，以下是演示视频：
你的浏览器不支持 标签.

从开发者工具中我们可以看到模板字符串中 ${ 的样式是：

token block ts punctuation definition meta string begin function arrow new expr template expression template-expression

而模板变量 file 的样式是：

token block ts meta variable other readwrite string function arrow new expr template expression

再结合文首对于 scope 介绍的文章，我们假设我们要的 scope 名为 template.expression 。接着打开文件 ./themes/my-theme.tmTheme ，仿照该文件的格式，我们添加以下代码在对应位置：

<dict>
<key>name</key>
<string>Template Expression</string>
<key>scope</key>
<string>template.expression</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#23C4FA</string>
</dict>
</dict>

再按快捷键 ⌘Command + Shift + P 打开命令面板，执行 Reload Window ，此时可以看到模板字符串中的变量颜色跟字符串的颜色不一样了：

tmTheme 文件处理规则

尽管已经实现了我们想要的效果，相信阅读到这里的时候很多人还是一头雾水，并不知道为何 scope 是 template.expression 。我在刚开始时虽然也猜想到是像 CSS 的类选择器一样，但还是不太确定，直到阅读到 Visual Studio Code 的源码后才得以印证。

以下是 Visual Studio Code 源码中负责处理 tmTheme 的 scope 的程序文件 src/vs/workbench/services/themes/electron-browser/stylesContributions.ts （ 点此查看完整文件 ）:

export class TokenStylesContribution {

public contributeStyles(themeId: string, themeDocument: IThemeDocument, cssRules: string[]): void {
let theme = new Theme(themeId, themeDocument);
theme.getSettings().forEach((s: IThemeSetting, index, arr) => {
// @martin TS(2.0.2) - s.scope is already a string[] so no need for all this checking.
// However will add a cast at split to keep semantic in case s.scope is wrongly typed.
let scope: string | string[] = s.scope;
let settings = s.settings;
if (scope && settings) {
let rules = Array.isArray(scope) ? <string[]>scope : (scope as string).split(',');
let statements = this._settingsToStatements(settings);
rules.forEach(rule => {
rule = rule.trim().replace(/ /g, '.'); // until we have scope hierarchy in the editor dom: replace spaces with .

cssRules.push(`.monaco-editor.${theme.getSelector()} .token.${rule} { ${statements} }`);
});
}
});
}

private _settingsToStatements(settings: IThemeSettingStyle): string {
let statements: string[] = [];

for (let settingName in settings) {
const value = settings[settingName];
switch (settingName) {
case 'foreground':
let foreground = new Color(value);
statements.push(`color: ${foreground};`);
break;
case 'background':
// do not support background color for now, see bug 18924
//let background = new Color(value);
//statements.push(`background-color: ${background};`);
break;
case 'fontStyle':
let segments = value.split(' ');
segments.forEach(s => {
switch (s) {
case 'italic':
statements.push(`font-style: italic;`);
break;
case 'bold':
statements.push(`font-weight: bold;`);
break;
case 'underline':
statements.push(`text-decoration: underline;`);
break;
}
});
}
}
return statements.join(' ');
}
}

我们再来回顾一下上文 tmTheme 文件每一项 scope 的配置内容：

<dict>
<key>name</key>
<string>Template Expression</string>
<key>scope</key>
<string>template.expression</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>http://www.315nk.com/app/?23C4FA</string>
</dict>
</dict>

其中第一项 name 表示的是我们给该规则起的名称； scope 则是适用的 scope ，如果多个可以用逗号分隔，比如 User-defined constant 的 scope 值就为 constant.character, constant.other ； settings 则是具体的样式信息，比如颜色值。

从源码中可以看出，支持的样式只有 foreground 和 fontStyle ，而 background 则从注释中可以看出由于某原因导致 Visual Studio Code 暂时不支持。

scope 值为 template.expression 则可被认为是 CSS 类选择器 token.template.expression ，在前文的 Developer Tools 的演示视频中，模板字符串的变量名在渲染时其 HTML 为 <span class="token block ts meta variable other readwrite string function arrow new expr template expression">...</span> ，如果我们熟悉 CSS 的话应该能一眼就看出来 .token.template.expression 是会匹配到该标签的。所以，我们可以简单地把 scope 当作是 CSS 的类选择器。

需要注意的是，如果我们在定义 scope 时写得不够详细，可能会错误地匹配到其他元素，致使调好了一部分，另一部分却被调坏了，所以要做得完美也并非易事。
发布到扩展商店

要将扩展发布到扩展商店以便让更多人可以使用到，我们需要借助 vsce 命令行工具，可以参考文档 vsce - Publishing Tool Reference 。以下是其基本步骤：

安装 vsce 命令行工具。执行命令 npm install -g vsce
注册 Visual Studio Team Services 账号，并获取到 Access Token
创建 Publisher。执行命令 vsce create-publisher
登录到 Publisher。执行命令 vsce login
发布扩展。执行命令 vsce publish

详细操作步骤建议参考相应的官方文档。

本文并没有详细到手把手教地去讲解如何打造一款 Visual Studio Code 颜色主题，仅仅是提到了几个我在折腾过程中认为比较关键，而又很难通过文档去查到的要点。爱折腾是程序员的天性，希望本文能让爱折腾的你少走一些弯路，把喜爱的 Visual Studio Code 玩出花来。

---

开阳县13378189668： 如何打造一款属于自己的 Visual Studio Code 颜色主题 - ？
澹宏锋泰： 不需要重头来制作一款颜色主题.首先需要选择一款自己最喜欢的颜色主题(或者说先找一款与自己的想法最相似的颜色主题),然后在此基础上进行些许调整即可.

开阳县13378189668： 怎么才能打造一个属于自己的COSPLAY社团 - ？
澹宏锋泰： 主要是服装道具来源啦,2113然而没有足够的钱就无法租或自己做,所以还是要有一定的资金的,其次5261就是要好好带领团员,如果你是团长就一定要有4102领导风范.招募的会员一般来说没有什么特别要求,只要爱动满1653就好.然后形象合适的可以回做coser,其余的可以帮忙这样比较有效率,化妆的答只要是女孩子都会阿,所以这点不用担心

开阳县13378189668： 怎么打造一个属于自己品牌的IP?？
澹宏锋泰： 个人品牌的打造,主要是5个方面.1.打造个人品牌的第一步,是给自己一个明确的定位.2.标签,对想要建立个人品牌的你而言,方法也是一样的,你需要对你想影响的人,进行认知建设,让人们接受你的定位.3.持续展示,积累品牌效应,怎么做持续的个人品牌积累?这就是我们说的,内容运营的功夫了.4. 向外部借力,什么是借力?借力就是明确自己的需求,有目标、有策略地获取帮助,达成目的.5. 收集反馈,升级个人品牌.一个是“数据第一”,一个是“提出与验证假设”.但这都只是手段,最重要的是,你需要收集反馈,来进行自我调整和优化,迭代你的个人品牌.

开阳县13378189668： 如何打造专属自己的PowerPoint? - ？
澹宏锋泰： 1.在PPT软件工具栏的空白处按鼠标右键,在弹出来的菜单中选“自定义” 2.在对话框中选“新建”,这样就新建了一个空白的工具栏3.将新建的工具栏娶个名字,比如:PPTOK 4.然后在自定义对话框中选“命令” 5.将需要的功能直接往新建的工具栏中拖就可以了新建的工具栏在定义状态下选中某项功能按鼠标右键,可以更换图标,定义显示样式等等,把功能类同的一组放在一起可以用“开始一组”的命令.

开阳县13378189668： 我想要打造一个属于自己的化妆品品牌?改如何做? - ？
澹宏锋泰： 首先注册公司和商标,定位产品怎么做走什么渠道销售,找化妆品工厂要产品样板试样,后面的包装设计、包材采购、产品备案都是工厂负责的

开阳县13378189668： 开通黄钻多少钱一个月?开通之后QQ空间能维持多久?有什么用途?望帮帮忙... - ？
澹宏锋泰： 一个月10元. 黄钻等级新特权:只要达到黄钻LV2,立即享受全场任何物品免费用,连“特供品”都免费!·左侧皮肤: 完美肤质,打造异样空间,黄钻用户优先体验!·日志信纸: 日志也装扮,黄钻贵族可免费使用,普通用户无权使用!·...

开阳县13378189668： 如何打造属于自己的WinPE系统? - ？
澹宏锋泰： 大多数系统爱好者不具备这样的能力,因此我们完全可以借助网上优秀的WinPE资源进行整合,打造属于自己的WinPE系统.现在就以深度WinPE v4.2为例进行讲解. 一、将WinPE安装至U盘 深度WinPE v4.2有较为完善的安装向导,这里不做...

开阳县13378189668： 如何建立一个属于自己的个人博客网站 - ？
澹宏锋泰： 首先 先想清楚为什么做博客?然后在往下看 个人网站 第一步:去买个域名!便宜的几块钱/年的都有 第二步:买虚拟主机 回到刚刚第一个问题,做博客是为了帮助别人解决问题,还是为了记录自己生活的点滴?从而购买最合适的虚拟主机 第三步:需要到网站找一些你喜欢的程序(网站模板) 我的个人模板裙: 1 6 9 1 0 1 7 1 2 以上是要全部自己去操作,摸索,当你成功建立了一个博客后,你会发现你学到了很多东西!当然后有第二种建立博客的方法:第三方博客163博客 新浪博客 ......很多,但是最大的缺点就是受平台管理! 望采纳

开阳县13378189668： 如何建立一个属于自己的网站? - ？
澹宏锋泰： 这个问题涉及比较多.一个网站包括域名、网站内容、网站设计、网站空间大体这三个. 一、域名,通俗点就是网站的网址.建自己的网站,网址肯定要自己想好,好的网址,肯定能增加网站的回头客.但现在很多域名都已经被人抢注,好的域...

开阳县13378189668： 怎么建立一个属于自己的网站 - ？
澹宏锋泰： 首先你要做动态网页 还是静态网页,如果是静态网页只需要学习Html就行了. 如果是动态网页,比如新浪什么的他们的新闻都是每天要更新的.那么就需要学习的东西多了.1、要会Html 2、要会定义Css(就是网站的风格,比如字体的颜色啦...