Customize syntax highlighting colors of data types and variables for typescript in Visual Studio Code

Question

I would like customize syntax highlighting colors for typescript.

I use Visual Studio Code 1.16 and custom theme (Actual) Obsidian.

I try use featues editor.tokenColorCustomizations.

Here is my custom user settings.

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

I don’t know how can I select a change color of:

• data types keywords (in the screenshot string, number, boolen)
• variables (in the screenshot : filtredProducst)
• in the screenshot: OnInit

Answer 1

You're on the right track.

As you've seen, editor.tokenColorCustomizations can be used to set broad classes of tokens like "keywords", etc. The exact set of things that can be customized this way does not appear to be documented, but you can refer to the source code for ITokenColorCustomizations.

Then there is the textMateRules section. This can be used to specify things that the "simple" method cannot. The documentation explains the basic idea, but a screenshot may help to illustrate:

First, use the command palette (Ctrl+Shift+P) to run "Developer: Inspect TM Scopes". This pops up a window that will show the sequence of scope labels for any token.

Edit 2020-07-24: As of VSCode 1.47 (and possibly a little earlier) the command is called "Developer: Inspect Editor Tokens and Scopes".

Next, add an entry to textMateRules where the scope specifier matches the stack of scope labels. The matching rules are somewhat complicated but mostly intuitive; you'll probably get it pretty quickly just by experimenting. Changes to the rules take effect as soon as you save settings.json.

Note: VSCode does not appear to completely or correctly implement the TextMate matching rules. It's close, but that's it. (Examples: VSCode does not implement exclusion with "-", and its resolution of "a c" versus "b c" seems incorrect.)

For the specific elements in your question:

• Data types can be matched with support.type.primitive
• filteredProducts can be matched with variable.other.property
• OnInit can be matched with entity.other.inherited-class

Example (that just makes them all red):

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