Microsoft/TypeScript

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

开放

#50,469 创建于 2022年8月15日

 (4 条评论) (0 个反应) (0 位负责人)TypeScript (13,395 个派生)batch import
BugDomain: DecoratorsHelp Wanted

仓库指标

星标
 (108,860 个星标)
PR 合并指标
 (PR 指标待抓取)

描述

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

贡献者指南