読者です 読者をやめる 読者になる 読者になる

ぎじぶろ

技術資料をまとめていくブログ

VSCode をカスタマイズしてみる

Unity VSCode

前回、Monodevelop からVSCode に乗り換えようとしてインストールまでやってた。
tanoue1.hateblo.jp

VSCode では設定やプラグイン、キーコンフィグなどについては
デフォルト状態のまま使うには良くないので、色々とカスタマイズしてみる。

ちなみに自分の開発環境はMac で行っております。

キー設定について

Monodevelop と同じように設定したかったので、基本的によく使ってたキーを登録した。
[Code]→[基本設定]→[キーボード ショートカット]で、
keybindings.json が開くので、以下の物を設定する

// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[
	// タブ移動(左)
	{
		"key": "shift+cmd+[",
		"command": "workbench.action.previousEditor"
	},
	// タブ移動(右)
	{
		"key": "shift+cmd+]",
		"command": "workbench.action.nextEditor"
	},
	// 宣言元にジャンプ
	{
		"key": "cmd+d",
		"command": "editor.action.goToDeclaration",
		"when": "editorHasDefinitionProvider && editorTextFocus"
	},
	// 参照先の一覧表示
	{
		"key": "shift+cmd+r",
		"command": "editor.action.referenceSearch.trigger",
		"when": "editorHasReferenceProvider && editorTextFocus && !inReferenceSearchEditor"
	},
	// 行ジャンプ
	{
		"key": "cmd+l",
		"command": "workbench.action.gotoLine"
	},
	// クイックオープン
	{
		"key": "shift+cmd+d",
		"command": "workbench.action.quickOpen"
	},
	// 戻る(参照先から宣言元に行って、そこから参照先に帰りたい時)
	{
		"key": "alt+cmd+left",
		"command": "workbench.action.navigateBack"
	},
	// 進む(上記の逆バージョン)
	{
		"key": "alt+cmd+right",
		"command": "workbench.action.navigateForward" },
	// リネーム
	{
		"key": "cmd+r",
		"command": "editor.action.rename",
		"when": "editorHasRenameProvider && editorTextFocus && !editorReadonly"
	}
]

設定について

[Code]→[基本設定]→[設定]もしくは
command + , で設定が出て来る。
settings.json に以下を設定。

// Place your settings in this file to overwrite the default settings
{
	// エディターで空白文字を表示する方法を制御します。'none'、'boundary' および 'all' が使用可能です。'boundary' オプションでは、単語間の単一スペースは表示されません。
	"editor.renderWhitespace": "all",
	// リファレンスを非表示
	"editor.referenceInfos": false,
	// 入力補完を表示する
	"editor.quickSuggestions": true,
	// 入力補完の表示を何ms遅らせるか
	"editor.quickSuggestionsDelay": 0,
	// 選択範囲の角を丸くしない
	"editor.roundedSelection": false,
	// Tab キーをスペースにしない
	"editor.insertSpaces": false,
	// 改行したとき自動的にフォーマットをする
	"editor.formatOnType": false,
	// search.excludeFoldersで検索対象外にする。
	"search.excludeFolders": [
		".git",
		"Library",
		"obj",
		"Temp",
		"ProjectSettings",
		".asset"
	],
	// クイックオープンで検索する時の検索対象
	"files.exclude": {
		"**/.git": true,
		"**/.DS_Store": true,
		"**/*.meta": true,
		"**/*.*.meta": true,
		"**/*.unity": true,
		"**/*.unityproj": true,
		"**/*.mat": true,
		"**/*.fbx": true,
		"**/*.FBX": true,
		"**/*.tga": true,
		"**/*.cubemap": true,
		"**/**.prefab": true,
		"**/Library": true,
		"**/ProjectSettings": true,
		"**/Temp": true
	},
	// エディターによる折り返しをさせない
	"editor.wrappingColumn": -1,
	// エディターで左角かっこの後に自動的に右角かっこを挿入させない
	"editor.autoClosingBrackets": false,
	// エディターでコードの折りたたみを無効にする
	"editor.folding": false,
	// ファイルの読み取り/書き込みで使用する既定の文字セット エンコーディング。
	"files.encoding": "utf8bom",
	// 既定の改行文字。
	"files.eol": "\r\n",
	// ↓これを設定しないと insertSpace を false にしても無効化されない
	"editor.detectIndentation": false,
	// タブをスペースに変換させない
	"editor.useTabStops": false,
	// ワークベンチ
	// 開いているエディターをプレビューとして表示するかどうかを制御します。プレビュー エディターは、保持されている間、再利用されます (ダブルクリックまたは編集などによって)。
	"workbench.editor.enablePreview": false
}

プラグインについて

プラグインについては筆者は結構適当だったりする(汗)
https://code.visualstudio.com/Docs/runtimes/unity
https://code.visualstudio.com/docs/languages/csharp
探せばきっと色々とプラグインがあるはずなんだろうけど、
ひとまず VSCode のUnity 連携についてのページにあった

・Unity Tools
・Unity Snippets
・Debugger for Unity

と、あとはC#用のプラグインとして

C#
・Code Runner
C# XML Documentation Comments
C# Extensions

を入れていた。

色を変えてみる

やっぱり白よりは黒っぽい色(特にMonokai)が良いよね。
[Code]→[基本設定]→[配色テーマ]
の中からMonokai を選ぶ。

なんかMonodevelop のMonokai と色がちょっと違う…

自分で色を変えたい

ということで、探してみた。
VSCode ではTextMate形式のカラーテーマが利用できるそうです。
/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions
配下に、色々な色がある。

「theme-monokai」というフォルダをコピーして、「theme-monokai-custom」にリネーム。
「themes」フォルダの中にある「Monokai.tmTheme」を「Monokai-custom.tmTheme」にリネーム。
「package.json」を開いて中身を書き換える。

{
	"name": "theme-monokai-custom",
	"version": "0.1.0",
	"publisher": "vscode",
	"engines": { "vscode": "*" },
	"contributes": {
		"themes": [
			{
				"label": "Monokai-custom",
				"uiTheme": "vs-dark",
				"path": "./themes/Monokai-custom.tmTheme"
			}
		]
	}
}

あとは、Monokai-custom.tmTheme を色々といじれば色が変えられるそうで。
面倒だったら以下のサイトで tmTheme ファイルを作成できるので便利ですね。
https://tmtheme-editor.herokuapp.com

番外編 フォントも変えてみる

VSCode を入れている人たちがよく入れているフォント「Monoid」
Monoid はコーディング用のフリーフォントで、VSCode にかぎらず Monodevelop でもできる。
http://larsenwork.com/monoid/

上記のサイトからダウンロードしてきてたら「Monoid-Regular」をインストールする。
(「Monoid-Retina」という物もあったが、Regular の方が見やすかった…)
インストールしたら、settings.json に以下を設定してあげればよい。

// フォント
"editor.fontFamily": "Monoid-Regular",

番外編 起動する度に警告文が出てくる

「Some projects have trouble loading. Please review the output for more details.」
プロジェクトを立ち上げる度に上記の警告文が上部に出てくる。
調べてみたら C# プラグイン(OmniSharp)が出しているそうで、「ワーニングがいっぱいあるよ」とのこと。
どれくらいが表示される閾値になっているかわからないが、自分のプロジェクトのワーニングの数はざっと300個超。
うーん。そっ閉じ。