README.zh-CN.md

English | 中文 | 日本語 | Portugues

vscode-background

给 Visual Studio Code 添加背景

全屏、编辑器、侧边栏、面板、轮播、自定义图片/样式...

GitHub | Visual Studio Marketplace

多区域，editor、sidebar、panel

全屏

安装

有两种安装方式：

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

自定义

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

settings.json 是什么 | 怎么打开

配置项

全局配置

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

Editor 编辑器区域配置

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

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

style 指的是 css style， 通过自定义样式可以改变背景图的展示。

example:

{
  "background.editor": {
    "useFront": true,
    "style": {
      "background-position": "100% 100%",
      "background-size": "auto",
      "opacity": 1
    },
    "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.91、0.2	透明度，全屏建议 0.85 ~ 0.95，其它建议 0.1 ~ 0.3。
size	string	cover	等同 css background-size, 建议使用 cover 来自适应，或者 contain、200px 200px。
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.91,
    "size": "cover",
    "position": "center",
    "interval": 0,
    "random": false
  },
  // `sidebar`、`panel` 的配置与 `fullscreen` 一致
  "background.sidebar": {},
  "background.panel": {}
}

快捷命令

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

常见问题

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

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

卸载

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

感谢这些朋友的 pr 🙏

贡献指南

这里是 贡献指南。

更新日志

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

分享图片

我们在 这里 分享背景图。

从 v1 迁移

v1 的配置已经过时，当前保持一定的兼容性，请参考 migration-from-v1.md 进行迁移。

协议

MIT