【vscode折腾系列】更换vscode背景图

九路 等级 1598 0 0
写前端代码时,用过webstorm,sublime,vscode,最终还是选择了vscode,主要原因是(~好看~)简洁的编程环境,丰富的插件功能,活跃的社区。不过无论是哪一个编辑器,长时间看着黑色/白色的背景难免单调,喜欢折腾(~不专心写代码~)的我开始想着给vscode换个背景,百度了一下,还真有人写了这样的一个插件--background。

闲话少叙,开搞。

1.安装并正常工作

这一步很简单,直接在拓展界面搜background就行。

【vscode折腾系列】更换vscode背景图

就是图上这个了

安装完成后,重启vscode,进入User Settings用户设置,在搜索框中打background,应该就能看到这样的设置了。

【vscode折腾系列】更换vscode背景图

以上就是background插件的全部自定义设置了

一般来说,这时候插件就正常工作了。效果如下:

【vscode折腾系列】更换vscode背景图

抱歉,这里偷懒直接了别人的图

没正常工作的关掉vscode,右键以管理员身份运行。这个在作者的插件说明里也有。

实际上vscode的内核是chromium,chrome的先行版。因此vscode里面的显示实际上是网页的模式。因此可以从这里出发来给vscode加背景。实际上background是通过修改vscode的css文件来运行的,所以要当设置变动要管理员身份运行才有效果。

2.选自己的图片

这个也许是最难的,毕竟每个的审美不一样。这里笔者用的是这一张。

【vscode折腾系列】更换vscode背景图

不要吐槽笔者的审美。。。

实际上即使给vscode加了背景,vscode也是用来编程的,还是推荐大家使用简单一点的图片,不然容易看不清代码 😒。

找好后。进行如下修改:

"background.useDefault": false //是否使用默认图片,改成false,不默认,我们要设置自己的!

"background.customImages": ["file:///D:example/../example.jpg"] //设置自己的图片位置。

最后就是background.style了,大家看着设置就好了,这里是CSS语法。基本不用改。可能需要设置的是 "opacity": 1 //透明度。

附上笔者的效果图:

【vscode折腾系列】更换vscode背景图

自我感觉良好,哈哈哈 😁

自此大功告成,可以安心(欣赏壁纸)写代码了。
收藏
评论区

相关推荐

【vscode折腾系列】更换vscode背景图
写前端代码时,用过webstorm,sublime,vscode,最终还是选择了vscode,主要原因是(好看)简洁的编程环境,丰富的插件功能,活跃的社区。不过无论是哪一个编辑器,长时间看着黑色/白色的背景难免单调,喜欢折腾(不专心写代码)的我开始想着给vscode换个背景,百度了一下,还真有人写了这样的一个插件background。     闲话少叙
VS Code 扩展巡礼
本篇文章中介绍的扩展是 vscode-phpcs,用于项目开发中 PHP 代码的编码规范。 Github 库地址 vscode-phpcs\[1\].,使用这个扩展依赖于一个前置条件,系统需要安装 PHP\_CodeSniffer\[2\] ![](https://oscimg.oschina.net/oscnet/4db4095a-fc53-4e82-
VSCode 现内存泄漏 BUG,官方处理方式引社区不满
点击“ 开发者技术前线 ”,选择“星标🔝” 让一部分开发者看到未来 --------------- 近日,有开发者提交了一个 VSCode 内存泄露的 issues,该问题导致在某些情况下使用 VSCode 会使内存使用率攀升。令人意外的是,VSCode 官方却表示不打算解决此问题,由此在社区引发了争议。 今年十月,有一名开发者发现了 VSCod
VSCode 配置 Python 开发环境
### 一、环境准备 首先需要先安装好 Python 和 VSCode, 下载地址如下 * [VSCode](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fcode.visualstudio.com%2F) * [Python](https://www.oschina.net/
VSCode 首次打开提示“Git installation not found.”解决方案
**VSCode 首次打开提示“Git installation not found.”解决方案** 参考文章: [(1)VSCode 首次打开提示“Git installation not found.”解决方案](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.codeprj
Visual Studio Code (vscode) 配置 Java 环境
Visual Studio Code (vscode) 配置 Java 环境  ---------------------------------------   最近在学习使用Java,同时使用VSCode也很久了,就想用vscode配置一下开发环境,下面我们开始吧~~~ ### ✍✍✍ 主要步骤:   ➤ 下载安装配置java   ➤ 配置jav
vscode 使用 clang 格式化 c++代码
原文链接: [vscode 使用 clang 格式化 c++代码](https://my.oschina.net/ahaoboy/blog/4497479) 需要ubuntu  安装 clang vscode 安装 clang-format 插件和 clangd插件 sudo apt-get update sudo apt-g
vscode代码统计——Vscode counter
1.安装插件 ------ 在vscode界面左侧,点击图中所示的菜单项,搜索Vscode counter ![](https://oscimg.oschina.net/oscnet/c5a34d49a226257509cd8f30b993cdf43ef.png) 2.使用插件统计代码 ---------- ### 2.1.点击顶部 View 菜单
vscode全局搜索不了
### 背景 ##### 今天同事用新电脑 然后找我要vscode 的配置文件。我用QQ发给他,然后他的vscode全局搜索不了。 ![这里写图片描述](https://oscimg.oschina.net/oscnet/up-1d80aae81623d045e45d1298d8335497.png) ### 解决 参考 [https://githu
vscode安装go所有插件(全网最全)
#### 1.vscode安装go所有插件 vscode版本:1.51.0 go版本:version go1.15.2 windows/amd64 git客户端版本:Git-2.29.2.2-64-bit #### 2.使用vscode自动安装 1. 需要提前安装go、vscode、git客户端,配置git环境,配置go环境,GOPATH这个环境
vscode的eslint插件不起作用
最近在用vue进行开发,但是vsCode中的eslint插件装上之后不起作用 1.vsCode打开“设置”,选择"settings.json" ![](https://img2018.cnblogs.com/blog/921637/201905/921637-20190516165707540-1304630667.png) 2.输入一段脚本
vscode远程调试nodejs
1.开启远程调试 在服务器终端中输入 node --inspect=0.0.0.0:9229 rundebug.js Debugger listening on ws://0.0.0.0:9229/670e55ef-6d1f-444f-9178-674d4c639565 For help, see: https://nodejs.org/en
ubuntu中使用VsCode+Eigen创建Eiegn应用程序
Visual studio code是微软发布的一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。 1\. VsCode安装 ============ VScode官网下载.deb文件,网址链接如下:[https://code.visualstudio.com/#alt-downlo
Aliyun Serverless VSCode Extension v1.10.0 发布
[Aliyun Serverless VSCode Extension](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fyq.aliyun.com%2Fgo%2FarticleRenderRedirect%3Furl%3Dhttps%253A%252F%252Fgithub.com%252
Aliyun Serverless VSCode Extension 上架并开源
Aliyun Serverless VSCode Extension ================================== [Aliyun Serverless VSCode Extension](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fyq.aliyun.com%