如何为VSCode添加自定义语法高亮和主题色彩？-VSCode-PHP中文网

如何为VSCode添加自定义语法高亮和主题色彩？

紅蓮之龍

发布： 2025-09-19 22:53:01

原创

859人浏览过

核心方法是通过settings.json中的workbench.colorCustomizations和editor.tokenColorCustomizations调整UI与语法高亮，精准定位代码元素需使用“开发者：检查编辑器令牌和作用域”命令获取scope，进而自定义颜色与样式，实现个性化主题。

如何为vscode添加自定义语法高亮和主题色彩？

想要为VSCode添加自定义语法高亮和主题色彩，核心方法是利用其强大的

settings.json

登录后复制

文件，特别是

workbench.colorCustomizations

登录后复制

和

editor.tokenColorCustomizations

登录后复制

这两个配置项。通过它们，你可以细致入微地调整界面的每一个角落，甚至代码中不同类型元素的颜色。

说实话，这事儿并不复杂，但要搞得称心如意，确实需要一点耐心和一点点探索精神。我个人觉得，最直接的方式就是打开你的

settings.json

登录后复制

文件（

Ctrl/Cmd + Shift + P

登录后复制

，然后搜索 "Open User Settings (JSON)"）。

在这里，你会看到两个主要区域可以让你大展拳脚：

```
workbench.colorCustomizations
```
登录后复制
: 这个是用来调整VSCode UI界面元素的颜色，比如侧边栏、状态栏、活动栏、终端背景色等等。你想让侧边栏变成深紫色？没问题，加一行
```
"sideBar.background": "#330033"
```
登录后复制
就行。这部分主要是视觉上的舒适度调整，和代码高亮本身关系不大，但对整体主题体验至关重要。

editor.tokenColorCustomizations

登录后复制

: 这才是真正动刀子的地方，它决定了代码文件中各种“token”的颜色，比如关键字、字符串、注释、函数名、变量名等等。这是最让人着迷的部分，因为你可以让你的代码看起来完全符合你的审美。

举个例子，我有时候会觉得默认的主题对JavaScript的

const

登录后复制

关键字不够醒目，或者注释的颜色太浅了，这时候我就会这么写：

"editor.tokenColorCustomizations": {
    // 你可以直接写 null 适用于所有主题，或者像这样针对特定主题：
    "[Default Dark+]": {
        "textMateRules": [
            {
                "scope": "storage.type.const", // JavaScript/TypeScript 的 const 关键字
                "settings": {
                    "foreground": "#FF8800", // 橙色，更醒目
                    "fontStyle": "bold" // 加粗
                }
            },
            {
                "scope": "comment.line", // 行注释
                "settings": {
                    "foreground": "#6A9955", // 更深的绿色，提高可读性
                    "fontStyle": "italic" // 斜体
                }
            },
            {
                "scope": "string", // 字符串
                "settings": {
                    "foreground": "#CE9178" // 稍微调整一下字符串的颜色
                }
            },
            {
                "scope": "entity.name.function", // 函数名
                "settings": {
                    "foreground": "#DCDCAA",
                    "fontStyle": "" // 清除可能的斜体或加粗，保持默认
                }
            }
        ]
    }
}

登录后复制

这里面的

scope

登录后复制

是个关键，它定义了你想要修改的是哪一类代码元素。我第一次接触的时候，找这些

scope

登录后复制

花了不少时间，但一旦掌握了，简直是强迫症福音。这其实也引出了一个更深层次的问题：如何知道某个代码片段对应的

scope

登录后复制

是什么？

如何精准定位VSCode中的代码元素进行自定义高亮？

这确实是自定义高亮的核心挑战，也是乐趣所在。VSCode内部通过TextMate语法定义来解析代码，并为每个代码片段分配一个或多个“scope”（作用域）。这些scope就像是代码元素的DNA，决定了它们属于哪一类。

要精准定位，最简单也最有效的方法就是使用VSCode自带的“开发者：检查编辑器令牌和作用域”（

Developer: Inspect Editor Tokens and Scopes

登录后复制

）命令。你可以在命令面板（

Ctrl/Cmd + Shift + P

登录后复制

）里搜索并运行它。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

运行后，当你把光标放到代码的任何一个位置时，一个浮动窗口就会显示出来，告诉你当前光标下这个字符或单词的所有相关scope。比如，你把光标放在一个JavaScript函数的函数名上，它可能会显示

entity.name.function

登录后复制

；如果放在一个字符串上，可能是

string.quoted.double.js

登录后复制

。这些scope通常是层层嵌套的，越具体的scope优先级越高。

举个例子，如果你想修改所有函数的名称颜色，你可以使用

entity.name.function

登录后复制

。但如果你只想修改JavaScript文件中定义的函数名，你可以尝试更具体的

entity.name.function.js

登录后复制

（如果你的主题定义了）。

我的经验是，通常选择最具体的那个scope就行，或者选择一个足够通用但又不至于影响太广的scope。有时候，一个元素可能有好几个scope，比如一个类名可能是

entity.name.type.class

登录后复制

和

source.java

登录后复制

，如果你只写

entity.name.type

登录后复制

，那么所有语言的类名都会受影响。这取决于你想要的效果。花点时间探索这些scope，你会发现一个新世界。

自定义VSCode主题：从零开始构建或基于现有主题扩展

除了在

settings.json

登录后复制

里修修补补，你还可以更进一步，直接创建一个全新的VSCode主题。这听起来有点吓人，但其实也挺有意思的。

基于现有主题扩展： 这是我个人比较推荐的入门方式。你可以选择一个你喜欢的主题作为基础，然后通过

editor.tokenColorCustomizations

登录后复制

和

workbench.colorCustomizations

登录后复制

在你的

settings.json

登录后复制

里进行覆盖。这种方式的优点是，你不用从头开始定义所有颜色，只需要调整你不满意的地方，保持了原有主题的整体协调性。比如，你喜欢

Monokai Pro

登录后复制

的整体风格，但觉得它的注释颜色太亮了，那就在

tokenColorCustomizations

登录后复制

里针对

comment

登录后复制

scope 进行调整，并把

"[Monokai Pro]"

登录后复制

写上。这种局部微调，既高效又能保证主题的整体性。

从零开始构建一个主题： 如果你真的想完全掌控一切，或者想把你的主题分享给其他人，那就需要创建一个VSCode扩展。这涉及到几个步骤：

使用 Yeoman Generator 生成项目骨架： 首先，你需要安装
```
yo
```
登录后复制
和
```
generator-code
```
登录后复制
。
```
npm install -g yo generator-code
```
登录后复制
然后运行
```
yo code
```
登录后复制
，选择 "New Color Theme"。它会引导你填写一些基本信息，比如主题名称、ID等。
编辑主题文件 (
```
.json
```
登录后复制
)：生成的项目里会有一个
```
themes
```
登录后复制
文件夹，里面有个
```
.json
```
登录后复制
文件。这个文件就是你的主题定义核心。它主要包含两个部分：
- ```
colors
```
  登录后复制
  : 定义UI界面元素的颜色，和
```
workbench.colorCustomizations
```
  登录后复制
  里的键值对差不多，但更全面。比如
```
editor.background
```
  登录后复制
  ,
```
editor.foreground
```
  登录后复制
  ,
```
sideBar.background
```
  登录后复制
  等等。
- ```
tokenColors
```
  登录后复制
  : 定义语法高亮的规则，和
```
editor.tokenColorCustomizations
```
  登录后复制
  里的
```
textMateRules
```
  登录后复制
  结构一样。这里你需要为各种
```
scope
```
  登录后复制
  定义
```
foreground
```
  登录后复制
  (前景色)、
```
fontStyle
```
  登录后复制
  (字体样式，如
```
bold
```
  登录后复制
  ,
```
italic
```
  登录后复制
  ,
```
underline
```
  登录后复制
  )。
这部分工作量比较大，因为你需要为几乎所有可能出现的代码元素和UI元素定义颜色。但好处是，一旦完成，你的主题就是独一无二的。我通常会参考一些流行主题的
```
.json
```
登录后复制
文件，看看它们是怎么定义的，然后在此基础上修改。

一个简单的
```
tokenColors
```
登录后复制
示例：
```
"tokenColors": [
    {
        "scope": "comment",
        "settings": {
            "foreground": "#6A9955",
            "fontStyle": "italic"
        }
    },
    {
        "scope": "keyword",
        "settings": {
            "foreground": "#C586C0"
        }
    },
    {
        "scope": "string",
        "settings": {
            "foreground": "#CE9178"
        }
    },
    {
        "scope": "variable.other.property", // 对象属性名
        "settings": {
            "foreground": "#9CDCFE"
        }
    }
]
```
登录后复制
调试和发布： 在VSCode中按
```
F5
```
登录后复制
就可以在新窗口中调试你的主题。满意后，你就可以将它打包并发布到VSCode Marketplace，让全世界的开发者都能使用你的杰作了。