Skip to content

MoeYc/vscode-background

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

logo

vscode-background

Bring background images to your Visual Studio Code

code areafullscreencarouselcustom images/styles...

GitHub | Visual Studio Marketplace

Version Installs Ratings Stars Build Status License


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.style Object {} Customize style
background.styles Array<Object> [{},{},{}] Add custom Style for individual image
background.customImages Array<String> [] Add your custom 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 images to fullscreen

example:

{
  "background.fullscreen": {
    "images": ["https://pathtoimage.png"], // urls of your images
    "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

  1. disable this extension
{
  "background.enabled": false
}
  1. custom images

You should use protocol https instead of http for the image, http is not support by vscode any more.

{
  "background.customImages": ["https://a.com/b.png", "file:///Users/somepath/a.jpg"]
}
  1. custom style - opacity
{
  "background.style": {
    "opacity": 0.6
  }
}
  1. custom style - image size
{
  "background.style": {
    "background-size": "300px 460px"
  }
}
  1. full screen
{
  "background.fullscreen": {
    "images": ["https://pathtoimage.png"], // urls of your images
    "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 🙏

shalldie suiyun39 frg2089 AzureeDev tumit asurinsaka u3u kuresaru Unthrottled rogeraabbccdd rogeraabbccdd

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

About

Bring background images to your vscode. vscode background 背景扩展插件。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.9%
  • Other 0.1%