【Visual Studio Code教程4】VSCode语法的美化

VSCode美化有什么用

为什么别人的VSCode花里胡哨，而你的VSCode却只有一个颜色，非常单调。俗话说：“颜值即是生产力。”那么如何美化我们的VSCode呢？

安装插件

当然，我们想要美化VSCode需要更改settings.json文件，这也需要一个已经编写好的主题，比如插件“Github Theme”“Github Theme Plus”，或者VSCode自带的主题也行，总之，你选择一个主题稍加改造就行了。

开始美化

接下来我们就开始美化吧。（注意，主题配色要在
“editor.tokenColorCustomizations”: {}里写）

简单配置

"comments"：用于修改注释颜色。

"foreground"：用于修改字的颜色
"fontStyle：用于修改字体

"numbers"：用于修改数字颜色

"foreground"：用于修改字的颜色
"fontStyle：用于修改字体

"functions"：用于修改函数颜色

"foreground"：用于修改字的颜色
"fontStyle：用于修改字体

"keywords"：用于修改关键字颜色

"foreground"：用于修改字的颜色
"fontStyle：用于修改字体

"strings"：用于修改字符串颜色

"foreground"：用于修改字的颜色
"fontStyle：用于修改字体

"types"：用于修改类型定义与引用的颜色

"foreground"：用于修改字的颜色
"fontStyle：用于修改字体

"variables"：用于修改函数值颜色

"foreground"：用于修改字的颜色
"fontStyle：用于修改字体

复杂配置

首先呢，先来说一说这个的格式。

{
	"scope": "你要更改的代码的属性",
	"settings": {
		"foreground": "颜色"
	}
}

那么我们要怎么查看代码属性呢？
首先，按F1，调出命令框，然后输入Inspect editor，点击开发人员：检查编辑器标记和作用域，然后将光标切换到你想要查看的代码上，就可以查看到了。

这个圈出来的地方就是代码属性了。
但是有的时候就会出错，所以还是建议看foreground的第一行。
同上面一样，属性也是有两种："foreground"、"fontStyle"

---

示例：

{
    "editor.tokenColorCustomizations": {
        "[GitHub Dark]": {
            "textMateRules": [
                {
                    "scope": "keyword",
                    "settings": {
                        "foreground": "#00ff15",
                    }
                },
                {
                    "scope": "entity.name.namespace",
                    "settings": {
                        "foreground": "#00a6ff"
                    }
                },
                {
                    "scope": "entity.name.function",
                    "settings": {
                        "foreground": "#c547ff"
                    }
                },
                {
                    "scope": "variable.other.readwrite",
                    "settings": {
                        "foreground": "#f2ff00"
                    }
                },
                {
                    "scope": "punctuation.definition.comment",
                    "settings": {
                        "foreground": "#ffffff"
                    }
                },
                {
                    "scope": "comment",
                    "settings": {
                        "foreground": "#c2c2c2"
                    }
                },
                {
                    "scope": "constant",
                    "settings": {
                        "foreground": "#ff7272"
                    }
                },
                {
                    "scope": "string",
                    "settings": {
                        "foreground": "#ff5500"
                    }
                },
                {
                    "scope": "punctuation.definition.string",
                    "settings": {
                        "foreground": "#ffff00"
                    }
                },
                {
                    "scope": "punctuation.terminator",
                    "settings": {
                        "foreground": "#77f1ff"
                    }
                },
                {
                    "scope": "entity.name.type.class",
                    "settings": {
                        "foreground": "#c547ff"
                    }
                }
            ]
        }
    }
}

---

给个三连吧，球球啦！