Hello, I am Kosuke.

VS Code に背景画像を設定する方法: 固定表示もランダム表示も可能

どうも、こうすけ(@kosuke_upd)です。

今回は、VS Code に背景画像を設定する方法を解説します。背景画像は、固定表示もランダム表示も可能です。「background-cover」という名前の拡張機能を使用しますが、とても簡単に設定できてしまいます。

こちらが実際に設定してみた例です。

では早速やり方を解説していくので、順番に見ていきましょう。

手順1. background-cover をインストール

まずは、VS Code を開き、background-cover という拡張機能をインストールしましょう。

VS Code の画面左のボタンから拡張機能ボタンを選択し、拡張機能検索ボックスに background-cover と入力して検索し、「background-cover」をインストールしましょう。

補足

background-cover の公式ページはこちらです。

background-cover – Visual Studio Code

手順2. settings.json に設定を記述

拡張機能をインストールできたら、次は VS Code の設定ファイル settings.json に「background-cover」の設定を記述しましょう。

まずは VS Code 上で Cmd + Shift + P (Windows の場合は Ctrl + Shift + P) キーを押します。すると下画像のような画面が表示されるので、settings と入力しましょう。そして候補の中から「基本設定: 設定 (JSON) を開く」を選択しましょう。

すると、settings.json という名前の VS Code の設定ファイルが開くので、「background-cover」の設定を記述しましょう。

使用できる設定項目は下記の4つです。

プロパティ 説明
backgroundCover.enabled Boolean 背景画像を使うかどうか
true または false
backgroundCover.opacity Number 背景画像の透過度
0.1 〜 0.9
デフォルトは 0.2
backgroundCover.imagePath String 背景画像のパス (固定表示)
/Users/kosuke/vscode-bg/sample.png
backgroundCover.randomImageFolder String 背景画像のパス (ランダム表示)
/Users/kosuke/vscode-bg/

3つ目と4つ目の設定項目はどちらか一つで OK です。固定表示が良ければ3つ目を、ランダム表示が良ければ4つ目を使いましょう。

ランダム表示の設定について

ランダム表示の設定をしたい場合は、任意のディレクトリに表示させたい画像を複数枚格納しておき、そのディレクトリのパスを上記のように記述します。

実際にどのように記述するかというと、下記のように記述します。下記はあくまで一例なので、必要に応じて変更してください。

settings.json
"backgroundCover.enabled": true,
"backgroundCover.opacity": 0.4,
"backgroundCover.randomImageFolder": "/Users/kosuke/vscode-bg/",

また、使用できる画像の形式は、.jpg .png .gif です。

手順3. 設定を反映させる

設定が済んだら、最後に設定を反映させましょう。

設定を反映させるには、VS Code 上で Cmd + Shift + P (Windows の場合は Ctrl + Shift + P) キーを押します。

そして backgroundCover - refresh と入力して選択しましょう。

すると、下画像のように設定した画像が VS Code の背景画像として反映されます。

画面上部に表示される「サポート対象外」という文言について

最後になりますが、「background-cover」を導入すると、VS Code の画面上部に「サポート対象外」という文言が表示されとても気になりますよね。

このことに関しては、公式も認識していることであり、現時点では特に対処法はないようです。

見栄え的には気になりますが、特に問題があるわけではないようなので、このことに関しては気にしないようにするしかありません。

自分好みのエディタにアレンジして楽しもう!

今回は、VS Code の背景画像を設定する方法として「background-cover」という拡張機能を用いた方法を解説しました。

僕は来年あたりにイースター島に行きたいという思いから、VS Code の背景画像にイースター島の写真を設定してみました。

プログラミングをより楽しむためにも、ぜひ VS Code にテンションの上がる背景画像を設定してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です