VSCode颜色主题_自定义语法高亮规则

修改VSCode主题需理解token和TextMate规则。在settings.json中用editor.tokenColorCustomizations调整字符串、注释等颜色；通过textMateRules按作用域精细控制，如variable.other.property.js；使用Developer: Inspect Editor Tokens and Scopes命令获取作用域；创建新主题可用yo code生成模板，编辑theme.json定义colors和tokenColors，最后加载切换主题。

在 VSCode 中自定义颜色主题和语法高亮规则，能显著提升编码体验。你既可以修改现有主题的显示效果，也可以创建全新的主题。关键在于理解 color tokens 和 TextMate 语法规则 的作用机制。

如何修改当前主题的颜色高亮

如果你只是想微调某个已安装主题的语法颜色（比如让字符串更显眼或注释变浅），可以直接在 settings.json 中使用 editor.tokenColorCustomizations 配置：

{
  "editor.tokenColorCustomizations": {
    "strings": "#FF79C6",
    "comments": {
      "fontStyle": "italic",
      "foreground": "#6272A4"
    },
    "keywords": "#BD93F9"
  }
}

上面的配置会覆盖当前主题对字符串、注释和关键字的默认样式。支持的 token 类型包括：strings, comments, keywords, numbers, functions, types 等常见语法元素。

使用 TextMate 规则精细控制高亮

某些语言的语法结构无法通过简单 token 覆盖实现理想高亮，这时需要使用 textMateRules。它基于正则匹配作用域（scope），适用于所有主题或指定主题。

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "variable.other.property.js",
        "settings": {
          "foreground": "#50FA7B",
          "fontStyle": "bold"
        }
      },
      {
        "scope": "meta.function.parameters",
        "settings": {
          "foreground": "#FFB86C"
        }
      }
    ]
  }
}

要找到正确的 scope，打开命令面板（Ctrl+Shift+P），运行 Developer: Inspect Editor Tokens and Scopes，然后点击代码中的任意位置，VSCode 会显示该字符的完整作用域链。

创建自定义颜色主题

若想从头构建专属主题，可在扩展中定义 theme。步骤如下：

• 使用 Yeoman 生成器创建 VSCode 扩展模板：yo code → 选择“New Color Theme”
• 编辑生成的 .json 主题文件，设置基础颜色（如背景、字体、边栏等）
• 在 tokenColors 数组中添加 TextMate 规则，定义各类语法元素的显示样式
• 发布或本地加载后，在设置中切换到你的主题

主题文件核心结构示例：

{
  "name": "My Custom Theme",
  "type": "dark",
  "colors": {
    "editor.background": "#1E1E1E",
    "editor.foreground": "#D4D4D4"
  },
  "tokenColors": [
    {
      "scope": ["string"],
      "settings": { "foreground": "#CE9178" }
    }
  ]
}

基本上就这些。通过组合 tokenColorCustomizations 和作用域规则，你可以精确控制每一类语法的颜色与样式，无需编写完整主题也能实现个性化高亮。关键是多用“Inspect Scopes”工具查作用域，再针对性设置。不复杂但容易忽略细节。