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

エクスプローラービュー

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

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

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

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

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

ファイルの比較

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

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

アウトラインの表示

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

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

フィルタリング

エクスプローラービューに表示されているドキュメントツリーに対してフィルタリングを行うことができます。フィルタリングを行うには、エクスプローラービューをクリックし、任意の文字列をキー入力します。

エクスプローラービューの右上にフィルターボックスが表示され、入力した文字列が表示されます。一致するファイル名は強調表示されます。

フィルタボックスにカーソルを合わせて「型のフィルターを有効にする」アイコンをクリックすると、一致するファイル・フォルダのみが表示されます。「型のフィルターを無効にする」アイコン、または「閉じる」アイコンをクリックするとフィルターがクリアされます。

外部リンク

• Basic Editing in Visual Studio Code - Filtering the document tree
  https://code.visualstudio.com/docs/getstarted/userinterface#_filtering-the-document-tree

検索ビュー

検索ビューでは、ワークスペース全体の検索と置換ができます。正規表現の使用や、含めるファイル、除外するファイルなどの指定も可能です。検索結果からは、各ファイルの一致した場所にジャンプすることができます。

含めるファイル・除外するファイル

検索する対象を限定したい場合は、「含めるファイル」にファイル名や、ファイルの拡張子などを指定します。除外するファイルの場合も同様です。

これらの指定方法には、以下のオプションが使用可能です。また、複数指定する場合は、カンマで区切って指定します。

• * : パスセグメント内の 1 つ以上の文字に一致する
• ? : パスセグメント内の 1 つの文字に一致する
• ** : 0 を含む任意の数のパスセグメントに一致する
• {} : 条件をグループ化する (例えば {**/*.html, **/*.css} など)
• [] : 一致する文字の範囲を指定する (例えば file[1-5].txt など)

外部リンク

• Basic Editing in Visual Studio Code - Advanced search options
  https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options

ソース管理ビュー

Git に関する機能を VSCode 上で使用することができます。拡張機能をインストールすることで、Git 以外のソース管理システムを使用することも可能です。Git を使用したソース管理は別ページで説明します。

デバッグビュー

デバッガと連携し、ブレークポイントを使ったプログラムのステップ実行や、変数やコールスタックなどの表示が可能です。各プラットフォームのデバッガは、拡張機能で追加できます。デバッグについては別ページで説明します。

拡張機能ビュー

拡張機能のインストールや管理を行うことができます。

拡張機能には、新しいコマンドを追加するものや各開発言語用のインテリセンス、スニペット、デバッガを追加するだけでなく、コンテナや Azure コマンドのような外部環境と連携するもの、VSCode の外観を変更するテーマなども含まれます。

インストール済みの拡張機能をすべて無効・有効にするなどの操作も可能です。