Visual Studio Code - 语法高亮颜色的含义

Question

我正在寻找有关Visual Studio Code中语法高亮每种颜色实际意义的参考资料。 我目前正在使用默认的Dark +黑暗主题。 我已经习惯了识别一些高亮颜色，并且大致知道我在看什么，但我正在寻找更详细的参考资料以了解每种颜色的含义。 我已经搜索了一段时间，但找不到任何参考指南或词汇表/索引列出颜色和含义。 不确定是否重要，但我只是在编写JavaScript代码。 谢谢。

- CalamityAdam

---

你能举个例子说明你看到了哪些颜色或者哪些颜色让你感到困惑吗？另外，你是否在使用git？ - AJC24

我已经包含了一个简单函数的截图，以展示一些颜色。我还没有使用git。 - CalamityAdam

我可能早些时候应该说 - 如果你在 VSC 中悬停在任何错误上，它通常会告诉你它发现了什么问题。然后你可以使用这些信息来解决你的问题。无论如何，我稍后会仔细看看这个问题！ - AJC24

@AJC24，我使用这段代码没有出现任何错误，而且我对VSC中那个函数有一定的了解，谢谢！我的问题是，我正在寻找一个清单/词汇表，列出代码中每种颜色代表什么。例如，“function”是蓝色，“if/else”是粉色。是否有任何描述这些颜色意义的列表？例如，“为什么'function'和'NaN'共用相同的颜色？” - CalamityAdam

具体的颜色会随着您使用的主题而变化。您可以查看您正在使用的主题的源代码，找到颜色与语言标记/名称的映射：https://github.com/vangware/dark-plus-material - Chris Barr

Answer 1

语法高亮颜色的意义分为两部分：

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

将文本分割成标记

第一部分由内置于VSCode中的语法描述确定。VSCode使用基于TextMate grammars的系统。这些语法是在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中代表令牌"意义"的最接近的东西。

将颜色分配给令牌

接下来，有一个将作用域标签序列映射到颜色和字体样式的过程。这是由主题完成的。在我的情况下，我使用的是Visual Studio Light，在VSCode源文件中定义为light_vs.json。对于return关键字，这是适用的片段：

        {
            "scope": "keyword.control",
            "settings": {
                "foreground": "#0000ff"
            }
        },

基本上，这意味着任何具有以 "keyword.control" 开头的作用域标签的内容都应该是蓝色的。但其他片段可能会覆盖这个规则；规则相当复杂。为什么是蓝色？这只是一种任意的审美选择。

为什么function和NaN有相同的颜色？虽然它们在语法上被赋予不同的作用域标签（storage.type.function.js与constant.language.nan.js），但你使用的主题（Dark+）将它们分配了相同的颜色（就像我的一样）。我觉得这是一个奇怪的选择，但只能揣测原因。

自定义颜色

虽然你没有问，但一个显而易见的后续问题是如何自定义这些颜色，例如给function和NaN分配不同的颜色。请参见此答案。

- Scott McPeak

Answer 2

以下内容大致适用于Python，至少可以这样说。

Orange = string
yellow = function/method
brownish green = comment
very light green = number, "+-*/=><"
bright green = class, module
white = modules unknown to VS code? Functions from modules (e.g., the ".sort" in "np.sort")
light blue = variable
dark blue = "class", "def", "False", "not", "None", "in", ... (= "other reserved words"?)
purple = command (while, for, if, try, except, return, ...)

我有一些变量是白色的，原因不明。请改进这个答案。

- Convexity