Visual Studio Codeにプロ生ちゃんを召喚した話

はじめに

開発のモチベーションを上げるために、プロ生ちゃんをVS Codeに召喚させようと思います。

やり方

上記の拡張機能をインストールして、settings.jsonを以下のように編集。画像はここから拝借しています。

 1"background.useDefault": false,
 2    "background.customImages": [
 3    "https://pronama.jp/images/animated.png",
 4],
 5"background.style": {
 6    "content": "''",
 7    "pointer-events": "none",
 8    "position": "absolute",
 9    "z-index": "99999",
10    "width": "100%",
11    "height": "100%",
12    "background-position": "100% 100%",
13    "background-repeat": "no-repeat",
14    "background-size": "20%",
15    "opacity": 0.3
16},

ちなみに、background.customImagesに好きな画像を複数設定することで、ランダム表示にすることもできます！

編集したら、VS Codeを再起動すると完了！

ファイルを開くと、プロ生ちゃんが現れていると思います。 APNGなので目がパチパチしてかわいい！

おわりに

簡単にVS Codeのエディタ画面に画像を表示することができました。

自分で拡張機能を作ってみても楽しいかもしれませんね！