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]、クイックオープンなどからジャンプすることができます。

フィルタリング

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

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

フィルタリングによる強調表示
フィルタリングによる強調表示

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

ファイル・フォルダのフィルタリング
ファイル・フォルダのフィルタリング

検索ビュー

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

検索ビュー
検索ビュー

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

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

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

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

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

ソース管理ビュー

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

ソース管理ビュー
ソース管理ビュー

デバッグビュー

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

デバッグビュー
デバッグビュー

拡張機能ビュー

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

拡張機能ビュー
拡張機能ビュー

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

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

インストール済みの拡張機能をすべて無効・有効にする
インストール済みの拡張機能をすべて無効・有効にする

関連記事