VisualStudioCodeでエディタの背景に画像を設定する

概要

独自テーマの作成はまだできないようですが、自分でCSSいじってUIを変えることはできます。(自己責任で)

参考資料

Visual Studio Code のテーマを変更する + プロ生ちゃんを表示
http://pronama.azurewebsites.net/2015/04/30/visual-studio-code-theme/

手順

win8.1だとAppData\Localの中にCodeがインストールされてると思うので、その中からnative.main.cssというファイルを探してください。
作業前に一応バックアップ取っといた方がいいかもですね。

Dark Themeの場合、6670行あたりに「.monaco-editor.vs-dark」という箇所があり、そこの「.zone-widget .monaco-edhitor」の中をいじるとエディタのUIがいじれるようです。

native.main.cssの6670行あたり

.monaco-editor.vs-dark .zone-widget .monaco-editor {		
	color: #BBB;
	background: #1E1E1E;
	/*以下追記*/
	background: url('画像のパス') no-repeat;
	background-size: contain;
	background-position: right bottom;
	/*以上追記*/
}

こんなんなりました↓

(その辺から拾ってきた画像使っちゃってますスンマセン)
画像はgifやjpg、pngは使えるの確認しました。

まとめ

エディタに画像を表示するとけっこうテンション上がりますね。ただ、画像はちゃんと選ばないと非常に邪魔になります。とりあえず透過は必須、肌色多めだと見づらいです。
あと、gifアニメーションもちゃんと動くので、隅に小さく表示して動かすと面白いかもしれないですね。