Visual Studio Codeにも背景画像を。
エディターごとの画像表示
、全画面の画像表示
、画像の切り替わり
、画像・CSSのカスタマイズ
...
エディターごとの画像
背景画像の全画面表示
サイドバーの拡張機能タブからbackground
を検索!
settings.json
からユーザー設定をカスタマイズすることができます。
設定 | タイプ | デフォルト | 説明 |
---|---|---|---|
background.enabled |
Boolean |
true |
拡張機能を有効化するかどうかを制御します。 |
設定 | タイプ | デフォルト | 説明 |
---|---|---|---|
background.useFront |
Boolean |
true |
画像を最前面に表示するかどうかを制御します。 |
background.useDefault |
Boolean |
true |
デフォルトの画像を使用するかどうかを制御します。 |
background.style |
Object |
{} |
全ての画像に適応されるCSSを制御します。 |
background.styles |
Array<Object> |
[{},{},{}] |
個別の画像に適応されるCSSを制御します。 |
background.customImages |
Array<String> |
[] |
画像のパスを指定してください。 |
background.loop |
Boolean |
false |
画像をリピートするかどうかを制御します。 |
background.interval |
Number |
0 |
次の画像を表示するまでの秒数を制御します。0 の場合、画像は変更されません。 |
CSS
について知る css style
デフォルト設定を上書きする可能性があります。
設定 | タイプ | デフォルト | 説明 |
---|---|---|---|
background.fullscreen |
Object |
null |
Set the image to fullscreen |
- 拡張機能を無効化する
{
"background.enabled": false
}
- カスタムイメージを使用する
https通信を採用しているリンクを使用する必要があります。
http通信はVSCodeにより制限されています。
{
"background.useDefault": false,
"background.customImages": ["https://a.com/b.png", "file:///Users/somepath/a.jpg"]
}
- カスタムCSS - 透明度
{
"background.style": {
"opacity": 0.6
}
}
- カスタムCSS - 画像サイズ
{
"background.style": {
"background-size": "300px 460px"//"横幅 縦幅"
}
}
- 全画面表示
{
"background.fullscreen": {
"image": "https://pathtoimage.png", // URLもしくはファイルパス(file:///~/~.png)
// "image": ["https://pathtoimage.png"], // 配列を使用することで複数の画像を設定できます
"opacity": 0.91, // 0.85 ~ 0.95 がおすすめです
"size": "cover", // CSSのbackground-sizeに相当します。"cover" ,"contain","200px 200px"のように設定します
"interval": 0 // 次の画像を表示するまでの秒数を制御します。`0`の場合、画像は変更されません。
}
}
この拡張機能は、VSCode本体のCSSファイルを編集することで機能します。 そのため、初回インストール時または vscode 更新時に警告が表示されます。 [二度と表示しない] をクリックして非表示にできます。
原因:
3つの方法
1. (おすすめ)
F1キーを押し、コマンドパネルを開ます。
「Background -Uninstall (remove extension)」と入力して、
自動アンインストールします。
2.
setting.jsonで{"background.enabled": false} と変更してから
手動でアンインストールします。
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)
チェンジログで全ての変更を確認できます。
Q: [Code インストールが壊れている可能性があります。]を消すには?
A: 確認してください: https://github.com/lehni/vscode-fix-checksums
Q: MACに拡張機能をインストールしましたが、機能しません。
A: `Visual Studio Code` を`Download`フォルダー から`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 .
MIT