vs code背景图设置

vs code背景图设置

介绍

• 给 Visual Studio Code 添加背景
  全屏、编辑器、侧边栏、面板、轮播、自定义图片/样式…
• 本插件是通过修改 vscode 的 js 文件的方式运行

延伸阅读

• vs code背景图设置
• vs code为不同项目设置不同的背景图

安装与打开设置

安装

打开设置方式1

打开设置方式2

查看功能设置

示例设置代码

{
	"background.enabled": false, 
	"background.interval": 0,
	"background.customImages": ["file:///C:/Users/Administrator/Pictures/289dd7752a294e7699619ad98cec2ab5.png"],
	"background.style": {
	  "background-position": "right top",
	  "background-size": "auto",
	  "opacity": 0.1
	}
}

详细设置

安装

有两种安装方式：

1. 从 Visual Studio Marketplace 安装。
2. 在 vscode 里搜索 shalldie.background。

自定义

可以通过调整配置（settings.json）来满足个性化需求。

settings.json 是什么 | 怎么打开

全局配置

名称	类型	默认值	描述
background.enabled	Boolean	true	插件是否启用

Editor 编辑器区域配置

通过 background.editor 设置编辑器区域配置。

名称	类型	默认值	描述
useFront	boolean	true	把图片放在代码的上方或下方。
style	object	{}	自定义图片样式。 MDN Reference
styles	object[]	[{},{},{}]	为每一个图片自定义样式。
images	string[]	[]	自定义图片，支持 https 和 file 协议。
interval	number	0	单位 秒，轮播时候图片切换间隔，默认 0 表示不开启。
random	boolean	false	是否随机展示图片。

例子example:

{
  "background.editor": {
    "useFront": true,
    "style": {
      "background-position": "100% 100%",
      "background-size": "auto",
      "opacity": 0.6
    },
    "styles": [{}, {}, {}],
    // 本地图片可以拖到浏览器中，快速从地址栏得到file协议的地址
    "images": ["https://pathtoimage.png", "file:///path/to/local/file"],
    "interval": 10,
    "random": false
  }
}

全屏、侧边栏、面板 区域配置

通过 background.fullscreen、background.sidebar、background.panel 来进行这些区域的配置。

名称	类型	默认值	描述
images	string[]	[]	自定义图片，支持 https 和 file 协议。
opacity	number	0.1	透明度，等同 css opacity，建议 0.1 ~ 0.3。
size	string	cover	等同 css background-size, 建议使用 cover 来自适应。
position	string	center	等同 css background-position， 默认值 center。
interval	number	0	单位 秒，轮播时候图片切换间隔，默认 0 表示不开启。
random	boolean	false	是否随机展示图片。

例子example:

{
  "background.fullscreen": {
    // 本地图片可以拖到浏览器中，快速从地址栏得到file协议的地址
    "images": ["https://pathtoimage.png", "file:///path/to/local/file"],
    "opacity": 0.1,
    "size": "cover",
    "position": "center",
    "interval": 0,
    "random": false
  },
  // `sidebar`、`panel` 的配置与 `fullscreen` 一致
  "background.sidebar": {},
  "background.panel": {}
}

快捷命令

点击状态栏右下角「Background」按钮，可以快速弹出 background 所有命令：

图片地址怎么获取

图片地址支持类型网址和file协议

["https://pathtoimage.png", "file:///path/to/local/file"]

本地图片可以拖到浏览器中，快速从地址栏得到file协议的地址