Microsoft/TypeScript

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

Open

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

在 GitHub 查看
 (4 评论) (0 反应) (0 负责人)TypeScript (6,726 fork)batch import
BugDomain: DecoratorsHelp Wanted

仓库指标

Star
 (48,455 star)
PR 合并指标
 (平均合并 6天 17小时) (30 天内合并 9 个 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

贡献者指南