VSCode怎么更换代码颜色

VSCode能够帮助很多有代码编写工作需求的小伙伴们快速的完成他们的工作 , 为他们提升大量的工作效率 , 是一款非常热门的代码编辑器软件 , 不过在使用过程中 , 小编收到一些小伙伴的提问 , 说如何编辑器中修改代码的配色 , 这样可以使整段代码看起来更清晰直观 , 小编搜集了一下网上的资料 , 为大家带来了以下这篇文章解读这个问题 。

VSCode怎么更换代码颜色


VSCode代码配色更换步骤一览首先 , 你要做的 , 就是知道你想要修改的代码 , 是属于什么基本类型 。你可以将光标移动到某段你想要修改颜色的代码上 , 比如将光标移动到一段字符串上 ,
VSCode怎么更换代码颜色


然后 , 在命令面板里运行 “检查TM作用域”(Inspect TM Scopes)命令 。
VSCode怎么更换代码颜色


此时 , 编辑器中出现一个新的悬浮窗 。这个窗口里呈现的 , 就是当前这个代码片段所对应的语言、语法类型以及当前的颜色和背景色等 。
VSCode怎么更换代码颜色


比如在上图里 , 这个窗口呈现了以下信息:
当前的 token 是 hello , 它的类型是 String;
它的颜色是 #ce9178ff , 背景色是 #1e1e1eff;
它所属的语法作用域由内而外分别是 string.quoted.double.js , meta.var.expr.js , source.js 。
如果你想要将所有字符串都变成红色 , 那么就需要修改String这个作用域的颜色 。下面 , 你可以再次打开个人设置(JSON) , 输入 editor.tokenColorCustomizations;
VSCode怎么更换代码颜色


然后把光标放入这个 JSON 对象中 , 按下 “CtrlSpace” 触发建议列表 , 就能够看到如下的建议 。
VSCode怎么更换代码颜色


建议列表中首先出现的 , 就是你可以在 VS Code 中使用的所有的主题的名字 。通过选择它们 , 你可以只覆盖某个主题中的某个颜色 。这里你可以滚动这个列表 , 看看下面还有别的什么建议 。
VSCode怎么更换代码颜色


你可以看到如下几个选项:
comments 代表着注释的颜色;
functions 代表着函数的寒色;
keywords 代表着关键字的颜色;
numbers 代表着数字的颜色;
strings 代表着字符串的颜色;
types 代表着类型的颜色;
variables 代表着变量的颜色;
textMateRules 我下面会再介绍 。
为了修改字符串的颜色 , 你只需选择 strings 即可 , 然后将其修改为红色 , 也就是:
"editor.tokenColorCustomizations": { "strings": "#FF0000", }
保存设置后 , 你再回到刚才的 JavaScript 文件时 , 就可以看到字符串颜色都变了 。
VSCode怎么更换代码颜色


TextMate 规则修改
在上面的建议列表里 , 还有个 textMateRules选项 , 这个属性是做什么用的呢?让我们再来看下刚才在 JavaScript 文件里运行 “Inspect TM Scopes” 看到的信息 。
VSCode怎么更换代码颜色


在这个窗口的最下方 , 就是 TextMate 的语法规则作用域了 。hello 这个词所处的 TextMate 语法作用域由内而外分别是 string.quoted.double.js , meta.var.expr.js , source.js 。VS Code 的主题插件在配置编辑器内代码的颜色时 , 就是针对这些作用域进行设置的 。而你要修改某个作用域所对应的颜色 , 就是在设置中修改 textMateRules。

推荐阅读