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

九路 等级 739 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背景图

自我感觉良好,哈哈哈 😁

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

相关推荐

Mac安装Golang和vscode
Mac第一次安装golang和vscode一起使用,遇到了不少的坑,下面介绍一下正确的安装方式。 1、使用brew安装Golang 如果不知道brew是什么,或怎么安装请看这里 brew官网(https://brew.sh/index_zhcn) brew install golang 安装完成后可以使用
flutter -- dart基础之dart简介和安装
Dart介绍: Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用 和物联网等领域的开发。 Dart诞生于2011年,号称要取代JavaScript。但是过去的几年中一直不温不火。直到Flutter的出现现在被人们重新重视。 要学Flutter的话我们必须首先得会Dart。 da
【vscode折腾系列】更换vscode背景图
写前端代码时,用过webstorm,sublime,vscode,最终还是选择了vscode,主要原因是(好看)简洁的编程环境,丰富的插件功能,活跃的社区。不过无论是哪一个编辑器,长时间看着黑色/白色的背景难免单调,喜欢折腾(不专心写代码)的我开始想着给vscode换个背景,百度了一下,还真有人写了这样的一个插件background。     闲话少叙
安装vscode后电脑启动黑屏问题和vscode命令行无法输入
这个问题困然我好久,网上各种答案都是试了一遍,虽然暂时能用,但是vscode中的命令行无法输入一直就是我内心的痛,今天终于找到了 当我启动后发现出现黑屏,按照说法就是勾选兼容模式 (https://imghelloworld.osscnbeijing.aliyuncs.com/8ba961f252e0d5fface5234e51a6216
Dart教程(一):dart安装
一、安装dart sdk brew tap dartlang/dart brew install dart 二、安装VSCode 去官网下载即可 三、安装dart插件 (https://imghelloworld.osscnbeijing.aliyuncs.com/af7d1de25caf6599a4839b56f4f0d
VSCode 插件之 ESLint
vscodeeslint github.com/microsoft/v…(https://github.com/microsoft/vscodeeslint) 为了区分 npm ESLint 包和 VSCode 的 ESLint 插件,我把前者称为 npm ESLint,后者称为 vscodeeslint。 vscodeeslint 优先
使用 VS Code 来开发和调试 Python 程序
(简称 VSCode)是微软出品的一款支持多种语言的免费 IDE(集成开发环境)。VSCode 轻量而强大,支持 Windows、macOS 和 Linux。内置支持 JavaScript、TypeScript 和 Node.js,并且拥有一个丰富的插件生态系统来支持其它语言(C/C、C、Java、Python、PHP、Go 等)和运行时(.Net 和
写个单链表,VS里面可以运行的代码,VScode居然不能运行?指针原因?
一、出现的问题事情是这样的,当时很着急,写个单链表出来,在VS里面写过一次,在VScode里面也写过一次,老师写的代码有一些罗嗦,于是我思考用自己的的代码风格来写一遍。啪的一下,很快啊!问题出现了!VS里面可以运行的代码,到了VSocde里就不能运行了!这是为什么!cpp这是List.cpp中相关代码bool List::insertByTail(Node
在vscode中go编码发生的问题整理
关于我 引言使用VsCode进行Go程序开发,我们肯定会碰到一些问题,这些问题有些是IDE的配置问题,有些是下载包的版本不一致问题,本文主要针对在开发过程中碰到的问题做一个简单的回顾和整理。 前期准备,必看在进行问题纠错前,先确保自己正确下载了golang的官方工具集gotool,如果不确定,就跟着我的步骤操作一遍,可能操作后,你的问题就解决了。1、配置go
Vscode个性化设置:让一个小萌妹陪你敲代码
前言大家平时都用什么代码编辑器啊!我个人比较喜欢用vscode,因为有以下几点: 开源,免费; 自定义配置 集成git 智能提示强大 支持各种文件格式(html/jade/css/less/sass/xml) 调试功能强大 各种方便的快捷键 强大的插件扩展 对前端这么友好
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
electron:桌面应用程序的革命
“ 你也许不了解electron,但你应该了解或使用过atom、vscode、xmin zend,没错他们所使用的开发技术就是electon,通过前端技术开发桌面应用程序,刚开始接触electron时,考虑最多的是性能问题,不过作为一个vscode、xmin zen重度使用者的我来说,基本上对其性能的担心减少了很多,并且发现了基于vue框架构造electro
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
vscode+vue简单安装教程
1、安装vscode、node.js。2、打开vscode终端,全局安装vuecli:npm install g vuecli用于构建项目。3、继续安装webpack(打包工具):npm install g webpack。4、安装完成创建一个文件夹用于存放项目,比如myvue,cd到该文件夹,使用项目创建命令:vue init webpack myvue。
一行代码将Python程序转换为图形界面应用
Gooey项目支持用一行代码将(几乎)任何Python 2或3控制台程序转换为GUI应用程序。1.快速开始开始之前,你要确保Python和pip已经成功安装在电脑上,如果没有,可以访问这篇文章: 进行安装。如果你用Python的目的是数据分析,可以直接安装Anaconda:,它内置了Python和pip.此外,推荐大家用VSCode编辑器,它有许多的优点:。