Visual Studio Code - アクティビティバーとサイドバー

アクティビティバーとサイドバー

アクティビティバーには、初期状態で 7 つのアイコンがあります。

エクスプローラー ([Ctrl] + [Shift] + [E])
検索 ([Ctrl] + [Shift] + [F])
ソース管理 ([Ctrl] + [Shift] + [G])
実行 ([Ctrl] + [Shift] + [D])
拡張機能 ([Ctrl] + [Shift] + [X])
アカウント
管理

追加した拡張機能によっては、アクティビティバーに更にアイコンが追加されます。アイコンは、ドラッグすることで上下を入れ替えることができます。また、アクティビティバー上で右クリックするとコンテキストメニューが表示され、アイコンの表示・非表示を切り替えることもできます。

サイドバーは [Ctrl] + [B] で表示・非表示を切り替えることができます。また、メニューから [表示] - [外観] - [サイドバーを右に移動] を選択することにより、アクティビティバーとサイドバーをウィンドウの右側に表示することもできます。

エクスプローラービュー

エクスプローラービューは、ワークスペースのファイル一覧や、エディターのファイル一覧、ファイル内のアウトラインをサイドバーに表示します。エクスプローラービューのファイル名をクリックすると、エディターにその内容が表示されます。

ワークスペースとは、開いているフォルダー群を抽象化する概念です。VSCode は、別々の場所にある複数のフォルダーを 1 つのウィンドウで同時に開くことができます。複数のフォルダーを含んだワークスペースをマルチルートワークスペースと呼びます。

複数のフォルダーを開く場合は、メニューから [ファイル] - [フォルダーを開く...] から複数のフォルダーを選択するか、フォルダーを開いた後にメニューから [ファイル] - [フォルダーをワークスペースに追加...] を実行します。[ファイル] - [名前を付けてワークスペースを保存...] を実行すると、マルチルートワークスペースの設定ファイルが保存され、次回以降も同じフォルダーを開けます。

ファイルやフォルダーの追加や削除、名前の変更などエクスプローラービューから行えます。また、ドラッグ＆ドロップによるファイルやフォルダーの移動も可能です。

コンテキストメニューでは、ファイルのエクスプローラーでの表示や、パスのコピーなどが可能です。

ファイルの比較

エクスプローラービューから 2 つのファイルを比較することもできます。ファイルを比較したい場合は、[Ctrl] キーを押しながら 2 つのファイルをクリックし、コンテキストメニューの「選択項目の比較」を選択します。

選択項目の比較を選択すると、2 つのファイルがエディターで開かれ、並べて比べることができます。

アウトラインの表示

エクスプローラービューのアウトラインビューでは、アクティブになっているエディターのファイル内のシンボルをツリー状に表示します。アウトラインをクリックすることで、エディター内を移動することができます。

シンボルとは、プログラムのソースコード内のクラス名や関数名、変数名などを指します。HTML では各種タグ、JSON ではキー名など、言語やファイルの種類によって指すものが変化します。ファイル内やワークスペースのシンボルには [Ctrl] + [Shift] + [O]、[Ctrl] + [T]、クイックオープンなどからジャンプすることができます。