shalldie/vscode-background

shalldie/vscode-background has 1,919 GitHub stars and 167 forks. GitHot measured +3 in 7 days. Last checked 2026-11-09 23:08 UTC. Last push 2026-09-11.

この数値の測り方

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

1,919 スター 167 forks

計測したスター増加

24時間: 更新が遅れています
7日間: +3
15日間: 更新が遅れています
1か月: 更新が遅れています

期間ごとの純増数です。期間は重複しており、日別の値ではありません。未計測の値は空欄です。スター数は注目度の指標であり、品質の保証ではありません。

README.ja-JP.md

オリジナル

English | 中文 | 日本語

vscode-background

Visual Studio Code にも背景画像を。

フルスクリーン、エディター、サイドバー、補助バー(auxiliarybar)、パネル、画像の切り替わり、画像・CSSのカスタマイズ...

GitHub | Visual Studio Marketplace

複数の領域、エディタ、サイドバー、補助バー(auxiliarybar)、パネル

フルスクリーン

インストール

2つの方法でインストールできます：

Visual Studio Marketplaceからインストール
vscodeの拡張機能タブからshalldie.backgroundを検索

カスタマイズ

settings.jsonからユーザー設定をカスタマイズすることができます。

settings.json とは | 設定方法

コンフィグ

グローバル設定

設定	型	デフォルト	説明
`background.enabled`	`Boolean`	`true`	拡張機能を有効化するかどうかを制御します。

エディタ部分の設定

エディタ部分の設定を行うには、background.editorを編集します．

設定	型	デフォルト	説明
`useFront`	`boolean`	`true`	画像を最前面に表示するかどうかを制御します。
`style`	`object`	`{}`	全ての画像に適応される CSS を制御します。 MDN Reference
`styles`	`object[]`	`[]`	画像ごとに個別のCSSを制御します。
`images`	`string[]`	`[]`	カスタム画像に対応、オンライン画像やローカル画像、フォルダもサポート。
`interval`	`number`	`0`	次の画像を表示するまでの秒数を制御します。`0`の場合、画像は変更されません。
`random`	`boolean`	`false`	画像の表示順をランダムにするかを制御します。

設定例：

{
  "background.editor": {
    "useFront": true,
    "style": {
      "background-position": "100% 100%",
      "background-size": "auto",
      "opacity": 0.6
    },
    "styles": [],
    // `images`はオンライン画像、ローカル画像、およびフォルダをサポートしています。
    "images": [
      // オンライン画像については、`https`のみ許可されています。
      "https://hostname/online.jpg",
      // ローカル画像
      "file:///local/path/img.jpeg",
      "/home/xie/downloads/img.gif",
      "C:/Users/xie/img.bmp",
      "D:\\downloads\\images\\img.webp",
      // ローカルパスでは `~` と環境変数が使用できます
      "~/Pictures/img.png",
      "${HOME}/Pictures/img.png",
      // ローカルフォルダ
      "/home/xie/images",
      // data URL
      "data:image/*;base64,<base64-data>"
    ],
    "interval": 0,
    "random": false
  }
}

フルスクリーン、サイドバー、補助バー(auxiliarybar)、パネル部分の設定

background.fullscreen、background.sidebar、background.auxiliarybar、background.panelを編集してこれらの領域を設定します。

設定	型	デフォルト	説明
`images`	`string[]`	`[]`	カスタム画像に対応、オンライン画像やローカル画像、フォルダもサポート。
`opacity`	`number`	`0.1`	画像の不透明度を制御します、opacityへのエイリアスです。推奨値 `0.1 ～ 0.3`。
`size`	`string`	`cover`	background-sizeへのエイリアスです。推奨 `cover`，縦横比を保ったまま領域を覆います。
`position`	`string`	`center`	background-positionへのエイリアスです。デフォルト値は `center` です。
`styles`	`object[]`	`[]`	画像ごとに個別のCSSを制御します。
`interval`	`number`	`0`	次の画像を表示するまでの秒数を制御します。`0` の場合、画像は変更されません。
`random`	`boolean`	`false`	画像の表示順をランダムにするかを制御します。

example:

{
  "background.fullscreen": {
    // `images`はオンライン画像、ローカル画像、およびフォルダをサポートしています。
    "images": [
      // オンライン画像については、`https`のみ許可されています。
      "https://hostname/online.jpg",
      // ローカル画像
      "file:///local/path/img.jpeg",
      "/home/xie/downloads/img.gif",
      "C:/Users/xie/img.bmp",
      "D:\\downloads\\images\\img.webp",
      // ローカルパスでは `~` と環境変数が使用できます
      "~/Pictures/img.png",
      "${HOME}/Pictures/img.png",
      // ローカルフォルダ
      "/home/xie/images",
      // data URL
      "data:image/*;base64,<base64-data>"
    ],
    "opacity": 0.1,
    "size": "cover",
    "position": "center",
    "styles": [],
    "interval": 0,
    "random": false
  },
  // `sidebar`、`panel`も、`fullscreen`と同様の設定項目を持っています
  "background.sidebar": {},
  "background.panel": {}
}