ユーザーインターフェイス ¶

VS Code の UI について記す。メインウィンドウの構成は本家 Visual Studio と同様で、大まかに言えば、左側にワークスペースで扱うファイルとフォルダーを表示する Explorer, その右側に開いたファイルの内容を表示する Editor という配置を採用している。

Attention

Visual Studio Code 利用ノート冒頭の前提条件に留意すること。

基本レイアウト ¶

まずは Visual Studio Code User InterfacShoe の最初の画像に用いられている用語を頭に叩き込むこと。VS Code の画面全体を次の五つに区分して理解する：

Activity Bar: 左端にある柱状の領域。アイコンをクリックしてビューを切り替えられるほか、Git が有効な場合に保留中のファイル数など、現況に応じてアイコン右下にバッヂが表示されることもある。
(Primary) Side Bar: Activity Bar のすぐ右側の縦長領域。EXPLORER などのビュー各種を搭載する。
Editor/Editor Groups: メイン領域。縦にも横にもいくつでも Editor を並べられる。各 Editor Group に Editor が一つ以上含まれ、各グループでタブをクリックするなどして現在の Editor を切り替える。開いているファイルは、Editor 領域の上部にタブで表示される。
Panels: 初期設定かつ表示されていれば Editor/Editor Groups 領域の下にある領域。出力、デバッグ情報、エラーや警告、端末など、さまざまなパネルを表示できる。テキスト編集領域をなるべく縦方向に確保したければ非表示にしたり、メインウィンドウ右側に移動したりできる。
Status Bar: 床下にある領域。ワークスペースや現在の Editor に関する情報各種を表示する。

VS Code を開始するたびに、上記 UI 要素は前回終了時と同じ状態で配置される。レイアウトだけでなく、開いていたフォルダー、ファイルも Editor 領域に復元される。

利用者ノート

各パーツに対して表示・非表示の切り替えコマンドが存在する。特に、Activity Bar, Side Bar, Panel のそれのショートカットキーがもし設定されていれば、覚えておくと編集をより快適に編集できる。

Editor Groups の配置 ¶

既存の Editor Group の横に別の Editor Group を横または縦に追加的に開くことが可能だ。方法は複数ある：

Ctrl + \ を押して、アクティブ Editor を二分割する。
EXPLORER ビューで対象ファイルを Alt キーを押しながらクリックする。
EXPLORER ビューで対象ファイルにフォーカスを与えて次のいずれかを行う：
- Ctrl + Enter を押す。
- コンテキストメニューの Open to the Side を選択する。
Editor 右上のアイコン Split Editor Right を押す。
ファイルまたは Editor タブを Editor 領域に（どこでもいい）ドラッグ＆ドロップする。
Quick Open 一覧からファイルを選択するときに Ctrl + Enter を押す。

他のファイルを開くときはいつでも、アクティブになっている Editor がその内容を表示する。例えば Editor が二つが並んでいて、ファイル foo.cs を右側の Editor で開きたい場合、そちら側がアクティブであることを確実にしてから開くことだ。

初期設定では Editor はアクティブ Editor の右側に開かれる。設定項目 workbench.editor.openSideBySideDirection の値がこの動作を変更する。新しい Editor をアクティブ Editor の下に開くように設定することも可能だ：

{
    "workbench.editor.openSideBySideDirection": "down"
}

複数の Editor Groups を開いている場合、Ctrl キーを押しながら 1, 2, 3, … を押すことで Editor を素早く切り替えることができる。

Todo

この事項はテキスト編集基本機能で述べる程度に基本的である可能性が高い。本節の移転を検討する。

ミニマップ ¶

ミニマップは、ソースコードの概要を表現するものだ。ミニマップは Editor の右側に表示される。陰影のついた部分をクリックまたはドラッグすることで、当該部分にジャンプできる。

設定ファイル settings.json でミニマップ表示位置を左側に変更したり、完全に無効にすることも可能だ：

{
    "editor.minimap.side": "left",
    "editor.minimap.enabled": false
}

EXPLORER ¶

EXPLORER はプロジェクト内のファイルおよびフォルダーすべてを管理するのに用いる。VS Code は本家のようにワークスペースやプロジェクトを定義するファイルがあるわけではなく、ファイルとフォルダーに基づく。

VS Code でフォルダーを開くと EXPLORER にその中身がツリーコントロールで再帰的に表示される。ここでいろいろなことができる：

ファイルおよびフォルダーの作成、削除、名前を変更する
ドラッグ＆ドロップでファイルおよびフォルダを移動する

項目上のコンテキストメニューで可能な操作を確認できる。

VS Code は外部ツール、特にコマンドラインツールと非常によく連動している。VS Code で現在開いているフォルダーのコンテキストでコマンドラインツールを実行したければ、フォルダーを右クリックして Open in Command Prompt を選択する。

また、項目を右クリックして、Reveal in Explorer を選択すると、Windows Explorer でその場所に移動することができる。

既定の設定では、VS Code は EXPLORER からいくつかのフォルダーを除外する。設定項目 files.exclude を使用して、EXPLORER からファイルやフォルダーを隠すための規則を設定する（次の設定は既定値）：

{
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/Thumbs.db": true
    }
}

複数選択 ¶

EXPLORER や OPEN EDITORS ビューで複数の項目を選択することができ、それらに対してコマンドを実行できる：

Ctrl キーを押しながらマウスクリックで個別ファイル選択
Shift キーを押しながらマウスクリックで範囲選択

特に、項目を二つ選択した場合、コンテキストメニューのコマンド Select for Compare を使用して、ファイル二つの差分をすぐに見ることができる。

ツリーコントロール ¶

わかりにくいが、EXPLORER のツリーコントロールには検索とフィルターが混ざったようなナビゲーション機能がある。

ファイルをフィルターする： EXPLORER にフォーカスがある状態で、Ctrl + F キーを押してツリーの検索コントロールを開き、一致させたいファイル名の一部を入力する。すると EXPLORER 右上に、入力した内容を表示する検索コントロールが表示され、一致するファイル名がハイライト表示される。

ここで Filter アイコンをクリックすると、モードがハイライトとフィルターの間を切り替わる。 ↓ キーと ↑ キーを押す度にマッチした要素間をジャンプする。

このナビゲーション機能は、VS Code のすべてのツリーコントロールで利用可能だ。

OUTLINE ¶

OUTLINE ビューは EXPLORER の下部にある独立したセクションだ。展開すると、現在アクティブな Editor の内容を表現する木構造が表示される。

OUTLINE ビューには、さまざまな Sort By コマンドを実行でき、オプションでカーソル追跡、タイプ別フィルターが操作できる。

Todo

後者二つの機能である Follow Cursor と Filter on Type がまったく不明。

また、入力ボックスがあり、入力中にシンボルを検索したり、フィルターしたりすることができる。エラーや警告も OUTLINE ビューに表示され、問題の場所を一目で確認することができる。

木構造は Editor に対する言語モード拡張機能が持っている情報に依存する。例えば組み込みの Markdown モードは文書のヘッダー階層を返す。

OUTLINE には次のような設定項目があり、アイコンの有効無効、エラーと警告の表示の制御が可能だ。

outline.icons: 項目先頭のアイコンを描くかどうか
outline.problems.enabled: 項目にエラーと警告を示すかどうか
outline.problems.badges: エラーと警告に対してバッヂを使うかどうか
outline.problems.colors: エラーと警告に対して色を使うかどうか

OPEN EDITORS ¶

EXPLORER の上部には OPEN EDITORS と表示されたビューがある。アクティブなファイルまたはプレビューの一覧だ。これらは最近 VS Code で開いた作業中のファイルだ。例えば、次のような場合、OPEN EDITORS の一覧にファイルが現れる：

ファイルに変更を加える
ファイルのヘッダをダブルクリックする
エクスプローラでファイルをダブルクリックする
現在のフォルダにないファイルを開く

このビューの項目をクリックすると、そのファイルを内容とする Editor がアクティブになる。

作業が完了したら、OPEN EDITORS からファイルを個別に削除するか、次のいずれかのコマンドを実行してすべてのファイルを削除する：

View: Close All Editors
View: Close All Editors in Group

このビューを表示したくない場合は設定を編集する：

{
    "explorer.openEditors.visible": 0
}

ビュー ¶

VS Code には EXPLORER 以外にも次のようなビューがある：

SEARCH: ワークスペース全体の検索と置換処理
SOURCE CONTROL: Git 操作
RUN AND DEBUG: 変数、コールスタック、ブレイクポイントなどのデバッグ
EXTENSIONS: VS Code 拡張機能に対するインストールと構成

その他、拡張機能が独自のビューを与えることもある。

コマンド View: Open View を実行すればどのビューでも開ける。

メインビューの中からビューの表示状態を切り替えたり、ドラッグ＆ドロップで並び替えたりすることが可能だ。

Activity Bar ¶

ビュー左側にある Activity Bar にあるアイコンをクリックするとビューをすばやく切り替えられる。また、Activity Bar 上でアイコンをドラッグ＆ドロップして並び替えたり、アイコンのコンテキストメニューからビューを削除することも可能だ。

Activity Bar 自身を Hide from Activity Bar で非表示にすることも可能だ。

利用者ノート

Activity Bar を完全に隠蔽して、主要なビュー表示を切り替えるのにショートカットキーを押すのが通好みだろう。

キーバインド	ビュー
`Ctrl` + `Shift` + `D`	RUN AND DEBUG
`Ctrl` + `Shift` + `E`	EXPLORER
`Ctrl` + `Shift` + `F`	SEARCH
`Ctrl` + `Shift` + `G`	SOURCE CONTROL
`Ctrl` + `Shift` + `X`	EXTENSIONS

コマンドパレット ¶

VS Code で最も重要なキーバインドは、Ctrl + Shift + P だ。これはコマンド Show All Commands を実行するショートカットであり、この操作により画面上部に現れる入力欄をコマンドパレットと呼ぶ。ここから VS Code のコマンドすべてを一覧したり選択することが可能であり、定義があればコマンドを呼び出すキーバインドも表示される。

Todo

コマンドパレットは掛け値なしに重要な要素なので、VS Code 利用ノートの可能な限り早い位置に移動する。

コマンドパレットは次のコマンドなどでも入力を受け付けるために用いられる：

キーバインド	コマンド	操作
`Ctrl` + `P`	Go to File…	名前を指定してファイルへジャンプ
`Ctrl` + `Tab`	View: Quick Open Previous Recently Used Editor in Group	現在の Editor Group 内で直前のものにジャンプ
`Ctrl` + `Shift` + `P`	Show All Commands	上述
`Ctrl` + `Shift` + `O`	Go to Symbol in Editor	指定シンボルへジャンプ
`Ctrl` + `G`	Go to Line/Column…	指定行へジャンプ

入力欄先頭に ? を入力すると、ここから実行できるコマンド一覧が出る。これは別の機会に調べる。

タブ ¶

Editor Group のタブについて記す。Editor にはタブが一対一対応する。タブをクリックすると対応する Editor がアクティブになる。タブを用いれば Editor 間をすばやく移動できる。タブをドラッグ＆ドロップして順序を変更することができる。Editor Group をまたぐ移動さえ可能だ。

Editor Group 右上の詳細ボタンメニューから Show Opened Editors を選択すると、当グループに含まれる Editor すべての一覧が現れる。

タブを使いたくない場合は次のように設定する：

{
    "workbench.editor.showTabs": false
}

タブ順序 ¶

新しいタブは既存のタブの右側に順次追加されるが、この挙動を設定項目 workbench.editor.openPositioning の値で制御可能だ。例えば、新しいタブを左側に表示させたいならば：

{
    "workbench.editor.openPositioning": "left"
}

プレビューモード ¶

EXPLORER でシングルクリックでファイルを選択すると、そのファイルはプレビューモードで表示される。このとき、既存の Editor を再利用する。ファイルを素早く閲覧しているときに、訪問したファイルすべてに独自の Editor を持たせたくない場合には有用だ。ファイルの編集を開始したり、ダブルクリックでファイルを開いたりすると、そのファイル専用の新しい Editor が生成する。

プレビューモードの Editor では、タブのラベルがイタリックで描画される。

プレビューモードを使用せず、常に新しい Editor を作成したい場合、次の設定で挙動を制御する：

workbench.editor.enablePreview: プレビューモードの有効性を指定する。
workbench.editor.enablePreviewFromCodeNavigation: コードナビゲーションが開始するときに、Editor をプレビューモードのままにしておくかどうかを指定する。プレビューは開いたままにはならず、明示的に開きっぱなしにされない限りはその Editor は再利用されることになる。
workbench.editor.enablePreviewFromQuickOpen: Quick Open からファイルを開くときのプレビュー Editor の有効性を指定する。

下二つの設定は workbench.editor.enablePreview を false にしているときにはまったく無視される。

利用者ノート

複数ファイルを同時に閲覧したい利用状況を考慮していない概念のようなので、無効にしているがどうだろう。

Editor Groups ¶

Editor を分割すると、Editor Group という Editor のコンテナーが新たに生成する。このグループが占める領域を、縦方向と横方向にいくつでも並べて形成することが可能だ。

EXPLORER ビューの上部にある OPEN EDITORS セクションでこれらを確認することができる。

利用者ノート

OPEN EDITORS が見当たらない場合、次の設定項目の値を確認すること：

explorer.openEditors.minVisible
explorer.openEditors.visible

Editor Group をワークベンチにドラッグ＆ドロップしたり、グループ間で個々の Editor を移動したり、グループ全体を素早く閉じたりすることが可能だ。

VS Code ではタブを有効にしているかどうかに関わらず、Editor Group が成立する。タブがない場合、Editor Group は開いている Editor のスタックとなり、最近選択されたものが Editor 区域に表示される。

Editor に対するグリッドレイアウト ¶

Editor を分割すると横に開くので、Editor Groups は水平方向に増えていく。これは既定の挙動であり、Editor Groups は縦にも横にも好きにレイアウト可能だ。

柔軟なレイアウトを実現するために、空の Editor Group を作成することができる。通常は、Editor Group にある最後の Editor を閉じるとグループ自体も閉じるが、設定項目 workbench.editor.closeEmptyGroups の値で閉じないように動作を変更できる。

メニュー View ‣ Editor Layout を見ると、定義済みレイアウト各種を確認できる。

キーボードだけで Editor レイアウトを調整するキーボードコマンドはたくさんあるものの、タブのドラッグ＆ドロップで Editor を望む方向に分割するのが手っ取り早い。

Editor Group 右上の分割アイコンに Alt キーを押しながらマウスホバーすると、アイコンイメージの水平と垂直が切り替わり、発動するコマンドもそれに対応して変化する。

ショートカットキー ¶

Editor および Editor Group 間を迅速にナビゲートするコマンドに対する既定キーバインドを記す。マウスでタブをクリックするよりも早い場合が多い。

キーバインド	操作
`Ctrl` + `PageDown`	次の Editor へ行く
`Ctrl` + `PageUp`	前の Editor へ行く
`Ctrl` + `Tab`	Editor Group で最近使われた Editor へ行く
`Ctrl` + `1`	いちばん左の Editor Group へ行く
`Ctrl` + `2`	中央の Editor Group へ行く
`Ctrl` + `3`	いちばん右の Editor Group へ行く
`Ctrl` + `W`	現在いる Editor を閉じる
`Ctrl` + `K` `W`	Editor Group にある Editor すべてを閉じる
`Ctrl` + `K` `Ctrl` + `W`	Editor すべてを閉じる

タブを一切使わずに作業する ¶

タブを画面から抹消して作業しているときの話題を記す。

利用者ノート

上級者向けのスタイルなので、真似しなくていい。

プレビューモードを無効にする ¶

タブなしで済ます場合、EXPLORER の OPEN EDITORS セクション上の操作がファイルナビゲーションを行うための素早い方法となる。プレビューモードでは、シングルクリックでファイルを開いても、OPEN EDITOR 内にも Editor Group にもそれは追加されない。次の設定項目でこの挙動を無効にできる：

workbench.editor.enablePreview
workbench.editor.enablePreviewFromQuickOpen

全 Editor 履歴上ナビゲーション ¶

Ctrl + Tab のキーバインドを変更し、Editor Group とは関係なく、履歴から開いているすべての Editor を一覧表示することができる。次のコマンドにバインドする：

workbench.action.openPreviousEditorFromHistory
workbench.action.quickOpenNavigateNext

単一 Editor というより Editor Group 全体を閉じる ¶

Editor を一つを閉じるときに Editor Group 全体を閉じるという動作が気に入った場合は、コマンド workbench.action.closeEditorsInGroup を実行する。

メインウィンドウ ¶

プロセス間でウィンドウ（インスタンス）を開いたり復元したりする方法を制御する。以下、VS Code 起動時にコマンドラインオプション --new-window も --reuse-window も指定されないとする。

設定項目 window.openFoldersInNewWindow や window.openFilesInNewWindow はファイルやフォルダーに対して新しいウィンドウを開くか、最後にアクティブだったウィンドウを再利用するかを決定する。可能な値は default, on, off のいずれかだ。

値が default に設定されている場合、ウィンドウを開く要求が行われた場所のコンテキストに基づいて、ウィンドウを再利用するかどうかが決定される。

値を on または off に設定すると、常に同じ動作をするようになる。例えば、ファイルメニューからファイルやフォルダを選ぶといつでも新しいウィンドウでなるべく開く場合は、値を on にすればいい。

設定項目 window.restoreWindows は、以前のセッションで開いたウィンドウをどのように復元するかを VS Code に指示する。既定では VS Code は前回のセッションで作業したすべてのウィンドウを復元する。この設定を none に変更すると、ウィンドウを一切開かず、常に空の VS Code インスタンスで開始する。1 に変更すると、最後に開いたウィンドウやフォルダーを開き、フォルダーが開いているウィンドウしか復元しない。