VSCodeで"kawaii"開発環境を作ろう

はじめに

みなさんは普段どのような開発環境でコーディングしていますか?
VSCodeやIntelliJシリーズ、Vimなど様々な環境があると思います。ですが、ただコードと真正面に向き合っても目が疲れたり動かないコードに苛立ちを覚えたりすることがあると思います。
そこで、"kawaii"開発環境を作って目を癒しながらコーディングをする最高の開発環境を作ってみましょう!

本日の主役

"kawaii"開発環境として使っていくのは、「Visual Studio Code(以下VSCode)」です。
VSCodeにはWebベースの技術が使われており、Electronというフレームワークを用いてWindows・Mac・Linux上で動作するクロスプラットフォームなデスクトップアプリとしてかなり有名なソフトウェアです。
Webベースということはお察しがよい方はわかるでしょう。そうですCSSが使用できます。
CSSが使えるということは背景画像を変えたり、アイコンをおしゃれなものにしたりとカスタマイズ性がとても高くなりあなただけのオリジナルの開発環境が出来上がります。
今回の完成イメージです。普段のVSCodeがこちらですね。

いつも見るおなじみの画面ですね。それがこうなります。

(画像は https://sakuranouta.biz/yumekawaii_room/ より拝借いたしました。また、ロゴについては後述しますが@aikoyori様より拝借いたしました。)
一瞬VSCodeとは思えないほどになりました。では実際にやっていきましょう!

使用するもの

• Microsoft Visual Studio Code (InsiderでもどちらでもOKです)
• 背景にしたい画像1点～
• 根気

1. 背景画像を追加する

1-1. 拡張機能のインストール

先ほどVSCodeでCSSが利用できるということを話したと思います。開発者ツール(デベロッパーツール)で、background-image:で追加することもできますが再起動のたびに初期化され、常時表示させることが難しいです。そこで、「Background」という拡張機能を使います。

拡張機能のインストール方法については割愛させていただきます。

1-2. Backgroundの設定

Ctrl+Shift+Pで次のようなコマンドパレットが表示されます。

「Background: Configuration」と検索し、クリックします。そうすると次のメニューが表示されます。

ウィンドウ全体に背景画像を適用する場合は「Window」、コードの描画領域(エディタ)のみに適用する場合は「Editor」、左のサイドパネル(ファイル、検索、拡張機能など...)のみに適用する場合は「Sidebar」、下のデバックウィンドウ、ターミナル等のみに適用する場合は「Panel」を選びましょう。
もちろん、Editorはこの画像、Sidebarはこの画像といったように複数の画像を背景にすることもできます。
その後、このような画面になります。(おそらくどれを選択しても同じようになると思われます)

「File」という項目を探し、クリックしてください。
そうすると、ファイル・フォルダ・Blob・URLから画像を読み込むことができるので読み込みたい画像に最適な選択をしてください。
ここまでできたらインストールするのみです。先ほど同様Ctrl+Shift+Pでコマンドパレットを開き、
「Background:Install」でインストールしましょう。インストールすると背景画像が追加されるようになります。
また、CSSのようにOpacityの調整もできるようになるのでカスタマイズはまさに無限大です!

2. ロゴを変更する

私の開発環境では、@Aikoyori 様のVisual Studio Codeのロゴを使用しています。リポジトリにもあるようにライセンスがCC BY-NC-SA 4.0となっているので非営利であれば無料で利用することができます。(ただしロゴ製作者様の掲載等も必要になります)

2-1. 拡張機能のインストール

CSSで、Visual Studio Codeのロゴからこちらのロゴに変更はできるのですがworkbench.desktop.main.cssという膨大な量のCSSから探さないといけないため大変です。そこで、「Custom CSS and JS Loader」という拡張機能をインストールします。¹

2-2. settings.jsonの編集

インストール後、VSCodeのsettings.jsonを開き、次のコードを追加してください。

settings.jsonの開き方については次の記事に開き方などがありますのでご覧ください。
https://qiita.com/y-w/items/614843b259c04bb91495

"vscode_custom_css.imports": [
    "https://gist.githubusercontent.com/Crysta1221/24c724fd9f475ef473dcf2c3d551b8c3/raw/a9e6920e39d78eeb43ea448d36a8eb215bbbbf35/style.css"
]

その後、コマンドパレットを開いて、「Enable Custom CSS and JS」をクリックするとトップ画面のロゴが変更されるようになります。

終わりに

いかがでしたでしょうか。この記事がみなさんの開発環境の参考となれば幸いです。
最後までご覧いただきありがとうございました!

1. この方法はこちらのツイートをもとに紹介させていただいています。
   https://x.com/PrunusSpeciosa_/status/1781241673525170535
   この場を借りて感謝申し上げます。 ↩