如何在VSCode中查询指定代码token对应的关联配色

步骤1：查询目标Token的标记规则与当前配色 #

VSCode自带了原生的Token检查工具，无需额外安装插件：

• 按下Ctrl+Shift+P（Mac系统为Cmd+Shift+P）调出命令面板，执行Developer: Inspect Editor Tokens and Scopes命令
• 用鼠标点击你要修改配色的代码位置，会弹出Token详情面板，核心信息如下：
  • textmate scopes：该Token对应的语法标记规则列表，优先级从上到下递减，最顶部的是匹配精度最高的scope值
  • foreground：当前生效的前景色值，同时会标注该配色的来源（主题默认/自定义配置）
  • 若面板显示semantic token type字段，说明该Token是语言插件提供的语义级标记，可走语义配色规则修改

步骤2：自定义覆盖Token配色 #

拿到scope值后就可以在配置中直接覆盖：

• 按下Ctrl+,（Mac系统为Cmd+,）打开设置页，点击右上角的Open Settings (JSON)按钮进入JSON配置界面
• 新增editor.tokenColorCustomizations配置项，示例格式如下：

"editor.tokenColorCustomizations": {
    // 去掉外层的主题名包裹则对所有主题生效
    "[当前使用的主题名]": {
        "textMateRules": [
            {
                // 填入刚才查询到的优先级最高的scope值
                "scope": "entity.name.type.class.java",
                "settings": {
                    "foreground": "#569cd6", // 自定义颜色值
                    "fontStyle": "bold" // 可选，支持bold/italic/underline组合
                }
            }
        ]
    }
}

• 如果是语义级Token，使用editor.semanticTokenColorCustomizations配置项即可，规则和上述格式完全一致
• 保存配置后修改会立即生效，无需重启VSCode

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