VS Code自定义代码颜色，看这一篇就够了

创作时间:

作者:

@小白创作中心

VS Code自定义代码颜色，看这一篇就够了

引用

CSDN

https://blog.csdn.net/NEKOic/article/details/118855221

VS Code是一款功能强大的开发工具，其自定义空间非常大，允许用户通过插件实现各种功能。然而，对于代码主题的个性化需求，仅仅依靠现成的主题插件往往难以完全满足。本文将详细介绍如何通过编辑setting.json文件来自定义VS Code的主题颜色，帮助你打造独一无二的开发环境。

开始之前需要了解的地方

VS Code除默认设置之外，其他几乎所有需要自定义的设置，都可以通过编辑setting.json文件来完成，自定义主题也是这样。打开setting.json文件的方法为：点击【界面左下角设置按钮】→点击【设置】然后在右上角关闭按钮附近找到如下图标，点击就可以打开setting.json文件，剩下的操作都在里面完成。

另外，我们自定义主题一般是基于默认主题进行一些修改，就是默认主题哪里不符合你的喜好，就修改哪里。完全打造一个新的主题需要设置的地方太多了，也不太现实。那么接下来就开始设置。

设置步骤

一、添加字体设置代码块

打开你的setting.json文件，不要管里面有什么，在最外层的大括号里面输入

"editor.tokenColorCustomizations":{}

输入过程会有代码提示，直接选择提示会自动帮你填好。不要忘记在上一个代码块结尾加一个英文逗号，不然会报错。鼠标指向此代码，会给出提示，可以看到这个代码块是用来修改主题编辑器语法颜色的。

二、找到当前使用的主题

前面提到，修改颜色其实是在原有主题上进行针对性修改，接下来的操作则是针对你当前使用的主题进行操作。默认的黑色主题是【深色+ Default Dark+】如果你不知道自己用的哪个主题，就在【设置】里搜索【主题】，在【Workbench: Color Theme】一栏查看当前主题。

三、针对该主题进行修改

回到setting.json文件，在字体设置代码块（就是刚才写的代码后面的大括号里）内输入英文引号，以我的默认深色主题为例，在给出的代码提示里选择【Default Dark+】。

在【Default Dark+】后面的大括号里继续输入英文引号，把给出的提示都选择一遍，同样要注意每一个语句后面要加逗号，如下图所示。

把鼠标移动到每个代码上，会有提示告诉你这一行是设置哪一部分的颜色。鼠标指向后面的颜色代码，会弹出一个颜色选择器，根据需要选择自己喜欢的颜色即可。

我这里遇到了一个bug，就是不管你鼠标指向哪个颜色设置，修改的都是第一行【comments】处的颜色，无奈之下我将颜色设置的代码全部都注释掉，然后一行一行取消注释再修改才解决问题。

这里我再写一下每行的对应的区域

“comments”:注释颜色
“functions”:函数/方法定义与引用颜色
“keywords”:关键字颜色，如new, if, else, try等
“numbers”:数字的颜色
“strings”:字符串的颜色
“types”:类型定义与引用的颜色
“variables”:变量的颜色
“textMateRules”:其他具体的颜色设置

这里的【textMateRules】放到后面说。

textMateRules代码块的编辑

这里先放一下我的设置，我后面根据这个解释

"textMateRules": [
    {
        "scope": "keyword.control",//if ,else, try 等控制符
        "settings": {
            "foreground": "#C586C0"
        }
    },
    {
        "scope": "keyword.operator",//算数符
        "settings": {
            "foreground": "#f07d3b"
        }
    },
    {
        "scope": "storage.modifier",//修饰语
        "settings": {
            "foreground": "#f09090"
        }
    },
    {
        "scope": "entity.name.type.class",//类名
        "settings": {
            "foreground": "#c0526a"
        }
    },
    {
        "scope": "storage.type.primitive.java",//int和其他啥啥，忘记了
        "settings": {
            "foreground": "#c0526a"
        }
    },
    {
        "scope": "entity.name.type.interface",//接口
        "settings": {
            "foreground": "#c0526a"
        }
    },
    {
        "scope": "entity.name.namespace",//导入部分
        "settings": {
            "foreground": "#74817c"
        }
    },
    {
        "scope": "entity.name.tag",//html标签
        "settings": {
            "foreground": "#d35c5c"
        }
    }
]

这里的每一块代表一个具体的代码颜色设置，具体的意思是颜色设置的应用范围比较精确。

代码中的"scope"表示下面"settings"的应用范围，上面代码中用到的我已经标了注释，需要修改的话直接搬过去就好。

如果里面没有你要找的部分，你可以打开你的项目代码页面，按【F1】，搜索【developer:inspect editor tokens and scopes】打开标记作用域查看器，之后点击代码中你要修改颜色的地方，查看【foreground】处的作用域，复制下来粘贴到【settings.json】"scope"后的引号里，就可以把颜色设置应用到对应位置。