はじめに

この記事は、株式会社スピードリンクジャパン Advent Calendar 2024 の22日目の記事です。
VSCodeのテーマは、開発者の作業環境を快適にするだけでなく、見た目の好みや作業効率にも大きな影響を与えます。今回は背景を好きな画像を表示させる方法をまとめました。

VSCode拡張機能「background-cover」の使い方

「background-cover」のインストール
まず、VSCodeの拡張機能マーケットプレイスから「background-cover」をインストールします。
VSCodeを開く
VSCodeを開きます。
拡張機能のインストール
左側のサイドバーにある拡張機能アイコン（四角形のアイコン）をクリックします。
検索バーに「background-cover」と入力
検索バーに「background-cover」を入力し、結果から「Background Cover」を選びます。
インストール
「インストール」ボタンをクリックして、拡張機能をインストールします。

拡張機能をインストールした後、右下のステータスバーに表示される「background-cover」のアイコンをクリックします。これで設定メニューが表示され、以下のオプションを使って背景をカスタマイズできます。

Select Pictures
Finder or エクスプローラーから背景画像を選択するオプションです。画像を選択すると、その画像が背景として設定されます。
Add Directory
背景画像用のフォルダを設定するオプションです。指定したフォルダ内の画像を背景に設定できます。
ランダム選択: フォルダ内の画像をランダムで選ぶオプションです。これにより、VSCode起動時や設定変更時に毎回違った画像が表示されます。
Background Opacity
背景画像の透明度を設定できます。0.0（完全に透明）から0.8（完全に不透明）まで調整可能です。
デフォルトは0.2（少し透けて見える程度）になっています。不透明すぎるとコードが見えにくくなるので0.1がおすすめです。
Input: Path/HTTPS
画像のパスを直接入力するオプションです。ローカルパスやURLを指定できます。
Closing Background
現在表示している背景画像をクリアするオプションです。背景を消したい場合に選択します。
On Start Replacement
VSCode起動時に背景画像をランダムに切り替えるかどうかを設定できます。これを有効にすると、VSCode起動時に指定したフォルダからランダムで背景画像が選ばれます。
注意: このオプションは「Add Directory」設定時にのみ使用可能です。

設定すると以下のようになります。

このように、VSCodeの「background-cover」を使用することで、視覚的に魅力的な作業環境を簡単に作成できます。設定メニューから画像を選ぶだけでなく、ランダム選択や透明度の調整、起動時に画像を変更する機能も活用できるので、自分の作業スタイルに合わせて自由にカスタマイズしましょう。