在 Visual Studio Code 中为 typescript 自定义语法突出显示数据类型和变量的颜色

Question

我想为打字稿自定义语法高亮颜色。

我使用 Visual Studio Code 1.16 和自定义主题 (Actual) 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 部分。这可用于指定“简单”方法无法指定的内容。 documentation 解释了基本思想，但屏幕截图可能有助于说明：

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

编辑 2020-07-24：从 VSCode 1.47（可能更早一点）开始，该命令称为“Developer: Inspect Editor Tokens and Scopes”。

接下来，向textMateRules 添加一个条目，其中scope 说明符与范围标签堆栈匹配。 matching rules 有点复杂，但主要是直观的；只需通过实验，您可能很快就会得到它。保存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",
                },
            },
        ],