2019年27个神奇的VSCode工具
Visual Studio Code（更简称为 VS代码 ）是一个轻量级但功能强大的跨平台源代码编辑器，可在桌面上运行。内置支持TypeScript和Chrome Debugger等开发工具，我很快就爱上了编辑器，我用它来构建我的项目。
谁 不 喜欢可供公众使用和贡献的bajillion开源扩展？
如果您正在寻找更多工具添加到您的开发工具包中，我希望本文可以帮助您找到一个新的工具来采用！
并非所有 这些工具都 专门针对JavaScript语言 ，而是针对您和我这样有共同兴趣的 JavaScript开发人员的 工具。 作为一名JavaScript开发人员 ，我将分享在几个方面增强我的开发流程的内容，这些方面围绕着人类五感中的五分之一。
以下是2019年针对JavaScript开发人员的26个神奇VS代码工具
排在第一位的是我最喜欢的Project Snippets - 源自VS Code中内置的原始 用户代码段 。
如果您不熟悉用户代码段，基本上此功能允许您创建自己的代码段以在整个项目中重复使用。
但究竟是什么意思“重复使用”它们呢？
好吧，如果您经常发现自己编写任何类型的样板，如下所示：
实际上，你可以直接将其打入你的用户片段，这样你就不需要写出（或复制并粘贴）整个事物，你只需要输入一个自定义 前缀 来生成你配置它的片段。如果转到“ 文件”“首选项”“用户代码段” ，则可以选择通过单击“ 新建全局代码段文件” 来创建新的全局代码 段 。
例如，要为TypeScript React项目创建自己的 代码段文件 ，可以单击 New Global Snippets File ，键入 typescriptreact.json ，它将引导您到新创建的.json文件，您可以将其用于使用TypeScript构建的反应应用程序。
例如，要从上面的代码示例创建用户代码段，您可以这样做：
有了这个，你可以创建一个.tsx文件，输入前缀，rsr并出现一个生成片段的建议。按弹出窗口上的 选项卡 将生成以下代码段：
但是问题在于，这将持续存在于 所有项目中 （在某些情况下，这些 项目 对于一般的片段来说可能是强大的）。某些项目的配置略有不同，当您需要区分特定用例时，配置代码段的全局文件开始成为问题。例如，一个用例是每个项目的项目结构不同：
对于具有该特定文件/文件夹结构的项目，这可能已足够，但如果您正在处理Link组件具有类似路径的另一个项目，该components/Link怎么办？
注意三个 边界测试 如何用单引号将它们的值包装起来：border: '1px solid red'。这在JavaScript中是完全有效的，但如果您使用样式组件作为项目的样式解决方案呢？语法不再适用于该工作空间，因为样式化组件使用常规CSS语法！
这就是Project Snippets开始闪耀的地方！
如果你喜欢在代码之间编写注释，那么你有时可能会发现搜索过去编写的某些文档的位置有点令人沮丧，因为代码有时会变得有点拥挤。
通过更好的评论，您可以通过介绍彩色评论使您的评论更加明显：
现在，您可以更好地提醒您的团队成员，!或者?引起他们的注意:)
我第一次看到这个扩展的屏幕截图时，我知道我必须采用并将此权利引入我的开发工具包中。编码是我的热情，激情应该是有趣的。所以有了这种心态，这绝对有助于我享受我喜欢做的事情。
一个快速有趣的事实是，有时多一点颜色可以帮助加快发展流程，因为它可以影响血液流动和唤醒。换句话说 - 您 不仅 可以获得 娱乐 ，还可以通过为您的工作流程添加颜色来改善您的 健康 状况！
Material Theme是一个史诗般的主题，您可以直接安装到VS代码中，使您的代码如下所示：
这必须是有史以来最好的主题之一。我不确定如何详细说明主题是多么棒，但这真是太棒了。立即安装并与我一起努力将世界变成一个物质主题世界！（或者不要加入我，只使用主题。这也很酷）
如果您是TypeScript用户：由于TSLint背后的支持者宣布计划在今年某个时候弃用TSLint，您应该开始考虑移动tslint配置以使用ESLint + TypeScript配置方法。
项目逐渐采用@ typescript-eslint / parser和相关软件包来确保其项目的面向未来的设置。您仍然可以使用新设置来充分利用ESLint的大多数规则和兼容性。
对我来说，由于多种原因，stylelint在我的所有项目中都是必须的：
现在我不确定你或其他开发人员在为他们的项目进行头脑风暴时喜欢做笔记，但我喜欢用降价格式写下笔记。
首先，我很容易理解。还有大量的工具可以帮助促进写下降记录文本的过程，包括markdownlint。Markdownlint是一个vs代码扩展linter，可以帮助您在.md文件中进行样式检查。更酷的部分是它支持 更漂亮的格式化 ！
此外，我个人喜欢在我的所有项目上安装Docsify，因为它支持每个项目的降价和其他增强功能。
我习惯在我的应用程序代码中编写待办事项，因此像TODO Highlight这样的扩展对于突出我在整个项目中设置的待办事项非常有用。
Import Cost是第一次尝试时变得非常有用的工具之一。但过了一段时间，你开始意识到你不再需要这个工具了，因为它会告诉你一段时间内你已经知道的东西。尽管如此，请尝试使用此工具一段时间，因为您可能会发现它很有用。
Sometimes it can get frustrating trying to match the other end of a tag. That's where Highlight Matching Tag becomes to take your frustrations away:
说到挫折，有时候回到音乐播放器切换音乐然后不得不回到vs代码继续做你正在做的事情会让人感到沮丧。这就是vscode-spotify的用武之地，因为它允许你在内部和代码中使用spotify！
使用此扩展程序，您将能够在状态栏中看到当前正在播放的歌曲，通过按热键切换歌曲，单击按钮来控制spotify等等！
GraphQL 一直在不断发展，因为我们开始在JavaScript社区的每个角落看到它。如上所述，如果您尚未考虑在处理GraphQL语法时从语法高亮，linting和自动完成功能中受益，那么开始考虑将VSQL的GraphQL安装到您的vs代码中可能是一个好主意。
我个人经常使用GatsbyJS，因此我的日常编码生活涉及阅读GraphQL语法。
与上面的 突出显示匹配标记 类似的原因。如果您无法通过缩进找到自己的方式，那么Indent Rainbow可以帮助您更轻松地阅读这些缩进。
这是一个例子：
这是其中一个扩展，其中 每个人都 问我“你从哪里得到的？” 如果他们还没有遇到这个扩展。基本上，Color Highlight有助于突出显示代码中的颜色，如下所示：
Color Picker是一个vscode扩展，为您提供图形用户界面，以帮助您选择和生成CSS颜色符号等颜色代码。
我第一次阅读REST Client并亲自试用它，它似乎不是像Postman这样的老软件的有用工具。
但是我使用REST Client扩展的次数越多，我就越意识到它会对我的开发工具产生多大的影响，特别是在测试API时。
您可以创建一个新文件并使用以下一行：
创建HTTP GET请求所需要做的就是突出显示一行，转到命令面板（CTRL + SHIFT + P），单击 Rest Client：Send Request ，它将继续并弹出一个新选项卡在一秒钟内请求响应详细信息。
很有用：
您甚至可以将参数或请求正文数据传递给POST请求，下面只需要几行代码：
这将使用body参数发出POST请求 { "email": "someemail@gmail.com", "password": 1 }
我讨厌不得不手动写下我在开发工具中使用的扩展笔记的降价列表，并将其保存在像Evernote这样的笔记服务中，直到Settings Sync拯救。
基本上，你只需要一个gist / github帐户，每次你想要保存你的设置（这包括键绑定，片段，扩展等）你只需要按 SHIFT + ALT + U 将 私人 设置上传到你的吉斯帐户，所以下次登录或重新格式化到另一台计算机时，您可以通过按 SHIFT + ALT + D 立即下载您的设置。
Todo Tree将帮助您在整个应用程序代码中找到您创建的所有待办事项到一个树中，您可以在面板的左侧一次查看它们：
Toggle Quotes是一个有趣的实用程序扩展，可让您在引号之间切换。当您即将使用字符串插值时需要切换到反引号时，它会派上用场，特别是当更漂亮的习惯是将字符串美化为单引号时。
您可以在不使用Better Align首先选择代码的情况下对齐代码。
要使用：将光标放在要对齐的代码中，然后使用 CTRL + SHIFT + P （或任何您自定义的快捷方式打开命令调色板）弹出命令调色板并调用 Align 命令。
自从我第一次启动VS代码以来，Auto Close Tag一直对我很有用。它允许你输入类似的东西p，按下斜线/，它将为你完成最后一个箭头。这是默认情况下不在vs代码中的东西，对我来说非常有用:)
当我的数组没有按字母顺序对齐时，我有一种令人沮丧的习惯，就是变得沮丧。幸运的是，Sort Lines等工具可以让我的生活更轻松。如果你以类似的方式感到沮丧，你可能会发现这对你很有帮助。
我可能是唯一一个发现这个有用的人，但是VScode Google Translate帮助我完成了我的项目，因为我参与了一个多语言的项目。如果您不想离开编辑器，这很有用。
Prettier是vs代码的扩展，可自动格式化您的JavaScript / TypeScript /等。代码使用更漂亮。
我更喜欢Material Icon Theme而不是其他图标主题，因为对于哪些文件类型来说，它更明显，尤其是在黑暗主题中工作时。
HTML中的CSS类名称的IntelliSense是基于HTML class属性的CSS类名称完成，该属性基于工作区中的定义。
Path Intellisense是一个vs代码扩展，可以为您自动填充文件名。
我希望这有助于您找到新的东西添加到您的开发套件中！
vscode怎么设置成和subline一样的字体风格
一直喜欢subline的风格界面，但是由于现在使用vscode比较多，所以想配置成subline的样式
网上找了很多方法一直没特别合适的，现在终于试出来了，写出来给大家分享下
首先，在vscode首选项-风格里面选择 Monokai 主题
然后 vscode设置字体为
"editor.fontFamily": "MONACO, Consolas, 'Courier New', monospace",
这样就可以达到subline类似的效果了
作为一个前端开发，vscode有哪些值得安装的插件
1. Open-In-Browser
由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。
2. Quokka
Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。
3. Faker
使用流行的 JavaScript 库 – Faker，能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码，或者经典的乱数假文段落，并且每个类别还包含了各种子类别，你可以根据自身的需求来使用这些数据。
4. CSS Peek
使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
5. HTML Boilerplate
通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。
6. Prettier
Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！
7. Color Info
这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
8. SVG Viewer
此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。
9. TODO Highlight
这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。
10. Icon Fonts
这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
11. Minify
这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。
12. Change Case
虽然 VSCode 内置了开箱即用的文本转换选项，但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。
13. Regex Previewer
这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。
14. Language and Framework Packs
VSCode 默认支持大量的主流编程语言，但如果你所使用的编程语言不包括在内，也可以通过下载扩展包来自动添加。同时，你还可以添加一些像 React Native 与 Vue 的相关 Web 开发插件包。
15. Themes
当然，在众多的实用插件中，岂能少了漂亮的主题呢？你每天都会与你的 VSCode 编辑器进行“亲密的接触”，为何不把它打扮得更漂亮些呢？这里有一些帮助你更改侧边栏的配色方案，以及图标的相关主题，与大家分享：
• One Monokai
• Aglia
• One Dark
• Material Icon
VScode 豆沙色护眼设置
原始配置，setting.json内容，主题是 united Ubuntu
护眼色配置，setting.json的内容
}
豆沙色 + 自定义字体颜色
{
"terminal.integrated.rendererType": "dom",
"workbench.colorCustomizations": {
"[Default Light+]":{
"editor.selectionHighlightBackground": "#f5f113",
"editor.selectionBackground": "#f5f113",
"editor.background": "#cce8cf",
"editorGutter.background": "#cce8cf",
"editorCursor.foreground": "#ff0000",
"editor.lineHighlightBorder": "#d3d3d3",
}
},
"editor.tokenColorCustomizations": {
"[Default Light+]":{
"comments": "#519657",
"strings": "#7e3648",
"functions": "#f80404",
"keywords": "#9700ee",
"variables": "#020202",
"numbers": "#e21d1d",
}
},
"editor.fontWeight": "520",
"editor.fontSize": 16,
"workbench.colorTheme": "Default Light+",
"editor.fontFamily": "Consolas, '微软雅黑', monospace",
"window.zoomLevel": 0,
"workbench.activityBar.visible": false,
"http.proxySupport": "off",
"cmake.configureOnOpen": true
}
vscode怎么使用渐变色页面
点击开发工具vscode的程序，如图示：

2、桌面出现vscode界面

3、vscode上方出现可选的主题

4、当前默认主题是黑色，比较护眼。选择图示的light主题

5、vscode就变成light主题，比较亮

6、如果选择red主题

7、vscode就变成红彤彤的red主题

推荐教程：vscode教程
以上就是vscode界面颜色怎么设置的详细内容，更多请关注php中文网其它相关文章！
如何打造一款属于自己的 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
keyname/key
stringKeyword/string
keyscope/key
stringkeyword.control,keyword.other,variable.language,storage.type,storage.modifier,keyword.function/string
keysettings/key
dict
keyforeground/key
string#0808D1/string
/dict
/dict
dict
keyname/key
stringInvalid/string
keyscope/key
stringinvalid/string
keysettings/key
dict
keyforeground/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., .
? URL or file name:
? 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
keyname/key
stringTemplate Expression/string
keyscope/key
stringtemplate.expression/string
keysettings/key
dict
keyforeground/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
keyname/key
stringTemplate Expression/string
keyscope/key
stringtemplate.expression/string
keysettings/key
dict
keyforeground/key
string;/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 玩出花来。
