VS Code: How to set semantic syntax coloring like Eclipse does. Default syntax coloring does not do this

Question

In C/C++, in Eclipse editor you can set colors at a more language level: For eg function argument, local variable can have different colors. Static and global variable colors can be changed. Macros and Macro references can be configured.

How to do this in Visual Studio Code? I am not sure if the text mate tmLanguage can achieve this. I could not find any documentation for this.

Answer 1

[see further below for v1.45 changes]

---

You are not limited to a theme's supplied semantic token highlighting. You can choose the color and fontstyle yourself for supported language-semantic tokens by doing this:

It's also possible to define semantic theming rules in the user settings:

"editor.tokenColorCustomizationsExperimental": {
    "property.readonly": {
        "foreground": "#35166d"
    },
    "*.defaultLibrary": {
        "fontStyle": "underline"
    }
}

from https://github.com/microsoft/vscode/wiki/Semantic-Highlighting-Overview#as-a-theme-author-do-i-need-to-change-my-theme-to-make-it-work-with-semantic-highlighting

And see especially https://github.com/microsoft/vscode/wiki/Semantic-Highlighting-Overview#how-can-i-find-out-what-semantic-tokens-are-available-and-how-they-are-themed for how to discover the semantic tokens. For example:

If there is no semantic token type listed, that language service does not yet support them. But undoubtedly, when they do you will want to modify some of their color and fontstyle choices.

---

vscode 1.45 will rename editor.tokenColorCustomizationsExperimental to editor.semanticTokenColorCustomizations

See https://github.com/microsoft/vscode/issues/96267

This syntax works for me in the Insiders' Build April, 2020:

"editor.semanticTokenColorCustomizations": {
    "enabled": true,
    "rules": {
        "enumMember": "#ff0000"
    },
    "[Default Dark+]": {
        "enabled": true,
        "rules": {
            "variable.readonly": "#ff00ff"
        },
    }
},

---

From https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_45.md#semantic-token-styling-in-the-user-settings:

Semantic coloring is available for TypeScript and JavaScript, with support for Java, C++ in the works. It is enabled by default for built-in themes and being adopted by theme extensions.

The editor.semanticTokenColorCustomizations allows users to overrule the theme settings and to customize the theming.

Example that adds semantic styling to all themes: ```

"editor.semanticTokenColorCustomizations": {
    "enabled": true,
    "rules": {
        "property.readonly": {
          "foreground": "#35166d"
        },
        "*.defaultLibrary": {
            "bold": true
        }
    }
}

---

The setting above colors all constants with #35166d and all occurrences of symbols from a default library (e.g. Math, setTimeout) bold.

---

Example that adds semantic styling to the Dark+ themes: ```

"editor.semanticTokenColorCustomizations": {
    "[Default Dark+]": {
        "enabled": true,
        "rules": {
            "parameter": { "underline": true },
            "*.declaration": { "bold": true }
        }
    }
}

The setting above underlines all parameters in the Dark + theme and
makes all symbol declarations bold.

Theming for semantic tokens is explained in more details in the
[Semantic Highlighting
Guide](/api/language-extensions/semantic-highlight-guide#theming).

---

Oddly, in my testing even with the enabled: true in the above "editor.semanticTokenColorCustomizations" you still need this setting enabled:

    "editor.semanticHighlighting.enabled": true

but that is the default.

Answer 2

You can read more about scopes and syntax highlighting colors here.

This is documented/requested in Microsoft/vscode issue 27894 last year, implemented by PR 29393.
See "User definable syntax highlighting colors" in VSCode 1.15, modifying a color theme.

---

Note that VSCode 1.42 does include Semantic highlighting for TypeScript & JavaScript

Semantic highlighting support for TypeScript and JavaScript is in development and not yet enabled by default.
But you can try it out by adding the following setting:

"editor.semanticHighlighting.enabled": true

When enabled, you will see that some identifiers get a new color and style and are now highlighted according to their resolved type.
The syntax (TextMate) highlighter classifies many tokens as variables. These now turn into namespaces, classes, parameters and so on.

You can see this best in the imports section where now each imported symbol is colored with the symbol's type:

You can use the Developer: Inspect Editor Tokens and Scopes command to inspect the semantic and syntax tokens that are computed for each location.

Couple that editor.semanticHighlighting.enabled with the revised 1.45 April 2020 editor.semanticTokenColorCustomizations (see Mark's answer), and you can define the syntax highlighting you want.