空談録

http://artfulplace.net/blogs/ からひっこしつつ

Visual Studio Codeを痛くしたい

拡張提供されたらまた考えます

というわけでVSCが公開されましたね
インテリセンスの効くメモ帳としてこれから愛用したいと思います

公式サイトは https://code.visualstudio.com/ です。ダウンロードもここから

さて、今日TLを見てたらVSCを痛くする系の光景が流れてきたんですよ
プロ生でも取り上げられていますね
Visual Studio Code のテーマを変更する + プロ生ちゃんを表示 | プログラミング生放送
しかし私はVSをダークテーマで使うのはいまいち慣れないのでLightテーマで痛くする方法書いときます

※2015/4/30現在の方法です。未来のあなたはもっと別の方法かもしれません
追記(2015/06/08):ver0.3.0(app-0.1.1)でも同じです。行数が若干ずれてますが目安に使っていただければと

追記(2015/07/11):ver 0.5.0(app-0.1.2)では若干変わったので下のほうの変更を使ってください。
あと0.3.0以前についてももう少し楽に変えれるようにしました

追記(2015/08/18):ver 0.7.0(app-0.1.3)でも若干変わったのでさらに下のほうの変更を使ってください。
まずファイルから違うので注意

追記(2015/09/11):ver0.8.0についても追記しました。

追記(2015/10/18):ver0.9以降は次の記事でどうぞartfulplace.hatenablog.com


AppData\Local\Codeを探して、適当に下にもぐっていってmonaco\ui\workbench\nativeにあるnative.main.cssを見つけます
(Code\app-0.1.0\resources\app\client\vs\monaco\...)

そしたら次のような変更を加えます

/* native.min.css Line:625 */

.monaco-editor, .monaco-editor .inputarea {
	font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace;
	font-size: 14px;
	line-height: 19px;
	color: #333;
	
	/*background: #fffffe;*/ 
}


/* native.min.css Line:5505 */

.monaco-workbench .part.editor { 
	background-color: #F9F9F9;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background: url('vsc-bg.png') no-repeat;
}

行数はコメントの指示に従ってください。その辺にあります

どっちも下の一行が追加したりコメントアウトされてます

画像はnative.min.cssがあるフォルダに突っ込んどきます。名前はご自由に
絶対参照でもいいですが相対だと入力する文字数が減るので便利

書き換えて再起動した結果がこんな感じ
f:id:fantasticswallow:20150430213254j:plain

Q.毎回思うんだけどこの記事書いてる人って視認性とか考えているんですか?
A.愛で読め

まあこんなでかく出るのが嫌ならCSSをお好みで変えてください。場所は上のやつを参考にどうぞ

追記(5/1):分割でコードを出すと真ん中に線が出て邪魔臭いので対処したい場合の変更点は下の通り

/* native.main.css Line:165 */

.monaco-workbench-container .monaco-editor .glyph-margin {
	background: white;
	opacity: 0.5;
}

不透明度を0.5くらいに指定すると分割されてるのを把握しつつ背景も見れます。やったね!

さらに追記(5/1):上の状態だとマウスオーバーで出るエラーやらの文字が見づらくなります
なので出てくるやつの背景色を別に指定する必要があります
(どうも画像の背景が適用されてしまう模様)

/* Line:1475 */

.monaco-editor-hover {
	padding: 0 3px 0 3px;
	border: 1px solid #CCC;
	position: absolute;
	margin-top: -1px;
	cursor: default;
	z-index: 50;
	-webkit-animation-duration: 0.15s;
	-webkit-animation-name: fadeIn;
	-moz-animation-duration: 0.15s;
	-moz-animation-name: fadeIn;
	-ms-animation-duration: 0.15s;
	-ms-animation-name: fadeIn;
	animation-duration: 0.15s;
	animation-name: fadeIn;
	
	-webkit-user-select: text;
	-ms-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-o-user-select: text;
	user-select: text;
	
	overflow: hidden;
	background: white;
}

backgroundを指定するだけです。色はご自由に

追記(5/8):何度目だかもうわからない
サジェスト(Intellisenseもどき)の背景も上書きされてしまうので次の通りに

/* Line:2074 */

 .monaco-editor .suggest-widget {
	background-color: #F3F3F3;
	background: #F3F3F3;
	font-size: 12px;
	border: 1px solid rgb(200, 200, 200);
	z-index: 40;
}

background-colorだけだと下に回ってしまうのでbackgroundのほうを指定してください
(colorのほうは消してもいいです)

追記(07/11) ver-0.5.0のやつと同じくまとめてみました。cssの最後に足してください

.monaco-workbench-container .monaco-editor .glyph-margin {
	opacity: 0.5;
}
.monaco-editor-hover {
	background: white;
}
 .monaco-editor .suggest-widget {
	 background: #F3F3F3;
 }
.monaco-workbench .part.editor {
	 background: url('vsc-bg.png') no-repeat;
}

.monaco-editor, .monaco-editor .inputarea {
	background: none;
}

ver 0.5.0での変更

なんか上の変更をしても変わりません
なんでだろうな~って思ったのですが追跡が面倒…
そんなときについ最近見た記事の存在を思い出したのでそっちを参考にしてみました

Visual Studio Code(Ver. 0.5.0以降)でプロ生ちゃんを召喚する方法(※Ver. 0.9.1での方法を追加しました) | Chronoir.net のほうを読むとlines-contentとかいうのが邪魔らしいです

ということで上の手順を踏んでた場合は次のコードをどこかに足してください

.monaco-editor .margin-view-overlays.monaco-editor-background,
.monaco-editor .lines-content.monaco-editor-background {
	background: none;
}

.monaco-editor-backgroundの下に足してますがとりあえず動いてます

あとCSSいちいち書き換えてましたが普通に足せばよかったと今更気づくやつ…
上の手順やるのが面倒な方は次のCSSを最後に足しといてください

.monaco-editor .margin-view-overlays.monaco-editor-background,
.monaco-editor .lines-content.monaco-editor-background {
	background: none;
}
.monaco-workbench-container .monaco-editor .glyph-margin {
	opacity: 0.5;
}
.monaco-editor-hover {
	background: white;
}
 .monaco-editor .suggest-widget {
	 background: #F3F3F3;
 }
.monaco-workbench .part.editor {
	 background: url('vsc-bg.png') no-repeat;
}

.monaco-editor, .monaco-editor .inputarea {
	background: none;
}

ver 0.7.0の変更

まずファイル構成が変わり、native.main.cssではなくなりました
代わりに%localappdata%Code\app-0.1.3\resources\app\client\vs\workbench にある workbench.main.css を編集します
このとき、上のcssのままだとうまく出ないので次のものをworkbench.main.css の最後に貼り付けます

.monaco-workbench-container .monaco-editor .glyph-margin {
	opacity: 0.5;
}
.monaco-editor-hover {
	background: white;
}
 .monaco-editor .suggest-widget {
	 background: #F3F3F3;
 }
.monaco-workbench .part.editor {
	 background: url('vsc-bg.png') no-repeat;
}

.monaco-editor, .monaco-editor .inputarea {
	background: none;
}

.monaco-editor-background{
	background: none;
}

monaco-editor-backgroundとかいうのが追加されてるのでそれを削除しないと元の色が出てしまいます

ver 0.8.0の変更

themeが増えましたが背景出すのに色を出す意味はあるのかな…?とか思ったりしつつ
とりあえずLightについては上のCSSでいけます
追記:嘘書きました。動くけど前回と違います

そのままだとエディタ部分の背景が完全に透過されます。おそらく .monaco-workbench-container .monaco-editor .glyph-margin が消えた可能性
とりあえずmonaco-editor-backgroundで代用

.monaco-workbench-container .monaco-editor .glyph-margin {
	opacity: 0.5;
}
.monaco-editor-hover {
	background: white;
}
 .monaco-editor .suggest-widget {
	 background: #F3F3F3;
 }
.monaco-workbench .part.editor {
	 background: url('vsc-bg.png') no-repeat;
}

.monaco-editor, .monaco-editor .inputarea {
	background: none;
}

.monaco-editor-background{
	opacity: 0.5;
}

見当たらないけどとりあえずglyph-marginの部分も残しときます


なぜかアップデートしたらProgram Filesに入ってしまいましたが、そういう方はC:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench あたりにworkbench.main.cssがあると思いますのでそっちをどうぞ

他の色の場合上になんか出てます。特定が面倒だったので放置
次のバージョンでオレオレTheme追加できるらしいですし…


メモ帳の代わりにしたい理由第1位が背景がつくからです。よろしくお願いします
いやまあ普通のVSより圧倒的に軽いんでこれはよさげ

この辺で