如何修改VSCode中TypeScript函数装饰器的语法高亮颜色？

当然可以！你之前用functions配置会同时改变两者颜色，是因为这个选择器太宽泛了。VSCode支持更精准的TextMate token定制，能单独给装饰器设置颜色，具体步骤如下：

• 第一步：找到装饰器对应的Token Scope
  打开VSCode的命令面板（Windows/Linux按Ctrl+Shift+P，Mac按Cmd+Shift+P），输入并选择Inspect Editor Tokens and Scopes。然后把鼠标移到你的@HostListener上，面板里会显示它的具体Token Scope——在TypeScript/Angular环境下，通常是entity.name.function.decorator.ts（可能会带前缀meta.decorator.ts，核心标识是entity.name.function.decorator.ts）。

• 第二步：在settings.json中添加精细配置
  打开用户设置（快捷键Ctrl+,/Cmd+,），点击右上角的打开设置(JSON)图标，然后添加以下配置：

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "entity.name.function.decorator.ts",
        "settings": {
          "foreground": "#ff6b6b" // 替换成你想要的装饰器颜色，比如柔和红色
        }
      },
      {
        "scope": "entity.name.function.ts",
        "settings": {
          "foreground": "#4ecdc4" // 普通函数名的颜色，比如蓝绿色，和装饰器区分开
        }
      }
    ]
  }
  

• 第三步：验证效果
  保存settings.json后，回到代码文件，就能看到@HostListener和onMouseEnter的颜色已经明显区分开了。

小提示 #

如果你的装饰器Scope和上面的不一样（比如用了第三方语法高亮插件），一定要以Inspect Editor Tokens and Scopes显示的结果为准，把配置里的scope值替换成实际查到的内容就行。

内容的提问来源于stack exchange，提问作者Eduardo Almeida