neputa note

ホーム / vscode /

VSCodeの背景画像を設定してテンションを上げる（拡張機能を使用）

2022/02/05

dev vscode

目次 [隠す]

本記事の目的

VSCodeのエディタ背景に好きな背景画像があるとテンションが上がるからそうしよう。

※VSCodeサポート対象外の拡張機能を使用します。
試す際は自己責任に於いて行ってください。

環境

OS

  • Windows10 + Ubuntu 20.04LTS on WSL2
  • Ubuntu 20.04LTS

VSCode

version 1.64.0

実践

TOP画像

拡張機能インストール

VSCodeのエディタ背景は以下のスタイルシートを修正する必要がある。

<path to VScode>\resources\app\out\vs\workbench.desktop.main.css

※「<path to VScode>」の部分は、Windows 10であれば「%USERPROFILE%/AppData/Local/Programs/Microsoft VS Code」、Ubuntu 20.04LTSは「/usr/share/code」

複数の環境でVSCodeを使用している場合、それぞれでこのファイルを修正するのは面倒だ。

この面倒を解決してくれるのがこの拡張機能「background」

background - Visual Studio Marketplace

これをVSCodeにインストールする。

インストールすると、この拡張機能は上述したインストールディレクトリ内のcssファイルに影響するため、下記のポップアップが起動のたびに出る。

歯車アイコンから再表示しないようにすることもできるのでご検討を。

記事画像

また、冒頭で示したとおりインストールディレクトリ内に変更をおよぼす拡張機能のため、タイトルバーに「サポート対象外」と表示されるようになる。

記事画像

どうしても気になる場合は、下記拡張機能で消すことが可能なようだ。（試していない）

Fix VSCode Checksums - Visual Studio Marketplace

また、拡張機能の設定を変更するたびに下記ポップアップが表示されるが無視して次へ進む。

記事画像

settings.jsonを修正

「Ctrl + Shift + p」から「settings.json」を開き、例として以下のように設定してみる。

settings.json
// 複数定義可、ファイルパスはこんな感じ
// Ubuntu → file:///home/neputa/pictures/ghost-in-the-shell.jpg
// Windows → file:///c:/Users/neputa/Pictures/ghost-in-the-shell.jpg
"background.customImages": [
    "file:///home/neputa/pictures/first-picture.jpg",
    "file:///home/neputa/pictures/second-picture.jpg",
],
"background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "width": "100%",
    "height": "100%",
    "z-index": "99999",
    "background-repeat": "no-repeat",
    "background-size": "cover",
    "opacity": 0.1
},
"background.useFront": false,
"background.useDefault": false,
"background.loop": false,
// customImagesは環境によってパスが異なるため私は同期対象外にしている
"settingsSync.ignoredSettings": [
"background.customImages"
],

各定義の内容は以下の通り

※参考：shalldie/vscode-background - github.com

Name Type Description
background.enabled Boolean この拡張機能の有効・無効フラグ
background.useDefault Boolean デフォルトで設定される画像の使用有無フラグ
background.customImages Array<String> カスタム画像のファイルパス（配列で複数定義可）
background.style Object 背景画像のスタイル
background.styles Array<Object> 複数画像使用時の個々のスタイル
background.useFront Boolean 画像の設置位置（ソースコードの前後）フラグ
background.loop Boolean 複数の画像パスを指定している場合、ループするかフラグ

「Ctrl + Shift + p」から「Reload Window」をすると、こんな具合に背景が設定された。

記事画像

余談だが、私は技術が実現すれば「迷わず全身義体化を希望する派」です。

Ubuntuの場合、追加作業

UbuntuなどのLinuxマシンの場合、VSCodeのインストールディレクトリの権限を変更しないと拡張機能が動作しないので注意。

bash
sudo chown <your_username>/usr/share/code -R
chmod ugo+rwx /usr/share/code

backgroundをアンインストールする際の注意

公式に以下の説明がある。

Set the config {"background.enabled": false} in settings.json, then uninstall the plugin.

settings.jsonで設定した「background.enabled」を「false」にした状態で拡張機能をアンインストールしないと、デフォルトで設定されるこの拡張機能のアイコン画像が背景に設定されたままになってしまうので注意。

さいごに

冒頭にも書いたが、本記事で使用した拡張機能はインストールディレクトリ内に影響がある。

万一問題が起き、VSCodeを再インストールする必要が起こったりすることもありうるので、お仕事で使用している環境だったりする場合は避けた方がよいかもしれない。

Windows Terminalのように、いずれ公式で背景画像が設定できるといい。やっぱ背景あると気分があがるもの。

お役に立ちましたら、この記事をシェアしていただけたりすると泣いて喜びます。

参考サイト

How to change VSCode background - LinuxPip

dev vscode