"function" semantic token applied instead of "decorator", thus cannot configure correct syntax highlighting

[giancarlo-dm]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.70.1
• OS Version: Windows 11 Enterprise (21H2)

Steps to reproduce:

1. Create a theme;
2. Enable semantic highlighting;
3. Configure TextMate scopes for functions and decorators;
4. Configure "decorator" token under "semanticTokenColors";
5. The decorators calls are identified as functions instead of decorators (should be able since it is prefixed with "@").

Details:
I created a custom theme with semantic syntax highlighting enabled, but I faced a problem with decorators in TypeScript, specifically, I believe VS Code fails to understand that something prefixed with and "@" is a decorator and not a function. As a result, the applied color for syntax highlight is inherited from the "function" semantic token type (which inherits from TextMate scopes) as you can see below.

The decorators used are from NestJS framework.

With semantic highlighting enabled - does not highlight the way I want

With semantic highlighting disabled - works

My theme configuration

{
    "semanticHighlighting": true,
    "semanticTokenColors": {
        "decorator": { 
            "foreground": "#808000",  // tried using this token, but since vs code reports that it is "function", this never get applied.
            "fontStyle": "bold"
        }
    } 
    "tokenColors": [
        {
            "name": "Decorators",
            "scope": [
                "punctuation.decorator",
                "meta.decorator entity.name.function"
            ],
            "settings": {
                "foreground": "#808000", // applies correctly if semantic highlighting is disabled, which is correct
                "fontStyle": ""
            }
        },
        {
            "name": "Classes - Methods",
            "scope": [
                "entity.name.function"
            ],
            "settings": {
                "foreground": "#1EB540", // This is the color that get applied on the decorator when semantic highlighting is enabled
                "fontStyle": "bold"
            }
        }
    ]
}

I already tried many things and I could not find a solution. Am I missing something here?

If you need the full theme file, you can get it here: https://github.com/giancarlo-dm/vivid-monokai-vscode

[aeschli]

Since a while we have the decorator semantic token type. The TypeScript extension should use it in this case.

[DanielRosenwasser]

Maybe to get a little philosophical in the UX - there's no such thing as a decorator declaration in TypeScript/JavaScript, so it is weird for a semantic classifier to say anything when a syntactic highlighter like TmLanguage already tells you that this is a decorator. In fact, a syntactic classifier always has the most-local context anyway, so when should an editor decide to do one vs. the other? To what extent should a semantic classifier give all the same spans as a syntactic one, or give none?

[giancarlo-dm]

From my understanding, despite a decorator declaration in TS/JS being just a function and not having any special syntax like Java @interface for annotations, this function is automatically invoked with specific parameters, and this is done when the programmer uses the prefix @ signaling TS/JS that he wants to apply the decorator effects in a specific context (e.g. class, method).

So, in my head the semantic here is "decorator" and not "function" because functions simply process data and provides a result, so to speak, while decorators changes behavior or add functionality to something.

If I understood correctly, the TS semantic classifier does not have the "decorator" classification, so it does not understand what the @ prefix means, thus using function instead. I suggest that, if possible, the TS semantic classifier should be able to understand decorator usage despite TS/JS not having special decorator declaration.

[ShacharHarshuv]

Weird, I have a similar issue but it says the semantic token type is "class". Function would have made more sense because the decorator s also a function.