Visual Studio Codeをインストール後に最初に設定したいこと

Microsoftが提供している無料のテキストエディター「Visual Studio Code（以下vscode）」をインストールしたら、最初に設定したいことをまとめました。

見た目の変更から、細かい設定まで解説しているので、最近vscodeをインストールされた方はぜひ参考にしてみて下さい。

画面の説明
エディタの見た目を変更する
環境設定の変更
キーボードショートカット
おすすめ拡張機能とユーザースニペット
まとめ

画面の説明

画面左側に表示される内容は、サイドバーのどのアイコンを選択しているかによって変わります。

現在開いているフォルダ
ファイルや単語の検索や置換
現在開いているフォルダがバージョン管理システム対象の場合、GUIで操作出来る
コードのデバッグ（あまり使わない）
拡張機能の管理

また、上記画像の⑥の歯車のアイコンをクリックすると、VSCodeの様々な設定を変更することが出来ます。

エディタの見た目を変更する

テーマの変更

VSCodeにはデフォルトでテーマがいくつか入っています。私は「Monokai」にしています。

ダーク系のテーマのほうが目が疲れなくておすすめです。

テーマは以下から変更することが出来ます。

画面左下の歯車マーク > 配色テーマ

ファイルのアイコンの変更

以下の様にファイルに拡張子ごとのアイコンを設定することが出来ます。

こちらもテーマの変更と同様、歯車マークから変更することが出来ます。

画面左下の歯車マーク > ファイルアイコンのテーマ

インデントの変更

インデントをタブ、もしくはスペースにする設定です。

画面下部のメニューバーの「タブ（もしくはスペース）のサイズ: ◯」をクリックします。以下画像の場合は、「タブのサイズ: 4」の箇所をクリックします。
「スペースによるインデント」か「タブによるインデント」を選択します。
その後、［Tab］キーをクリックした時に、スペース何個分にするかを聞かれるので、それを選択したら設定完了です。

環境設定の変更

環境設定は以下から、もしくは［Command］＋［,］で開けます。

メニューバー > Code > 基本設定 > 設定

環境設定を開くと、以下のように画面が2分割されて表示されます。

左側は元の設定ファイルです。こちらはエディタ上で直接編集することは出来ません。

右側のファイルで、左側のファイルの設定を上書きして設定を変更します。

また、メニューバーなどで設定を変更した場合も、右側のファイルに自動的に記述されます。なので、「まだ何も設定ファイルを触ってないのに何故か既にいろいろ書かれている・・・」という場合はこれが原因です。

新しく設定を記述したのに反映されない主な理由は、カンマが正しく付けられていない場合が多いです。

下記は、正しいカンマの付け方です。

// 正しい記述
{
	"editor.fontSize": 14,

	"editor.tabSize": 4,

	"editor.insertSpaces": false // ← 最後はカンマを記述しない
}

// 間違っている記述
{
	"editor.fontSize": 14,

	"editor.tabSize": 4,

	"editor.insertSpaces": false, // ← 最後なのにカンマを記述している
}

// 間違っている記述
{
	"editor.fontSize": 14 // ← 途中なのにカンマを記述していない

	"editor.tabSize": 4,

	"editor.insertSpaces": false
}

そして、下記は私の環境設定ファイルになります。

{
	// フォント サイズをピクセル単位で制御します。
	"editor.fontSize": 14,

	// 1つのタブに相当するスペースの数。`editor.detectIndentation` がオンの場合、この設定はファイル コンテンツに基づいて上書きされます。
	"editor.tabSize": 4,

	//インデントのデフォルト値 true:スペース, false:タブ
	"editor.insertSpaces": false,

	// ファイルを開くと、そのファイルの内容に基づいて `editor.tabSize` と `editor.insertSpaces` が検出されます。
	"editor.detectIndentation": false,

	// エディターで空白文字を表示する方法を制御します。'none'、'boundary' および 'all' が使用可能です。'boundary' オプションでは、単語間の単一スペースは表示されません。
	"editor.renderWhitespace": "all",

	// 有効にすると、TAB キーを押したときに Eemmet 省略記法が展開されます。
	"emmet.triggerExpansionOnTab": true,

	// 指定した構文に対してプロファイルを定義するか、特定の規則がある独自のプロファイルをご使用ください。
	"emmet.syntaxProfiles": {
		"php": "html"
	},

	// ユーザー定義スニペットを優先的（上位）に表示させる
	"editor.snippetSuggestions": "top",

	// Git が有効になっているかどうか
	// falseでGitを利用しない 重い場合はfalse推奨
	"git.enabled": false,

	// 行の折り返し方法を制御します。次の値を指定できます。
	//  - 'off' (折り返さない),
	//  - 'on' (ビューポート折り返し),
	//  - 'wordWrapColumn' ('editor.wordWrapColumn' で折り返し) or
	//  - 'bounded' (ビューポートと 'editor.wordWrapColumn' の最小値で折り返し).
	"editor.wordWrap": "on",

	// 言語に対するファイルの関連付け (例 "*.extension": "html") を構成します。これらの関連付けは、インストールされている言語の既定の関連付けより優先されます。
	"files.associations": {
		"*.php": "html"
	},

	// 有効な場合、ファイルを開くときに文字セット エンコードを推測します。言語ごとに構成することも可能です。
	"files.autoGuessEncoding": true,

	"workbench.startupEditor": "newUntitledFile",
	"workbench.colorTheme": "Monokai",
	"editor.multiCursorModifier": "ctrlCmd",
	"window.zoomLevel": 0,

	// Auto Rename Tag （拡張機能）
	"auto-rename-tag.activationOnLanguage": [
		"php",
		"html"
	],

	// TODO-HIGHLIGHT （拡張機能）
	// 機種依存文字をハイライト
	"todohighlight.keywords": [
		"Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ", "Ⅴ", "Ⅵ", "Ⅶ", "Ⅷ", "Ⅸ", "Ⅹ", "ⅰ", "ⅱ", "ⅲ", "ⅳ", "ⅴ", "ⅵ", "ⅶ", "ⅷ", "ⅸ", "ⅹ", "①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㊤", "㊥", "㊦", "㊧", "㊨", "㍉", "㍍", "㌔", "㌘", "㌧", "㌦", "㍑", "㌫", "㌢", "㎝", "㎏", "㎡", "㏍", "℡", "№", "㍻", "㍼", "㍽", "㍾", "㈱", "㈲", "㈹", "〜", "—", "⺀", "⺁", "⺂", "⺃", "⺄", "⺅", "⺆", "⺇", "⺈", "⺉", "⺊", "⺋", "⺌", "⺍", "⺎", "⺏", "⺐", "⺑", "⺒", "⺓", "⺔", "⺕", "⺖", "⺗", "⺘", "⺙", "⺚", "⺛", "⺜", "⺝", "⺞", "⺟", "⺠", "⺡", "⺢", "⺣", "⺤", "⺥", "⺦", "⺧", "⺨", "⺩", "⺪", "⺫", "⺬", "⺭", "⺮", "⺯", "⺰", "⺱", "⺲", "⺳", "⺴", "⺵", "⺶", "⺷", "⺸", "⺹", "⺺", "⺻", "⺼", "⺽", "⺾", "⺿", "⻀", "⻁", "⻂", "⻃", "⻄", "⻅", "⻆", "⻇", "⻈", "⻉", "⻊", "⻋", "⻌", "⻍", "⻎", "⻏", "⻐", "⻑", "⻒", "⻓", "⻔", "⻕", "⻖", "⻗", "⻘", "⻙", "⻚", "⻛", "⻜", "⻝", "⻞", "⻟", "⻠", "⻡", "⻢", "⻣", "⻤", "⻥", "⻦", "⻧", "⻨", "⻩", "⻪", "⻫", "⻬", "⻭", "⻮", "⻯", "⻰", "⻱", "⻲", "⻳", "⼀", "⼁", "⼂", "⼃", "⼄", "⼅", "⼆", "⼇", "⼈", "⼉", "⼊", "⼋", "⼌", "⼍", "⼎", "⼏", "⼐", "⼑", "⼒", "⼓", "⼔", "⼕", "⼖", "⼗", "⼘", "⼙", "⼚", "⼛", "⼜", "⼝", "⼞", "⼟", "⼠", "⼡", "⼢", "⼣", "⼤", "⼥", "⼦", "⼧", "⼨", "⼩", "⼪", "⼫", "⼬", "⼭", "⼮", "⼯", "⼰", "⼱", "⼲", "⼳", "⼴", "⼵", "⼶", "⼷", "⼸", "⼹", "⼺", "⼻", "⼼", "⼽", "⼾", "⼿", "⽀", "⽁", "⽂", "⽃", "⽄", "⽅", "⽆", "⽇", "⽈", "⽉", "⽊", "⽋", "⽌", "⽍", "⽎", "⽏", "⽐", "⽑", "⽒", "⽓", "⽔", "⽕", "⽖", "⽗", "⽘", "⽙", "⽚", "⽛", "⽜", "⽝", "⽞", "⽟", "⽠", "⽡", "⽢", "⽣", "⽤", "⽥", "⽦", "⽧", "⽨", "⽩", "⽪", "⽫", "⽬", "⽭", "⽮", "⽯", "⽰", "⽱", "⽲", "⽳", "⽴", "⽵", "⽶", "⽷", "⽸", "⽹", "⽺", "⽻", "⽼", "⽽", "⽾", "⽿", "⾀", "⾁", "⾂", "⾃", "⾄", "⾅", "⾆", "⾇", "⾈", "⾉", "⾊", "⾋", "⾌", "⾍", "⾎", "⾏", "⾐", "⾑", "⾒", "⾓", "⾔", "⾕", "⾖", "⾗", "⾘", "⾙", "⾚", "⾛", "⾜", "⾝", "⾞", "⾟", "⾠", "⾡", "⾢", "⾣", "⾤", "⾥", "⾦", "⾧", "⾨", "⾩", "⾪", "⾫", "⾬", "⾭", "⾮", "⾯", "⾰", "⾱", "⾲", "⾳", "⾴", "⾵", "⾶", "⾷", "⾸", "⾹", "⾺", "⾻", "⾼", "⾽", "⾾", "⾿", "⿀", "⿁", "⿂", "⿃", "⿄", "⿅", "⿆", "⿇", "⿈", "⿉", "⿊", "⿋", "⿌", "⿍", "⿎", "⿏", "⿐", "⿑", "⿒", "⿓", "⿔", "⿕"
	]
}

キーボードショートカット

vscodeではキーボードショートカットに割り当てるキーを自由に手軽に設定することが出来ます。

キーボードショートカットとは、［Command］+［c］でテキストをコピーでお馴染みのあの機能です。

以下から設定ウィンドウを開きます。

メニューバー > Code > 基本設定 > キーボードショートカット

変更したいコマンドの行をダブルクリック、または左側に表示されている鉛筆マークをクリックするとキーの変更が出来ます。

また、この画面で変更した内容は自動的にkeybindings.jsonに追記されます。

以下は私のkeybindings.jsonです。

// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[
	// 次の入力箇所に移動
	{
		"key": "alt+cmd+right",
		"command": "editor.emmet.action.nextEditPoint"
	},
	// 前の入力箇所に移動
	{
		"key": "alt+cmd+left",
		"command": "editor.emmet.action.prevEditPoint"
	},
	// 選択文字列の次の出現箇所
	{
		"key": "cmd+b",
		"command": "editor.action.addSelectionToNextFindMatch",
		"when": "editorFocus"
	},
	// ワークスペースを開く
	{
		"key": "alt+cmd+o",
		"command": "workbench.action.openWorkspace"
	},
	// 行を下にコピー
	{
		"key": "cmd+d",
		"command": "editor.action.copyLinesDownAction",
		"when": "editorTextFocus && !editorReadonly"
	},
	// カーソルを下に追加
	{
		"key": "shift+alt+down",
		"command": "-editor.action.copyLinesDownAction",
		"when": "editorTextFocus && !editorReadonly"
	},
	// 次のタブに移動
	{
		"key": "alt+cmd+]",
		"command": "workbench.action.nextEditor"
	},
	// 前のタブに移動
	{
		"key": "alt+cmd+[",
		"command": "workbench.action.previousEditor"
	},
	{
		"key": "shift+cmd+]",
		"command": "-workbench.action.nextEditor"
	},
	{
		"key": "shift+cmd+[",
		"command": "-workbench.action.previousEditor"
	},
	{
		"key": "cmd+[IntlRo]",
		"command": "-workbench.action.zoomOut"
	},
	// エディタの画面を分割
	{
		"key": "alt+/",
		"command": "workbench.action.splitEditor"
	},
	// 分割した画面のレイアウトの「上下」「左右」を変更
	{
		"key": "alt+[IntlRo]",
		"command": "workbench.action.toggleEditorGroupLayout"
	},
	{
		"key": "ctrl+alt+cmd+[IntlYen]",
		"command": "-workbench.action.splitEditor"
	}
]