syntax - Visual Studio Code - 语法高亮颜色的含义
问题描述
我正在寻找有关 Visual Studio Code 中每种语法突出显示颜色的实际含义的参考。我目前正在使用深色默认主题 Dark+。我已经习惯了识别一些突出显示的颜色,并且我了解了我正在查看的内容,但我正在寻找每种颜色含义的更详细参考。我已经为此搜索了一段时间,但找不到任何列出颜色和含义的参考指南或词汇表/索引。不确定这是否重要,但我只用 JavaScript 编写。先感谢您。
编辑:我已经包含了我所指的语法突出显示类型的屏幕截图。
解决方案
语法高亮颜色的含义分为两部分:
- 文件中的字符是如何组织成有意义的标记的?
- 这些标记是如何分配特定颜色和字体样式的?
将文本分区为标记
第一部分由 VSCode 内置的语法描述决定。VSCode 使用基于TextMate 语法的系统。语法是在 VSCode 源代码中定义的(例如JavaScript.tmLanguage.json),但这种形式已经经历了几个后处理阶段,使得它们几乎不可读。没有关于这些语法文件的意图的文档。他们倾向于至少大致遵循相关的语言规范,但有很多临时偏差。
了解定义的标记的最实用方法是使用命令面板中提供的“开发人员:检查 TM 范围”工具 (Ctrl+Shift+P)。当您将光标放在一个标记上时,它会向您显示描述该标记的“范围标签”。这些标签或多或少是人类可读的。
编辑 2020-07-24:从 VSCode 1.47(可能更早一点)开始,该命令称为“开发人员:检查编辑器令牌和范围”。
例子:
上面,我们可以看到return
关键字被最明确地归类为keyword.control.flow.js
. 它位于大括号括起来的代码块 ( meta.block.js
) 内、函数定义 ( meta.function.js
) 内、Javascript 源代码 ( source.js
) 内。
这个范围标签序列是最接近 VSCode 中标记的“含义”的东西。
为标记分配颜色
接下来,是将范围标签序列映射到颜色和字体样式的过程。这是由主题完成的。就我而言,我使用的是在 light_vs.json 的 VSCode 源中定义的 Visual Studio Light。对于return
关键字,这是适用的片段:
{
"scope": "keyword.control",
"settings": {
"foreground": "#0000ff"
}
},
这基本上是说,范围标签以“keyword.control”开头的任何东西都应该是蓝色的。但是其他片段可能会覆盖这个片段;规则有些复杂。为什么是蓝色?这是一种任意的审美选择。
为什么function
和NaN
有相同的颜色?语法为它们分配了不同的范围标签(storage.type.function.js
vs constant.language.nan.js
),但碰巧您使用的主题(Dark+)为它们分配了相同的颜色(就像我的一样)。我觉得这是一个奇怪的选择,但只能推测原因。
自定义颜色
您没有问,但一个明显的后续问题是如何自定义这些颜色,例如给予function
和NaN
不同的颜色。看到这个答案。