给 Visual Studio Code 添加背景
全屏
、编辑器
、侧边栏
、面板
、轮播
、自定义图片/样式
...
GitHub | Visual Studio Marketplace
多区域,编辑器
、侧边栏
、面板
全屏
有两种安装方式:
- 从 Visual Studio Marketplace 安装。
- 在 vscode 里搜索
shalldie.background
。
可以通过调整配置(settings.json
)来满足个性化需求。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
background.enabled |
Boolean |
true |
插件是否启用 |
通过 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 所有命令:
本插件是通过修改 vscode 的 js 文件的方式运行
如果遇到问题请查看 常见问题
请查看 常见问题#如何删除插件
这里是 贡献指南。
可以从 这里 查看所有的变更内容。
我们在 这里 分享背景图。
v1 的配置已经过时,当前保持一定的兼容性,请参考 migration-from-v1.md 进行迁移。
MIT