空談録

世界で5人くらいに役立ちたい

tmThemeを利用した痛Visual Studio Code化計画

ま た こ れ か
ごめんなさいまたです。気が済むまでやり続けます。ふぁぼツバメ先生の次回作にご期待しないでください

というわけでVisual Studio CodeがVersion 0.9になりtmThemeによるカスタマイズが可能になりました
TextMate Theme?とかなんとかだそうです。まあエディタの色に宗教はいろいろありそうですからね、こうやって対応できるようになるのはいいと思います

とはいえ私は色はまあ常識的な色なら何でもいいですが画像を出さないとコーディング効率が30%減(0 * 0.7 → 0)なので画像を出せるようにしていきましょう。

ver0.8までは次の記事参照?
artfulplace.hatenablog.com
なんかver0.8のcss違う気がしますがまあ参考程度に

追記(2015/11/19):0.10.1でExtensionが追加されましたが現段階ではどうあがいてもExtensionで背景に女の子が追加できなさそうでした。あきらめてCSSをいじってください。むしろ作り方知ってる人がいたら教えてください……
ちなみに0.10.1でも以下の手順で行けます

追記(2016/02/11):若干追記しました。あと0.10.8でも同様の手法で行けました

追記(2016/05/14):気が付いたら同じ手法でいけなくなっていましたので1.1.0に対応しました

追記(2016/07/01):またダメになっていたのでv1.2.1まで対応しました

追記(2016/07/31):1.3.1でもいけることを確認しました

tmThemeを利用すると何がうれしいの?

一言でいえば「アップデート時に設定が半分消えなく」なります
拡張という形で今回のtmThemeなどは利用するためアップデート時に書き換えられる心配がありません
まあ画像は出せないのでcssを結局いじる必要が出てきますが、今までのようながりがりを書き換えていく必要はなくなります

目標はこんな感じ。前回といssy

f:id:fantasticswallow:20151018223755j:plain

tmThemeの編集

npmでgenerator-codeとか入れてやるのがおすすめらしいです
残念ながら私の環境だとnpm install generator-codeがnot foundって出てきて解決方法不明なのであきらめて最終手段で行きます
まああの説明で使いこなせる人がいるのかって感じではありますが

まずVS Codeの本体があるフォルダの中からすでに入っているextensionsのフォルダに行きましょう
Program Filesの場合はProgram Files\Microsoft VS Code\resources\app\extensionsですね
extensionsの中からお好きなテーマを一つ選んで %USERPROFILE%\.vscode\extensions にコピーします
このとき"Light"と"Dark"はtmThemeで定義されていませんので選べません。あしからず

私は白系の背景が好きなので"theme-quietlight"をコピーしました

そしたらまずコピーしたフォルダの中のpackage.jsonをいじるべくエディタで開きます
このpackage.jsonのcontributesの中のthemes→labelが表示されるテーマ名となります。コピーしたままだと同じ名前でわからないので適当にわかる名前に変えておきましょう
uiThemeはベースとなるテーマがlightとdarkから選べます。"vs"がlightで"vs-dark"がdarkですね。お好きなほうを選んでください
ここの変更はあとで重要です。変えなくても覚えておきましょう
nameも一応変えておくと競合しなくていいかもです。調べてません

ここまでやったらpackage.jsonは保存して閉じます
次にthemes\hogehoge.tmThemeを編集していきましょう
改行文字の都合でメモ帳で開くと大変面倒なのでVSCodeなりで開きましょう

開いて最初のほうにこんな記述が見えると思います

	<array>
		<dict>
			<key>settings</key>
			<dict>
				<key>background</key>
				<string>#FFFFFF</string>
				<key>caret</key>
				<string>#000000</string>
				<key>foreground</key>
				<string>#333333</string>

stringの中身は適当です
key:settingsのところのbackgroundっていうやつがエディタ部分の背景色を表しています。これはアルファ値を適用できるので次のように書き換えましょう

	<array>
		<dict>
			<key>settings</key>
			<dict>
				<key>background</key>
				<string>#FFFFFF99</string>
				<key>caret</key>
				<string>#000000</string>
				<key>foreground</key>
				<string>#333333</string>

アルファ値は #FFFFFF の後につけましょう
透過率は0.6にしたいので99にしてあります
普段よりも高いのはわけがありますが後で

tmThemeはこだわらなければこれで十分です。他もいじりたかったら頑張ってください。
tmtheme-editor.herokuapp.com
tmThemeをブラウザ上で定義できるのもあるのでこういうサービスを使うと便利かもしれません

追記(16/02/11):glyph-marginが邪魔だと思いません?と思ったのでthThemeを調べてました
tmThemeの場所的にはgutterが効くようなのですがsettingsにgutterの値を追加しても効果がないようです…
つまるところ無視されてるみたいですね。さすがに仕様を全部読みたくないし断念

cssの変更

こっちも必要ですよ
じゃあ変わらないじゃんって? まあそうなんですけども

workbench.main.cssが0.9から超絶読みにくくなってるので解読はあきらめましょう
次のスタイルをworkbench.main.cssの最後に付け足します

.monaco-workbench .part.editor {
	 background: url('vsc-bg.png') no-repeat;
	 background-size: cover;
}
.monaco-editor.vs-dark.vscode-theme-transparentquietlight-themes-TransparentQuietLight-tmTheme {
	 background: none;
}
.monaco-editor.vs.vscode-theme-transparentquietlight-themes-TransparentQuietLight-tmTheme {
	 background: none;
}
.vs .monaco-workbench .editor:not(.empty)>.content {
        background: none;
}
.monaco-editor, .monaco-editor .inputarea {
        background: none;
}

ああ、クラス名が違うのでこれこのままじゃだめです
.vscode-theme-transparentquietlight-themes-TransparentQuietLight-tmTheme っていうのは自動生成でつけられた名前なので、tmThemeの名前によって変わってきます
じゃあどうやって調べるのって? Toggle Developer Toolsを使って調べてください。monaco-shell-content→div→monaco-editor-container→monaco-workbenchで調べられます
monaco-workbenchの部分をmonaco-editorに書き換えればOKです

追記(2015/11/19):今更ですけどここvsとvs-darkの両方に対応できるように書いてありますが、package.jsonで定義したどっちかだけでいいです。面倒なのでどっちも書いてますが

該当するクラス名にしたら同じフォルダにvsc-bg.png っていうのをコピーすれば完了です。
ところで今回は透過率を指定しなくてもtmThemeをいじることで対応できます。というのも画像と文字の間に色を指定できるレイヤーがはいるため、透過率を下げれば画像も見えにくくなります。
このためいちいち画像に透過処理を行う必要がなくなります。やったね!

追記(2016/02/11):glyph-marginが邪魔なので透過させたい方はこんな感じです

.monaco-workbench .part.editor {
	 background: url('vsc-bg.png') no-repeat;
	 background-size: cover;
}
.monaco-editor.vs-dark.vscode-theme-transparentquietlight-themes-TransparentQuietLight-tmTheme {
	 background: none;
}
.monaco-editor.vs.vscode-theme-transparentquietlight-themes-TransparentQuietLight-tmTheme {
	 background: none;
}
.monaco-workbench-container .monaco-editor .glyph-margin {
	opacity: 0.6;
}
.vs .monaco-workbench .editor:not(.empty)>.content {
        background: none;
}
.monaco-editor, .monaco-editor .inputarea {
        background: none;
}

クラス名は頑張ってください


というわけで少しだけこれからの作業量が減る感じでした
もっとcssをガシガシ変えられるようなテーマが実装されてほしかった気もします。無理か…

最近何もしていないのでもう少しプログラミングなりしていかないとなぁという感じです

この辺で