对着编辑器敲久了，看着编辑器总是一种颜色，有点厌烦，这时我们可以自己定义背景颜色或者背景样式，要就要花里胡哨，当然是将自己喜欢的图片设置为背景图片才舒服

背景图片设置

• 打开编辑器左侧的扩展，搜索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