更换Visual Studio Code背景图

你是否有过这样的经历:当你兴致勃勃的打开Visual Studio Code,正准备键来,但是VScode的黑色背景看得又不是很喜欢,看着黑色的背景不禁陷入沉思。这黑乎乎的到底是什么。
这个问题的解决方法很简单,打开VScode文件-首选项-颜色主题换一个不是黑色的就行了,本文结束。

 

 

安装background插件

首先Ctrl+Shift+X呼出拓展,搜索框中输入 background 搜索,安装这个。商店网址

[caption id="" align="alignnone" width="661"] 本插件是通过修改 vscode 的 css 文件的方式运行 所以会在初次安装,或者 vscode 升级的时候,出现以下提示,请选择 【不再提示】[/caption]

 

安装完成后,关闭vscode,使用管理员权限运行

 

插件设置

打开文件-首选项-设置 修改

输入,代码来源:【VSCode插件】background添加编辑器背景

// 是否开启背景图显示
"background.enabled": true,
// true-显示默认的图片  false-显示用户自定义的图片
"background.useDefault": false,
// 自定义显示的图片,【路径要用双引号】
"background.customImages": [
    // 最多设置三张图片,默认显示最上方的图片,当打开多个侧边栏时再依次显示后面的背景图片
    "D:/UserData/My Documents/My Pictures/man.jpg",
    "D:/UserData/My Documents/My Pictures/geek2.jpg",
    "D:/UserData/My Documents/My Pictures/jizhi.jpg",
],
"background.useFront": false,
// 默认透明度是100%,看起来生硬,不够炫酷
"background.style":{
    // 编辑器显示文字,默认在左上角
    "content":"'HELLO WORLD'",
    "pointer-events":"none",
    // 以下都是CSS显示样式设置
    "position":"absolute",
    "top":"0",
    "right":"0",
    "width":"100%",
    "height":"100%",
    "z-index":"99999",
    "background.repeat":"no-repeat",
    "background-size":"contain",
    // 设置透明度
    "opacity":0.1
}

保存并重新启动,效果如图:

 

卸载方法

根据描述
插件在删除的时候,会自动删除添加的样式(依赖node环境)。
如果没有node环境,需要在 settings.json 中设置 {"background.enabled": false} ,然后再删除插件。如果直接删除插件会有遗留,就需要重装vscode了。
 

 

第二种方法:background-cover

商店地址

1:右键管理员身份运行vscode
2:商店搜索下载 background-cover 插件

3:ctrl+shift+p,输入backgroundCover - start命令 4:然后可以选择背景图片和设置透明度

效果如图

 

卸载

根据描述
如果卸载扩展后图片背景还在?这个不是bug,请手动关闭再打开一次vscode会自动执行最后的清理操作,然后重启即可。
Is the picture still there after uninstalling the extension? Please turn off manually and open vscode again, which will automatically perform the final cleaning operation and restart.