在 Visual Studio Code 中自定义打字稿的数据类型和变量的语法高亮颜色

Question

我想为打字稿自定义语法突出显示颜色。

我使用 Visual Studio Code 1.16 和自定义主题（实际） Obsidian。

我尝试使用特征editor.tokenColorCustomizations。

这是我的自定义用户设置。

{
        "editor.fontSize": 20,
        "workbench.colorTheme": "(Actual) Obsidian",
        "editor.tokenColorCustomizations": {
            "functions": "#F1F1F1",
            "keywords": "#8EC160",
            "types": "#87CEEB",
            "numbers": "#F1F1F1",
            "variables": "#F1F1F1",
            "textMateRules": [              
            ]   
        }
}

我不知道如何选择更改颜色：

• 数据类型关键字（截图中的字符串、数字、布尔值）
• 变量（在截图中：filtredProducst）
• 在屏幕截图中： OnInit

Answer 1

你走在正确的轨道上。

正如您所看到的，editor.tokenColorCustomizations可用于设置广泛的标记类别，例如“关键字”等。可以通过这种方式自定义的确切内容集似乎没有记录，但您可以参考ITokenColorCustomizations.

然后是该textMateRules部分。这可用于指定“简单”方法无法指定的内容。该文档解释了基本思想，但屏幕截图可能有助于说明：

首先，使用命令选项板 (Ctrl+Shift+P) 运行“Developer: Inspect TM Scopes”。这会弹出一个窗口，其中显示任何令牌的范围标签序列。

编辑 2020-07-24：从 VSCode 1.47（可能更早一点）开始，该命令称为“开发人员：检查编辑器令牌和范围”。

接下来，将一个条目添加到说明符与范围标签堆栈匹配的textMateRules位置。匹配规则scope有些复杂，但大多是直观的；通过尝试你可能很快就会得到它。对规则的更改在您保存后立即生效。settings.json

注意：VSCode 似乎没有完全或正确地实现 TextMate 匹配规则。很接近了，但仅此而已。（示例：VSCode 未实现“-”排除，并且其“a c”与“b c”的解析似乎不正确。）

对于您问题中的具体要素：

• 数据类型可以匹配support.type.primitive
• filteredProducts可以搭配variable.other.property
• OnInit可以搭配entity.other.inherited-class

示例（这只会让它们全部变成红色）：

        "textMateRules": [
            {
                "scope": [
                    "support.type.primitive",
                    "variable.other.property",
                    "entity.other.inherited-class",
                ],
                "settings": {
                    "foreground": "#F00",
                },
            },
        ],

2023 年 10 月 13 日更新：以上所有内容均假设使用基于 TextMate 语法的语法突出显示，该语法单独处理单个文件并使用正则表达式识别语法元素。在某些时候，VSCode 添加了“语义突出显示”，它允许突出显示使用来自执行“真实”解析的语言服务器的信息（例如，查看 C/C++ 中的头文件），使其可能更加准确和更具表现力。有关该替代机制的更多信息，请参阅 VSCode语义突出显示指南。