Microsoft/TypeScript

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

Open

#50 469 ouverte le 15 août 2022

Voir sur GitHub
 (4 commentaires) (0 réactions) (0 assignés)TypeScript (6 726 forks)batch import
BugDomain: DecoratorsHelp Wanted

Métriques du dépôt

Stars
 (48 455 stars)
Métriques de merge PR
 (Merge moyen 6j 17h) (9 PRs mergées en 30 j)

Description

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 image

With semantic highlighting disabled - works image

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

Guide contributeur