VSCode TypeScript Native Preview扩展未对.ts文件中的常量进行特殊高亮问题咨询

我之前也碰到过一模一样的困扰，结合社区里的反馈和自己折腾的经验，给你梳理下这个问题的情况：

1. 这属于扩展的已知待修复问题 #

TypeScript Native Preview目前还在预览迭代阶段，语法高亮的细节处理确实还没做到完美。在官方的GitHub Issue区，已经有不少用户提交了类似反馈——就是const声明的只读变量和let/var的可变变量，在高亮上没有区分度，尤其是在一些深色主题下，这个问题会让代码可读性大打折扣。开发团队已经把这个优化需求加入了待办清单，但暂时还没给出明确的修复时间点。

2. 排查是否是你的IDE配置导致的冲突 #

不过也有可能是你这边的主题或自定义配置影响了高亮效果，可以按下面几步排查：

• 切换默认主题测试：先临时换成VS Code自带的Dark+或者Light+主题，看看高亮有没有差异。很多第三方自定义主题可能还没适配TypeScript Native Preview的语法规则，导致标识符颜色统一。
• 禁用其他语法扩展：如果你同时装了比如ESLint、TSLint或者其他第三方TypeScript语法高亮类的扩展，可能会和Native Preview的规则冲突。先临时禁用这些扩展，重启VS Code后再观察效果。
• 检查自定义token配置：打开VS Code的设置文件（Ctrl+, 然后搜索settings.json），看看有没有editor.tokenColorCustomizations相关的配置，是不是手动把常量和可变标识符的颜色设成了一样。比如如果有类似下面的代码，就会导致高亮一致：

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "variable.other.readonly.ts",
        "settings": {
          "foreground": "#FFFFFF"
        }
      },
      {
        "scope": "variable.other.ts",
        "settings": {
          "foreground": "#FFFFFF"
        }
      }
    ]
  }
  

  如果有这类配置，先注释掉再测试。

临时解决办法 #

在官方修复之前，你可以通过自定义token颜色来手动区分两者：

1. 打开VS Code设置（快捷键Ctrl+,），搜索editor.tokenColorCustomizations
2. 点击「编辑 in settings.json」，添加以下规则（颜色可以根据你的主题自行调整）：

   "editor.tokenColorCustomizations": {
     "textMateRules": [
       {
         "scope": "variable.other.readonly.ts",
         "settings": {
           "foreground": "#4EC9B0" // 给const变量设置独特的青色
         }
       },
       {
         "scope": "variable.other.ts",
         "settings": {
           "foreground": "#9CDCFE" // 给let/var变量设置浅蓝色
         }
       }
     ]
   }
   

3. 保存配置后重启VS Code，就能看到明显的高亮区分效果了。

示例：常量与可变标识符无高亮差异的情况

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