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

Question

我想为 typescript 自定义语法高亮颜色。

我使用 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

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

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

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

接下来，向

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",
                },
            },
        ],

Answer 2

我认为其他答案可能已过时。

目前，看起来正确的答案是沿着这些行向 settings.json 添加一个设置：

"editor.semanticTokenColorCustomizations": {
    "enabled": true,
    "rules": {
        "type": {
            "foreground": "#ff0000"
        }
    }
}

请参阅：VSCode Typescript 语法突出显示中类型的标记名称是什么？