如何配置VS Code自定义主题实现any类型函数的颜色区分

默认暗色主题能区分不同类型函数的颜色，核心是VS Code的TypeScript语言服务会给代码元素打语义标记：有明确类型的函数会被标记为基础function语义token，类型为any的函数会在基础token上额外携带any修饰符，默认主题预先给两类token配了不同色值，而SynthWave '84这类第三方主题没有单独配置带any修饰符的函数token色值，就会出现两类函数颜色一致的问题。

不用修改主题源文件，通过VS Code自带的语义token自定义配置就能实现效果，操作步骤如下：

• 按Ctrl+Shift+P（macOS系统按Cmd+Shift+P）调出命令面板，输入Preferences: Open Settings (JSON)，回车打开用户设置的JSON配置文件
• 在配置文件的根层级添加如下语义高亮覆盖规则：

"editor.semanticTokenColorCustomizations": {
  "[SynthWave '84]": {
    "rules": {
      // 有明确类型的函数名称设置为黄色，色值可根据主题视觉效果微调
      "function": "#ffd700",
      // any类型的函数名称强制设置为白色
      "function:any": "#ffffff"
    }
  }
}

注意：方括号里的SynthWave '84是目标主题的标识名，如果你用的是其他自定义主题，替换成对应主题的标识名即可；如果要让规则对所有主题生效，去掉外层的"[SynthWave '84]": {}包裹，直接把rules对象放在editor.semanticTokenColorCustomizations下就行。

常见问题排查 #

• 配置保存后如果没有即时生效，先检查语义高亮开关：打开设置搜索editor.semanticHighlighting.enabled，确认选项为开启状态，部分第三方主题会默认关闭语义高亮，手动开启即可
• 颜色值可以按需调整，比如觉得纯白色太刺眼，可以换成柔白色#e5e5e5，黄色也可以匹配主题整体色调微调，不需要严格和默认暗色的色值完全一致
• 该配置存在于用户设置文件中，后续主题更新不会覆盖自定义的颜色规则

内容的提问来源于stack exchange，提问作者Ibrahim Ali