Visual Studio Code にも背景画像を。
エディターごとの画像表示、全画面の画像表示、画像の切り替わり、画像・CSSのカスタマイズ...
GitHub | Visual Studio Marketplace
エディタ、サイドバー、パネル、個別に設定
フルスクリーン
2つの方法でインストールできます：
- Visual Studio Marketplaceからインストール
- vscodeの拡張機能タブから
shalldie.backgroundを検索
settings.jsonからユーザー設定をカスタマイズすることができます。
| 設定 | 型 | デフォルト | 説明 |
|---|---|---|---|
background.enabled |
Boolean |
true |
拡張機能を有効化するかどうかを制御します。 |
エディタ部分の設定を行うには、background.editorを編集します．
| 設定 | 型 | デフォルト | 説明 |
|---|---|---|---|
useFront |
boolean |
true |
画像を最前面に表示するかどうかを制御します。 |
style |
object |
{} |
全ての画像に適応される CSS を制御します。 MDN Reference |
styles |
object[] |
[{},{},{}] |
個別の画像に適応される CSS を制御します。 |
images |
string[] |
[] |
httpsまたはfileプロトコルで画像のパスを指定してください。複数指定することもできます。 |
interval |
number |
0 |
次の画像を表示するまでの秒数を制御します。0の場合、画像は変更されません。 |
random |
boolean |
false |
画像の表示順をランダムにするかを制御します。 |
設定例：
{
"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": 0,
"random": false
}
}フルスクリーン、サイドバー、パネル部分を設定するには、background.fullscreen、background.sidebar、background.panelを編集します。
| 設定 | 型 | デフォルト | 説明 |
|---|---|---|---|
images |
string[] |
[] |
httpsまたはfileプロトコルで画像のパスを指定してください。複数指定することもできます。 |
opacity |
number |
0.1 |
画像の不透明度を制御します、opacityへのエイリアスです。推奨値 0.1 ～ 0.3。 |
size |
string |
cover |
background-sizeへのエイリアスです。推奨 cover，縦横比を保ったまま領域を覆います。 |
position |
string |
center |
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 ファイルを編集することで機能します。
問題が発生した際は、Common Issuesを参照してください。
Common Issues#how-to-uninstallを参照してください。
Contributing Guideを参照してください。
チェンジログで全ての変更を確認できます。
こちらで背景用の画像のシェアを行っています。
v1における設定は古いものであり、互換性は限定的です。 設定の移行の際には、migration-from-v1.mdを参照してください。
MIT