README.zh-CN.md

English | 中文 | 日本語 | Portugues

vscode-background

给 Visual Studio Code 添加背景

代码区域、全屏、轮播、自定义图片/样式...

GitHub | Visual Studio Marketplace

---

代码区域

全屏

安装

在命令选项板（command/ctl + p）中输入以下命令快速定位到插件：

ext install background

自定义

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

settings.json 是什么 | 怎么打开

配置项

基础配置

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

默认配置

名称	类型	默认值	描述
background.useFront	Boolean	true	前景图/背景图。 在代码上面还是下面
background.style	Object	{}	自定义样式
background.styles	Array<Object>	[{},{},{}]	每个图片的独立样式
background.customImages	Array<String>	[]	自定义图片
background.interval	Number	0	设置图片轮播切换间隔 秒 数，默认 0 表示不开启

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

全屏配置

会覆盖默认配置

名称	类型	默认值	描述
background.fullscreen	Object	null	设置全屏背景

example:

{
  "background.fullscreen": {
    "images": ["https://pathtoimage.png"], // 图片的url
    "opacity": 0.91, // 建议值 0.85 ~ 0.95
    "size": "cover", // css, 建议使用 `cover`自适应，或者 `contain`、`200px 200px`
    "position": "center", // 同 `background-position`, 默认 `center`
    "interval": 0 // 设置图片轮播切换间隔 `秒` 数，默认 `0` 表示不开启
  }
}

一些示例

1. 关闭插件

{
  "background.enabled": false
}

2. 自定义图片

http 协议的外链图片在当前版本不能使用(vscode 限制)，需要用 https 协议开头的外链地址。

{
  "background.customImages": ["https://a.com/b.png", "file:///Users/somepath/a.jpg"]
}

3. 自定义样式 - 透明度

{
  "background.style": {
    "opacity": 0.6
  }
}

4. 自定义样式 - 图片尺寸

{
  "background.style": {
    "background-size": "300px 460px"
  }
}

5. 全屏

{
  "background.fullscreen": {
    "images": ["https://pathtoimage.png"], // 图片的url
    "opacity": 0.91, // 建议值 0.85 ~ 0.95
    "size": "cover", // css, 建议使用 `cover`自适应，或者 `contain`、`200px 200px`
    "position": "center", // 同 `background-position`, 默认 `center`
    "interval": 0 // 单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启
  }
}

注意

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

所以会在初次安装，或者 vscode 升级的时候，出现以下提示，请选择 【不再提示】:

原因：

卸载

三种方式

方式1. (推荐)

使用 `F1` 打开命令面板，输入并选择 `Background - Uninstall (remove extension)` ，完成自动化卸载。

方式2.

在 settings.json 中设置 {"background.enabled": false} ，然后再删除插件。

方式3.（不推荐）

如果直接删除了vscode，别担心。
接着完全退出vscode，打开然后再次重启一遍，图片就没了，，，
（我也知道挺奇怪，总之是因为vscode的限制 =。=）

感谢这些朋友的 pr 🙏

更新日志

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

Q&A

---

Q: 怎么去除顶部的[不受信任]的标志（强迫症）？
A: 参考另一个插件: https://github.com/lehni/vscode-fix-checksums

---

Q: Mac 下安装完插件后，似乎没有反应？
A:在 Mac 下，把 vscode 从 `下载` 移动到 `应用` 中

---

Q: 插件基于修改 vscode css 文件运行，无权限时会尝试提权。
   如果因为某种原因不work了，用户需要自行改变权限怎么办呢？

A: 在 windows 中，可以右键单击vscode的图标，选择【以管理员身份运行】。
A: 在 mac/linux 中，请尝试：https://github.com/shalldie/vscode-background/issues/6

---

协议

MIT