themes - 在 Visual Studio Code 中自定义 typescript 的数据类型和变量的语法高亮颜色

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": [              
            ]   
        }
}

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

数据类型关键字(截图中的字符串、数字、 bool 值)

变量(在截图中:filtredProducst)

在屏幕截图中: OnInit

Answer 1

你在正确的轨道上。
如您所见，editor.tokenColorCustomizations可用于设置广泛类别的标记，如“关键字”等。可以通过这种方式自定义的确切事物集似乎没有记录，但您可以引用 ITokenColorCustomizations 的源代码.
然后是 textMateRules部分。这可用于指定“简单”方法无法指定的内容。 documentation解释了基本思想，但屏幕截图可能有助于说明:

首先，使用命令面板 (Ctrl+Shift+P) 运行“Developer: Inspect TM Scopes”。这会弹出一个窗口，显示任何 token 的范围标签序列。
编辑 2020-07-24:从 VSCode 1.47(可能更早一点)开始，该命令称为“ 开发人员:检查编辑器 token 和范围 ”。
接下来，向 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",
                },
            },
        ],