VSCode为何高亮我的TypeScript类型注解？如何消除视觉干扰？

原因 #

1. VSCode内置的TypeScript语义突出显示功能，部分主题会对类型注解应用特殊着色，即便代码无错误或警告也会触发。
2. 第三方TS/React语法增强扩展，默认开启了类型注解的高亮规则。
3. 自定义VSCode配置中，手动启用了相关的高亮选项。

解决办法 #

1. 关闭TypeScript语义突出显示 #

打开VSCode设置（快捷键Ctrl+, / Cmd+,），搜索typescript.semanticHighlighting.enabled，将其设置为false。

2. 自定义主题高亮规则 #

若不想关闭全部语义高亮，可单独调整类型注解的颜色：

• 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入Preferences: Open Settings (JSON)。
• 在settings.json中添加如下配置，将类型注解颜色设为与普通文本一致（替换为你当前主题的文本颜色）：

"editor.tokenColorCustomizations": {
  "[Dark+ (默认暗色)]": { // 替换为你的主题名称
    "textMateRules": [
      {
        "scope": "storage.type.annotation.typescript",
        "settings": {
          "foreground": "#d4d4d4" // 示例颜色，替换为主题普通文本颜色
        }
      }
    ]
  }
}

3. 排查第三方扩展 #

禁用近期安装的TS/React相关扩展，逐一测试是否是扩展导致的问题。找到对应扩展后，可进入其设置关闭高亮选项，或直接卸载。

4. 重置VSCode配置 #

若自定义配置混乱引发问题：

• 关闭VSCode。
• 找到配置文件夹：
  • Windows: %APPDATA%\Code\User
  • macOS: ~/Library/Application Support/Code/User
  • Linux: ~/.config/Code/User
• 备份settings.json后删除，重启VSCode恢复默认配置。

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