如何在VSCode中修改const变量的语法高亮颜色？

我尝试通过settings.json修改VSCode的配色方案，但始终无法修改const变量名称的颜色——目前它显示为蓝色，我想改成金色（#E5C07B）。

当前效果：

期望效果：

我已经尝试了多种配置，但都没有效果，以下是我试过的配置：

尝试配置1： #

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            // 目标：通用变量和常量
            "scope": [
                "variable.other.local.js",    // JavaScript局部变量
                "variable.other.local.ts",    // TypeScript局部变量
                "variable.other.local.go",    // Go局部变量
                "variable.other.local.rust",  // Rust局部变量
                "variable.other.js",          // 通用JavaScript变量
                "variable.other.ts",          // 通用TypeScript变量
                "variable.other.go",          // 通用Go变量
                "variable.other.rust"         // 通用Rust变量
            ],
            "settings": {
                "foreground": "#E5C07B"  // 变量设为金黄色
            }
        },
        {
            // 目标：变量声明关键字（const、let、var）
            "scope": [
                "storage.type.js",    // JavaScript变量声明关键字
                "storage.type.ts",    // TypeScript变量声明关键字
                "storage.type.go",    // Go变量声明关键字
                "storage.type.rust"   // Rust变量声明关键字
            ],
            "settings": {
                "foreground": "#C678DD"  // 关键字设为紫色
            }
        }
    ]
}

尝试配置2： #

"tokenColors": [
    {
        "name": "模板字符串",
        "scope": [
            "string.template"
        ],
        "settings": {
            "foreground": "#98C379"
        }
    }
]

当前完整的settings.json配置： #

// 主题与字体
"workbench.colorTheme": "Default Dark+", // 基于深色主题修改
"editor.fontLigatures": true, // 启用连字效果
"editor.lineHeight": 22, // 设置行高

// 编辑器自定义
"editor.cursorStyle": "line",
"editor.cursorBlinking": "blink",
"editor.renderWhitespace": "none", // 不显示空白标记
"editor.smoothScrolling": true, // 启用平滑滚动

// 自定义界面颜色
"workbench.colorCustomizations": {
    "editor.background": "#1e222a", // 编辑器背景
    "editor.foreground": "#ABB2BF", // 编辑器前景文字
    "editorCursor.foreground": "#E5C07B", // 光标颜色
    "editorIndentGuide.activeBackground1": "#385977", // 缩进引导线
    "sideBar.background": "#1b1f27", // 侧边栏背景
    "sideBar.foreground": "#ABB2BF", // 侧边栏文字
    "activityBar.background": "#1e222a", // 活动栏背景
    "tab.activeBackground": "#1e222a", // 激活标签页背景
    "tab.inactiveBackground": "#252931", // 未激活标签页背景
    "statusBar.background": "#282C34", // 状态栏背景
    "terminal.background": "#1E222A", // 终端背景
    "terminal.foreground": "#ABB2BF", // 终端文字
    "editorBracketMatch.border": "#61AFEF", // 括号匹配高亮
    "editorLineNumber.activeForeground": "#61AFEF",
    "editor.selectionBackground": "#3E4451", // 选中文本背景
    "editor.lineHighlightBackground": "#61afef00" // 当前行高亮
},

// 语法高亮
"editor.tokenColorCustomizations": {
    "comments": "#5C6370", // 注释颜色
    "functions": "#61AFEF", // 函数颜色（偏蓝）
    "keywords": "#C678DD", // 关键字颜色（紫色）
    "strings": "#98C379", // 字符串颜色（绿色）
    "variables": "#E5C07B", // 变量颜色（金黄色）
    "types": "#E06C75",

    "textMateRules": [
        {
            "scope": "keyword.function.go", // 目标Go语言的func关键字
            "settings": {
                "foreground": "#C678DD" // 自定义颜色
            }
        }
    ]
},

"window.density.editorTabHeight": "compact",

附加截图：

问题出在你没有精准命中const变量名称对应的TextMate scope。不同语言的const变量scope不同，以JavaScript/TypeScript为例，const变量名称的scope是variable.other.constant.js和variable.other.constant.ts，你之前的配置只覆盖了普通变量的scope，没包含常量的。

修改editor.tokenColorCustomizations里的textMateRules，新增常量对应的scope即可：

"editor.tokenColorCustomizations": {
    // 保留原有的comments、functions等配置
    "comments": "#5C6370",
    "functions": "#61AFEF",
    "keywords": "#C678DD",
    "strings": "#98C379",
    "variables": "#E5C07B",
    "types": "#E06C75",

    "textMateRules": [
        {
            "scope": [
                // 原有普通变量scope
                "variable.other.local.js",
                "variable.other.local.ts",
                "variable.other.local.go",
                "variable.other.local.rust",
                "variable.other.js",
                "variable.other.ts",
                "variable.other.go",
                "variable.other.rust",
                // 新增常量变量的scope
                "variable.other.constant.js",
                "variable.other.constant.ts",
                "variable.other.constant.go",
                "variable.other.constant.rust"
            ],
            "settings": {
                "foreground": "#E5C07B"
            }
        },
        // 保留原有其他规则
        {
            "scope": "keyword.function.go",
            "settings": {
                "foreground": "#C678DD"
            }
        }
    ]
}

如果不确定某个元素的具体scope，可以用VSCode的内置工具确认：

1. 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）
2. 搜索并选择开发者：检查编辑器令牌和作用域
3. 鼠标悬停到要修改的const变量名称上，就能看到它对应的所有scope，直接把最精准的那个加到配置里即可。

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