VSCode自定义代码配色方案：提升代码可读性的实用指南
VSCode自定义代码配色方案：提升代码可读性的实用指南
VSCode的自定义代码配色功能可以让你根据个人喜好和需求，为代码的不同语义元素（如类名、函数名、关键字、变量等）设置不同的颜色，从而提升代码的可读性和开发效率。本文将详细介绍如何通过编辑settings.json文件来自定义代码配色方案，包括粗粒度和细粒度的配色设置方法，以及如何获取代码元素的token名称。
简而言之，自定义代码配色就是给代码的不同语义（类名、函数名、关键字、变量等）设置不同的颜色，使得代码的可读性变强。
虽然很多主题已经给出了定制好的配色方案，但这些方案往往区分得不够细致。例如，大多数主题都没有区分函数临时变量、类成员变量、类静态变量等。如果能够通过颜色区分这些变量类型，可以有效减少低级错误的发生概率。
下面是详细的配色方法：
打开settings.json文件，可以在当前项目目录的
.vscode文件夹中找到本目录的settings.json文件，也可以通过快捷键Ctrl+Shift+P，搜索settings，选择首选项：打开用户设置(JSON)来打开全局的settings.json文件（通常路径为C:/Users/[此电脑用户名]/AppData/Roaming/Code/User/settings.json）。在json文件中添加与下面类似的配置：
{
"editor.tokenColorCustomizations": { // 自定义编辑器的token颜色设置
"[Ayu Mirage Bordered]": { // 在某个主题的基础上修改，这里以Ayu主题为例
"comments": { // 注释
"fontStyle": ""
},
"types": {
"fontStyle": "bold",
"foreground": "#2791ed"
}, // 类型（类名、枚举名等）名
"keywords": "#bac520", // 关键字
"strings": { // 字符串
"foreground": "#8bbd5a"
},
"functions": "#beec4f", // 函数名
"textMateRules": [ // 这里是自定义一些规则
{
"scope": "keyword.control", // if, else, try 等控制符
"settings": {
"foreground": "#3da369"
}
},
{
"scope": "variable.other.property", // 类的属性（成员变量）
"settings": {
"foreground": "#5fa4da"
}
},
{
"scope": "string.regexp", // 字符串的正则表达式部分
"settings": {
"foreground": "#7bb4e0"
}
}
]
}
}
}
其中"comment", "type", "keyword"都是很粗粒度的token定义，而textMateRules部分则是更详细的细粒度token定义。例如keyword.control表示控制相关的关键字，variable.other.property表示类中的属性变量名。
那么重点来了，如何获取这些规则的名称(token)呢？例如枚举中的枚举常量，如何知道它的token名称呢？
按照官网的方法，我们需要先绑定一个快捷键，这个快捷键是为了找到代码中某个token对应的名字。使用Ctrl+Shift+P，搜索keyboard，选择首选项：打开键盘快捷方式，搜索inspectTMScopes，设置下面这个快捷键（建议设置为Ctrl+Shift+I）。
将鼠标放在代码的某个token上，按下快捷键，就能获取这个token的名字了。然后在settings.json中的textMateRules部分进行设置就行了！
如果你对颜色选择感到困惑，也可以参考我上面配置好的方案。