VSCode - 更改打字稿功能装饰器的颜色答案

【问题标题】：VSCode - Change color of typescript function decoratorVSCode - 更改打字稿功能装饰器的颜色
【发布时间】：2018-11-07 03:18:54
【问题描述】：

有没有办法改变 VSCode 中装饰器的语法高亮颜色？举个小例子：

     @HostListener('mouseenter')
     onMouseEnter() {}

@HostListener 和 onMouseEnter 都以相同的颜色突出显示。我想改变它。到目前为止，我尝试弄乱"editor.tokenColorCustomizations": { "functions" : "SomeColorHere"}}，但这会改变装饰器和函数声明。

【问题讨论】：

标签： visual-studio-code decorator syntax-highlighting

【解决方案1】：

这是我的配置，以使用 Mark 建议的 TODO highlight，我排除了 require 和 import 以避免干扰 js 和手写笔

截图快速说明：default斜体样式来自here，内联属性来自here

"todohighlight.isEnable": true,
"todohighlight.isCaseSensitive": true,
"todohighlight.keywordsPattern": "@(?!require|import)[\\w-_.]*",
"todohighlight.defaultStyle": {
    "color": "#1E88E5",
    "backgroundColor": "0",
    "fontWeight": "bold"
},
"todohighlight.include": [
    "**/*.js",
    "**/*.ts",
    "**/*.vue",
],
"todohighlight.exclude": [
    "**/node_modules/**",
    "**/bower_components/**",
    "**/dist/**",
    "**/build/**",
    "**/.vscode/**",
    "**/.github/**",
    "**/_output/**",
    "**/*.min.*",
    "**/*.map",
    "**/.next/**"
],
"todohighlight.maxFilesForSearch": 5120,

【讨论】：

它还突出显示了 cmets 中的装饰器，如何禁用它？另外，如果导入像'@types/sequelize'这样的类型，它也是highlighted。

【解决方案2】：

请参阅inspecting textmate scopes 和类似内容以了解如何查看您的语法范围。所以这样的事情会改变装饰符号@的颜色：

 {
    "scope":  [
       "punctuation.decorator.js", 
        // "meta.decorator.js",
     ],

     "settings": {
        "foreground": "#e100ff",
        "fontStyle": "bold"
     }
}

这只会影响@ 符号，我找不到为@ 符号及其关联函数名称着色且没有其他函数名称的方法。

如果您真的需要，有一种解决方法可以做到这一点。那就是使用像TODO highlight 这样的单词荧光笔并制作一个可以满足您需求的正则表达式。喜欢：

"todohighlight.keywordsPattern": "@[\\w-_]*",

"todohighlight.defaultStyle": {
    "color": "red",
    // "letterSpacing": "1px",
    // "backgroundColor": "rgba(170,102,0,1)",
    "backgroundColor": "transparent",
    // "borderRadius": "4px",
    "isWholeLine": false
  }

【讨论】：