Visual Studio代码-语法突出显示颜色的含义

Question

我正在寻找有关Visual Studio Code中语法突出显示的每种颜色实际含义的参考。我目前正在使用深色默认主题Dark +。我已经习惯了识别几种突出显示的颜色，并且了解了要看的内容，但是我正在寻找有关每种颜色含义的更​​详细的参考。 我已经搜索了一段时间，找不到列出颜色和含义的任何参考指南或词汇表/索引。不确定是否重要，但是我只是用JavaScript编写。 预先谢谢你。

编辑：我提供了我所指的语法突出显示类型的屏幕截图。

Answer 1

语法突出显示颜色的含义分为两个部分：

1. 文件中的字符如何组织成有意义的标记？
2. 如何为这些标记分配特定的颜色和字体样式？

将文本分区为令牌

第一部分由内置于VSCode的语法描述确定。 VSCode使用基于TextMate grammars的系统。语法是在VSCode源代码（例如JavaScript.tmLanguage.json）中定义的，但是以这种形式，它经历了两个后期处理阶段，因此几乎无法阅读。没有关于这些语法文件的意图的文档。它们通常至少大致遵循相关的语言规范，但存在许多特殊的偏差。

了解定义令牌的最实用方法是使用命令面板（Ctrl + Shift + P）中的“开发人员：检查TM范围”工具。将光标放在令牌上时，它将显示描述该令牌的“作用域标签”。这些标签或多或少是人类可读的。

示例：

上面，我们可以看到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”开头的内容都应为蓝色。但是其他片段可能会覆盖这一片段。 rules有点复杂。为什么是蓝色？这是一个任意的美学选择。

为什么function和NaN具有相同的颜色？语法为它们分配了不同的范围标签（storage.type.function.js和constant.language.nan.js），但是恰好您正在使用的主题（Dark +）为它们分配了相同的颜色（与我的一样）。我发现这是一个奇怪的选择，但只能推测原因。

自定义颜色

您没有问，但是一个显而易见的后续问题是如何自定义这些颜色，例如为function和NaN提供不同的颜色。参见this answer。