对着编辑器敲久了，看着编辑器总是一种颜色，有点厌烦，这时我们可以自己定义背景颜色或者背景样式，要就要花里胡哨，当然是将自己喜欢的图片设置为背景图片才舒服
背景图片设置
-
打开编辑器左侧的扩展，搜索background-cover插件，点击下载，然后以管理员的身份重新打开vscode
plugin.PNG -
重新打开vscode之后右下角就有一个切换背景图的按钮，点击
click.PNG -
在弹出的对话框中，先选择背景图片，然后再根据自己的喜好设置透明度（0-1之间）
setting.PNG
这个图片是可以覆盖整个编辑器的视口的，也没有插件logo，给我们的体验还是不错的
-
设置完图片之后，编辑器就会马上弹出一个code损坏的提示
code.PNG
不用担心，插件给的提示是：这个扩展通过编辑vscode的css文件来工作。因此，在第一次安装或更新vscode时会出现一条信息。您可以单击[不再显示]来避免它。
如果不行，我们还可以通过插件来解决，在扩展中搜索“Fix VSCode Checksums”，下载，然后我们点击ctrl+shift+p,点击Fix Checksums： Apply，在重启vscode就可以解决了，(个人觉得这种方法比较好，以防后面出现不必要的麻烦)
fix.PNG
代码颜色设置
设置好我们喜欢的背景图片之后，又有一个问题，背景图片的颜色和我们的代码颜色接近，这样不利于平时的程序编写
- 我们可以通过编辑器自带的主题修改（不赘述）
- 另外我们可以自己控制代码以及编辑器其他颜色的设置
首先打开设置（ctrl+,）,找到Code Actions On Save，或者直接在顶部搜索，点击在settings.json中编辑
edit.PNG
将以下代码粘贴到该文件最外层大括号里面的最下面,粘贴前先看一下上一行代码的结尾有无逗号分割，没有的话要补上一个英文的逗号，否则报错，然后根据自己的喜好配置就行啦。嗯提一嘴，颜色代码可以用英文的，也能用rgb（a），十六进制的，或者鼠标放在颜色代码上，应该会弹出让你选择颜色的选择器（我不确定这是否是我安装了什么插件才会显示的）
"workbench.colorCustomizations": { //覆盖当前所选颜色主题的颜色
"editor.background": "#1b1b19", //编辑器背景色
"editor.selectionBackground": "#5a5f21", //用户选中代码段的颜色
"editor.findMatchBackground": "#ff0000", //当前搜索匹配的颜色
"editor.findMatchHighlightBackground": "#fa0a01", //其他搜索匹配项的颜色
"editor.findRangeHighlightBackground": "#ff9900", //限制搜索范围的颜色
"editor.lineHighlightBackground": "#3a2f2f", //光标所在行高亮内容的背景颜色
"editor.lineHighlightBorder": "#f33f3f" //光标所在行四周边框的背景颜色
},
"editor.tokenColorCustomizations": {
"comments": "#a2a7a4", // 注释
"keywords": "#cff10a", // 关键字
"variables": "#06ee19", // 变量名
"strings": "#07ffd6", // 字符串
"functions": "#f5b607", // 函数名
"numbers": "#7f3cfa" // 数字
},
主要注意的两个地方
attention.PNG
好了，ok
