[美化你的VS Code]VS Code的背景设置

相信对于很多初学者来说编辑代码是很无聊的,这里提供了设置VS Code背景的方法,希望能让初学者“敲代码”的过程有趣一些。

  1. 打开VS Code,在界面左侧找到并点击红框框出的符号。或者使用快捷键Ctrl+Shift+X。
    左侧
  2. 弹出搜索界面,搜索 background
    [美化你的VS Code]VS Code的背景设置_第1张图片
  3. 点击搜索到的第一个拓展,出现的界面会如下图所示,点击下载。(由于作者已经下载过了,所以图片展示时是“禁用”和“卸载”)[美化你的VS Code]VS Code的背景设置_第2张图片
  4. 打开 settings.json 文件

具体打开方式如下:
在键盘上按快捷键Ctrl+Shift+P,会在界面上方弹出如下输入框。输入settings.json
在这里插入图片描述
如下图,输入完毕后选择 [首选项:打开设置(json)]
//注意 如果没下中文拓展,选择英文Preferences:Open Settings(JSON)
[美化你的VS Code]VS Code的背景设置_第3张图片

  1. 将如下代码复制进去

强调:要注意本页面有没有大括号{}!如果没有自己补一个,下面的代码都要写到大括号里
注意:本页是通过代码实现对VS Code的设置,其他方面的用户设置也要写入这个页面。所以尽量做好备注,方便未来你对VS Code进行其他的设置。(若代码第一行出错看看是不是之前的代码最后一句没加逗号)

//*******************************************背景设置
    "background.enabled": true,  //是否启用
    "background.useDefault": false,  //是否使用默认图片—false
    "background.customImages": [    //路径数组
        "file:///D:/background.png"   //背景图片路径
        "file:///D:/background2.png"   //拆分编辑器时的不同背景
    ],
        "background.style": {  
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "9999",
        "width": "100%",
        "height": "100%",
        "background-position": "center",
        "background-repeat": "no-repeat",
        "background-size": "cover",
        "opacity": 0.26   //调整透明度,可以自行设置。取值范围0-1。
    },
    //*******************************************背景设置

代码说明:
1.背景图片路径需要自己写,在电脑上找到自己的图片的路径后将路径复制上去即可。注意前面不要忘了加file:///并且每一级的路径分割用的是左斜线‘/’而不是右斜线‘\’。
2.路径可以写多个,这样在拆分编辑器时每一个编辑器就会有一个不同的背景。

  1. 重启VS Code。恭喜你!背景设置好啦!

下面是作者的VS Code展示:

————————————
补充:改完背景后VS Code顶部可能会有[不受支持]的字样出现,不过这个没有影响,无视就好。
如果实在忍受不了的话:
解决方案1:卸载掉background。
解决方案2:
像安装插件background一样,搜索并安装Fix VsCode Checksums插件。
[美化你的VS Code]VS Code的背景设置_第4张图片
下载并启用该插件后,在键盘上按快捷键Ctrl+Shift+P,输入或选择Fix Checksums:Apply
在这里插入图片描述
然后重启VS Code。
——————————————————

完。
人生如逆旅,我亦是行人。

你可能感兴趣的:(VS,Code)