1.首先在vscode的左边栏扩展(快捷键Ctrl+shift+x)中,找到 background 这个插件,就是下图1这个萌妹纸图标的插件:
图1
仙人指路:遇到一些陌生的插件,细读它的细节、功能贡献及更改日志就可以解决绝大多数的问题开始使用。
2.安装这个萌妹纸。
安装完成,右下角会提示你restart vscode,重启即可。
重启之后,右下角会显示下图2这个吓人的警告,这是因为这个插件是通过修改 vscode 的 css 文件的方式运行 所以会在初次安装,或者 vscode 升级的时候,出现这个吓人的警告时点击齿轮设置不再显示即可。
图2
这个时候已经有插件默认的一个背景图片了,但是不够狂炫酷霸吊炸天,不能满足个性化需求。
3.设置自己喜欢的个性化壁纸。
文件---首选项---设置---搜索background
找到扩展中的background插件配置的部分,如下图3:
图3
自己设定背景图
在settings.json中编辑
初始截面如下图4:
图4
在里面加入相应的设置代码:
"background.enabled": true, #是插件是否启用
"background.useDefault": false, #是否使用默认图片,false,我们要设置自己的!
"background.customImages": [
"file:///D:/个人空间/壁纸/1033287.jpg"
], #设置图片路径,你电脑中想要设置为背景的图片的路径。
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"width": "100%",
"height": "100%",
"background-position": "center",
"background-repeat": "no-repeat",
"background-size": "100%,100%",
"opacity": 0.1
}
最后就是background.style了,大家根据自己的喜好设置调试,注意后面的"opacity"是透明度,它的设置决定了背景图片的亮与暗,本文末尾有设置为0.8时的效果对比图。
具体的设置截面效果如下图5
注:这里的图4图5已经有的背景是因为我之前设置过的,如果你没有设置,默认的背景图片这里是纯色的黑色或白色。
图5
4.叉掉文件保存,重启vscode,效果显示见下图6:
图6
当透明度设置为0.8时,透明度效果对比如下图7
图7
漂亮吧,伙计们。
齐活儿收工!
呃,还是要说一下,大家根据喜好来吧,但是也别设置太亮,设置0.1or0.2就行了,影响编程买椟还珠,捡了芝麻,丢了西瓜的事情咱可不干,学习码代码才是王道!
感谢阅读,如果对你有所启发的话就点个赞鼓励一下吧!
版权声明:本文为shadowland_fqy原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。