Code Area
Fullscreen
Installation
To install the extension just execute the following command in the Command Palette of Visual Studio Code
ext install background
Custom
User defined requirements can be met by changing the configuration(settings.json).
what's settings.json | where is
Config
Base Config
| Name |
Type |
Default |
Description |
background.enabled |
Boolean |
true |
Enable or disable this plugin |
Default Config
| Name |
Type |
Default |
Description |
background.useFront |
Boolean |
true |
Set the image to front or back of your code |
background.useDefault |
Boolean |
true |
Whether or not to use default images |
background.style |
Object |
{} |
Customize style |
background.styles |
Array<Object> |
[{},{},{}] |
Add custom Style for individual image |
background.customImages |
Array<String> |
[] |
Add your custom images |
background.loop |
Boolean |
false |
loop mode, may repeat your images |
background.interval |
Number |
0 |
Seconds of interval for carousel, default 0 to disabled. |
style means css style, which allows you to create great-looking background.
Fullscreen Config
may overwrite the default config
| Name |
Type |
Default |
Description |
background.fullscreen |
Object |
null |
Set the image to fullscreen |
example:
{
"background.fullscreen": {
"image": "https://pathtoimage.png", // url of your image
// "image": ["https://pathtoimage.png"], // An array may be useful when set interval for carousel
"opacity": 0.91, // 0.85 ~ 0.95 recommended
"size": "cover", // also css, `cover` to self-adaption (recommended)，or `contain`、`200px 200px`
"position": "center", // alias to `background-position`, default `center`
"interval": 0 // seconds of interval for carousel, default `0` to disabled.
}
}
Examples
- disable this extension
{
"background.enabled": false
}
- custom images
You should use protocol https instead of http for the image, http is not support by vscode any more.
{
"background.useDefault": false,
"background.customImages": ["https://a.com/b.png", "file:///Users/somepath/a.jpg"]
}
- custom style - opacity
{
"background.style": {
"opacity": 0.6
}
}
- custom style - image size
{
"background.style": {
"background-size": "300px 460px"
}
}
- full screen
{
"background.fullscreen": {
"image": "https://pathtoimage.png", // url of your image
// "image": ["https://pathtoimage.png"], // An array may be useful when set interval for carousel
"opacity": 0.91, // 0.85 ~ 0.95 recommended
"size": "cover", // also css, `cover` to self-adaption (recommended)，or `contain`、`200px 200px`
"position": "center", // alias to `background-position`, default `center`
"interval": 0 // seconds of interval for carousel, default `0` to disabled.
}
}
Warns
This extension works by editting the vscode's css file.
So, a warning appears while the first time to install or vscode update. U can click the [never show again] to avoid it.
This is the reason:
Uninstall
three ways
1. (recommended)
press `F1` to open Command Palette, enter and chose `Background - Uninstall (remove extension)` , automatically complete uninstall.
2.
Set the config {"background.enabled": false} in settings.json, then uninstall the plugin.
3. An unfriendly way:
If you uninstall this plugin directly, don't worry.
Exit vscode completely, then open, then reload. Now it's clean :D
(I know it's strange... Because of the limit of vscode)
Contributors 🙏
CHANGELOG
You can checkout all our changes in our change log.
Q&A
Q: How to remove [unsupported] tag?
A: see here: https://github.com/lehni/vscode-fix-checksums
Q: It seems that nothing happens after installing the extension in MAC?
A: In Mac, move `vscode` from `Download` to `Applications`.
Q: The extension runs based on the modified vscode CSS file, and will try to raise the right within a limited time.
If it stop working for some reason, what if users need to change their permissions?
A: In windows,click right button on the vscode's icon,then check the [run with the administrator authority].
A: in mac/linux, try this: https://github.com/shalldie/vscode-background/issues/6 .
LICENSE
MIT
