安装

有两种安装方式：

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[]	[]	自定义图片，支持在线和本地图片，以及文件夹。
interval	number	0	单位 秒，轮播时候图片切换间隔，默认 0 表示不开启。
random	boolean	false	是否随机展示图片。

example:

{
  "background.editor": {
    "useFront": true,
    "style": {
      "background-position": "100% 100%",
      "background-size": "auto",
      "opacity": 0.6
    },
    "styles": [],
    // `images` 支持在线和本地图片，以及文件夹。
    "images": [
      // 在线图片，只允许 `https` 协议
      "https://hostname/online.jpg",
      // 本地图片
      "file:///local/path/img.jpeg",
      "/home/xie/downloads/img.gif",
      "C:/Users/xie/img.bmp",
      "D:\\downloads\\images\\img.webp",
      // 本地路径支持 `~` 和环境变量
      "~/Pictures/img.png",
      "${HOME}/Pictures/img.png",
      // 文件夹
      "/home/xie/images",
      // data URL
      "data:image/*;base64,<base64-data>"
    ],
    "interval": 0,
    "random": false
  }
}

全屏、侧边栏、辅助栏(auxiliarybar)、面板 区域配置

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

名称	类型	默认值	描述
images	string[]	[]	自定义图片，支持在线和本地图片，以及文件夹。
opacity	number	0.1	透明度，等同 css opacity，建议 0.1 ~ 0.3。
size	string	cover	等同 css background-size, 建议使用 cover 来自适应。
position	string	center	等同 css background-position， 默认值 center。
styles	object[]	[]	为每一张图片单独自定义样式。
interval	number	0	单位 秒，轮播时候图片切换间隔，默认 0 表示不开启。
random	boolean	false	是否随机展示图片。

example:

{
  "background.fullscreen": {
    // `images` 支持在线和本地图片，以及文件夹。
    "images": [
      // 在线图片，只允许 `https` 协议
      "https://hostname/online.jpg",
      // 本地图片
      "file:///local/path/img.jpeg",
      "/home/xie/downloads/img.gif",
      "C:/Users/xie/img.bmp",
      "D:\\downloads\\images\\img.webp",
      // 本地路径支持 `~` 和环境变量
      "~/Pictures/img.png",
      "${HOME}/Pictures/img.png",
      // 文件夹
      "/home/xie/images",
      // data URL
      "data:image/*;base64,<base64-data>"
    ],
    "opacity": 0.1,
    "size": "cover",
    "position": "center",
    "styles": [],
    "interval": 0,
    "random": false
  },
  // `sidebar`、`panel` 的配置与 `fullscreen` 一致
  "background.sidebar": {},
  "background.panel": {}
}

快捷命令

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

常见问题

本插件是通过修改 vscode 的 html 文件的方式运行

如果遇到问题请查看 常见问题

卸载

请查看 常见问题#如何删除插件

感谢这些朋友的 pr 🙏

贡献指南

这里是 贡献指南。

更新日志

可以从 这里 查看所有的变更内容。

分享图片

我们在 这里 分享背景图。

从 v1 迁移

从 v3.0 起，v1 顶层配置不再被支持，请参考 migration-from-v1.md 进行迁移。

协议

MIT