カスタムレイアウト

Visual Studio Code は、シンプルなユーザーインターフェースと便利なデフォルトレイアウトを備えています。同時に、VS Code には、自分の好みに合わせて UI レイアウトをカスタマイズできるオプションと設定が用意されています。このトピックでは、ビュー、エディター、パネルを最も生産的な方法で表示できるように、さまざまな UI カスタマイズについて説明します。

この記事では、最初にサイドバー、ビュー、パネルなどの UI 要素を再配置するための ワークベンチ のカスタマイズについて説明します。記事の後半では、エディターグループ、分割エディター、エディタータブによる エディター領域のカスタマイズについて説明します。

ワークベンチ

プライマリサイドバー

デフォルトでは、プライマリサイドバーはワークベンチの左側に配置され、エクスプローラー、検索、ソース管理などのビューが表示されます。アクティビティバーのアイコンを選択すると、ビューをすばやく切り替えることができます。

プライマリサイドバーの位置を変更するには、次の操作を実行できます。

• アクティビティバーを右クリックし、[プライマリサイドバーを右に移動] を選択します
• [表示: プライマリサイドバーの位置を切り替え] を実行して、プライマリサイドバーを右または左に切り替えます
• [表示] > [外観] > [プライマリサイドバーを右に移動] メニュー項目を使用します
• 設定エディターで、[ワークベンチ > サイドバー: 場所] (workbench.sideBar.location) 設定を right に設定します

セカンダリサイドバー

デフォルトでは、VS Code はエディター領域の左側にあるプライマリサイドバーにビューを表示します。2つのビューを同時に開いて表示すると便利な場合があります。これを行うには、[セカンダリサイドバー] を使用して、プライマリサイドバーの反対側にビューを表示できます。セカンダリサイドバーは、プライマリサイドバーの位置を切り替えたかどうかに関係なく、常にプライマリサイドバーの反対側に配置されます。

次の図は、プライマリサイドバーのエクスプローラービューと、セカンダリサイドバーの Copilot チャットビューを示しています。

セカンダリサイドバーを表示するには、VS Code タイトルバーのレイアウトコントロールを使用できます。レイアウトコントロールが表示されない場合は、VS Code タイトルバーを右クリックし、[レイアウトコントロール] を選択します。

または、次のようにセカンダリサイドバーを開くこともできます。

• [表示: セカンダリサイドバーの表示/非表示を切り替え] コマンドを実行します (または ⌥⌘B (Windows, Linux Ctrl+Alt+B) を押します)
• [表示] > [外観] > [セカンダリサイドバー] メニュー項目を使用します

いつでも、ビューとパネルをプライマリまたはセカンダリサイドバーにドラッグアンドドロップできます。VS Code は、セッション全体でビューとパネルのレイアウトを記憶します。

アクティビティバーの位置

デフォルトでは、アクティビティバーはプライマリサイドバーとともに移動し、ワークベンチの外側の端にあります。アクティビティバーを非表示にしたり、プライマリサイドバーの上部または下部に移動したりすることもできます。

[アクティビティバーの位置] メニューは、アクティビティバーのコンテキストメニュー、または [表示] > [外観] > [アクティビティバーの位置] の下にあり、[デフォルト]、[上]、[下]、または [非表示] のオプションがあります。

アクティビティバーが上または下の位置にある場合、通常はアクティビティバーの下部にある [アカウント] ボタンと [管理] ボタンは、タイトルバーの右側に移動します。

パネル

パネル領域には、[問題]、[ターミナル]、[出力] パネルなどの UI 要素が表示され、デフォルトではエディター領域の下にあります。

パネルの位置

領域をエディターの左、右、下、または上に移動できます。これらのオプションは、[表示] > [外観] > [パネルの位置] のメニュー、またはパネルのタイトルバーのコンテキストメニューで構成できます。

コマンドパレットで [パネルの移動] コマンドを使用することもできます

• [表示: パネルを左に移動] (workbench.action.positionPanelLeft)
• [表示: パネルを右に移動] (workbench.action.positionPanelRight)
• [表示: パネルを下部に移動] (workbench.action.positionPanelBottom)
• [表示: パネルを上部に移動] (workbench.action.positionPanelTop)

パネルの配置

このオプションを使用すると、下部のパネルがウィンドウ全体にどの程度広がるかを構成できます。次の 4 つのオプションがあります

• [中央] - これはデフォルトの動作です。パネルはエディター領域の幅のみをカバーします。
• [両端揃え] - パネルはウィンドウの全幅をカバーします。
• [左] - パネルはウィンドウの左端からエディター領域の右端までをカバーします。
• [右] - パネルはウィンドウの右端からエディター領域の左端までをカバーします。

すべてのパネル配置オプションでは、アクティビティバーがウィンドウの端と見なされます。

これらのオプションは、[表示] > [外観] > [パネルの配置] のメニュー、パネルタイトルのコンテキストメニュー、または新しい [パネルの配置を...に設定] コマンドを使用して構成できます。

パネルサイズの最大化

パネルの配置が [中央] の場合、パネル領域の右上にある [パネルサイズの最大化] シェブロンボタンを使用すると、パネル領域をすばやく切り替えてエディター領域全体を埋めることができます。シェブロンボタンは、最大化されたパネルでは下向きになり、パネルを元のサイズに戻します。

[表示: 最大化されたパネルの切り替え] コマンドを使用して、パネル領域を最大化することもできます。

注: パネル領域全体の表示をカスタマイズするだけでなく、個々のパネルに独自のレイアウトカスタマイズがある場合があります。たとえば、ターミナルでは、複数のタブを開くことや、既存のターミナルを分割することができます。

レイアウトコントロールのカスタマイズ

VS Code タイトルバーには、主要な UI 要素 (サイドバーとパネル領域) の表示/非表示を切り替えるボタンもあります。

右端のボタンをクリックすると、[レイアウトのカスタマイズ] ドロップダウンが表示されます。ここでは、さまざまな UI 要素の表示/非表示とレイアウトをさらに変更でき、いくつかのレイアウトモードが含まれています

レイアウトモードは次のとおりです。

• [全画面表示] - エディターをディスプレイ画面全体に表示します。[表示: 全画面表示を切り替え] (⌃⌘F (Windows, Linux F11))。
• [禅モード] - エディター領域を除くすべての UI を非表示にします。[表示: 禅モードの切り替え] (⌘K Z (Windows, Linux Ctrl+K Z))。
• [中央配置レイアウト] - エディター領域内でエディターを中央に配置します。[表示: 中央配置レイアウトの切り替え]。

ビューとパネルのドラッグアンドドロップ

VS Codeでは、プライマリーサイドバーとパネル領域にビューとパネルのデフォルトレイアウトがありますが、これらの領域間でビューやパネルをドラッグアンドドロップできます。たとえば、ソース管理ビューをパネル領域にドラッグアンドドロップしたり、問題パネルをプライマリーサイドバーに配置したりできます。

注：ビューやパネルをデフォルトの場所にリセットするには、コンテキストメニューの [場所をリセット] 項目を使用するか、すべてのビューとパネルをリセットするには、汎用的な [表示: ビューの場所をリセット] コマンドを使用できることを覚えておいてください。

既存のビューまたはパネルにビューやパネルを追加して、グループを作成することもできます。たとえば、[出力] パネルを [エクスプローラー] アクティビティバー項目にドラッグし、ビューにドロップして、[エクスプローラー] ビューグループに移動できます。

ビューやパネルの移動にマウスを使用する必要はありません。キーボードを使用して [表示: ビューを移動] コマンドと [表示: フォーカスされたビューを移動] コマンドでレイアウトをカスタマイズすることもできます。ドロップダウンで、移動する UI 要素と、サイドバーやパネル領域などの場所、またはグループを作成するための既存のビューやパネルを選択できます。

ツールバー

ほとんどの VS Code のビューとパネルには、UI の右上部にツールバーが表示されます。たとえば、検索ビューには、[更新]、[検索結果をクリア] などのアクションを含むツールバーがあります。

ツールバーの項目を非表示にする

ツールバーが混雑していて、使用頻度の低いアクションを非表示にしたい場合は、任意のアクションを右クリックして、[非表示] コマンド (例: [「検索結果をクリア」を非表示にする]) を選択するか、ドロップダウンからアクションのチェックを外します。非表示のアクションは ... [その他のアクション] メニューに移動され、そこから呼び出すことができます。

アクションをツールバーに復元するには、ツールバーボタン領域を右クリックして [メニューをリセット] コマンドを選択するか、非表示のアクションを再度チェックします。VS Code のすべてのメニューを復元するには、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から [表示: すべてのメニューをリセット] を実行します。

エディター

ワークベンチのユーザーインターフェースとは別に、VS Code エディター領域のレイアウトをカスタマイズできます。デフォルトでは、エディター領域にはミニマップ、ブレッドクラム、エディタータブなどの便利な機能が表示され、スティッキースクロールなどのオプションの UI があります。エディター自体のレイアウトを調整したり、フローティングウィンドウに移動したりすることもできます。

ミニマップとブレッドクラム

[表示] > [外観] メニューには、エディター領域をカスタマイズするためのセクションがあります。そこに、次のトグルがあります。

• ミニマップ - 現在のファイルの 視覚的な概要。[表示: ミニマップの切り替え]。
• ブレッドクラム - アクティブなファイルの フォルダー、ファイル、および現在のシンボルの情報を表示します。[表示: ブレッドクラムの切り替え]。
• スティッキースクロール - アクティブなファイルで ネストされたシンボルのスコープを表示します。[表示: スティッキースクロールの切り替え]。

エディターグループ

デフォルトでは、開いた各エディターは同じ [エディターグループ] に入り、右側に新しいエディタータブを追加します。類似または関連するファイルをグループ化したり、同じファイルの 並列編集を可能にするために、新しいエディターグループを作成できます。エディターを横にドラッグするか、コンテキストメニューの [分割] コマンドのいずれかを使用して、現在のエディターを新しいエディターグループに複製することで、新しいエディターグループを左、右、上、または下に作成できます。

[分割] エディターコマンドは、[表示] > [エディターレイアウト] メニューとコマンドパレットからも使用できます。

垂直および水平のエディターグループレイアウト間をすばやく移動したい場合は、[垂直/水平エディターレイアウトの切り替え] コマンド (⌥⌘0 (Windows, Linux Shift+Alt+0)) を使用できます。

グループ内の分割

[表示: グループ内のエディターを分割] コマンド (⌘K ⇧⌘\ (Windows, Linux Ctrl+K Ctrl+Shift+\)) を使用して、同じグループ内のエディターを分割して並列編集することもできます。

グループ内分割機能を使用する場合、このモードを切り替えたり、2つの分割されたエディター間を移動したりするための特定のコマンドがあります。

• [表示: グループ内のエディターを分割] - 現在のエディターを分割します。
• [表示: グループ内の分割エディターの切り替え] - アクティブなエディターの分割モードを切り替えます。
• [表示: グループ内のエディターを結合] - アクティブなファイルの単一エディターに戻ります。
• [表示: グループ内の分割エディターのレイアウトを切り替え] - 水平レイアウトと垂直レイアウトを切り替えます。

サイド間を移動するには

• [表示: アクティブなエディターの最初のサイドにフォーカス] - 分割エディターの最初の (左または上) サイドにフォーカスを移動します。
• [表示: アクティブなエディターの2番目のサイドにフォーカス] - 分割エディターの2番目の (右または下) サイドにフォーカスを移動します。
• [表示: アクティブなエディターの別のサイドにフォーカス] - 分割エディターのサイドを切り替えます。

[ワークベンチ] > [エディター: グループ内の分割レイアウト] (workbench.editor.splitInGroupLayout) 設定では、優先される分割エディターレイアウトを水平 (デフォルト) または垂直のいずれかに設定できます。

グリッドレイアウト

エディターグループのレイアウトをより詳細に制御したい場合は、グリッドレイアウトを使用できます。ここでは、複数の行と列のエディターグループを表示できます。[表示] > [エディターレイアウト] メニューには、さまざまなエディターレイアウトオプション (たとえば、[2列]、[3列]、[グリッド (2x2)]) が表示され、グループ間のサッシを掴んで移動することでグループサイズを調整できます。

フローティングエディターウィンドウ

たとえば、モニター上の別の場所に、または別のモニターにエディターを移動するために、フローティングウィンドウでエディターを開くことができます。

フローティングウィンドウでエディターを開くには、メインウィンドウからドラッグして、現在の VS Code ウィンドウの外の任意の場所にドロップします。

フローティングエディターウィンドウは、グリッドレイアウトで好きなだけ多くのエディターを開くことができます。ウィンドウは再起動後も同じ場所に復元され、その中のすべてのエディターを再度開きます。

エディターを分離する別の方法は、エディタータブを右クリックし、[新しいウィンドウに移動] オプション (workbench.action.moveEditorToNewWindow) または [新しいウィンドウにコピー] (⌘K O (Windows, Linux Ctrl+K O)) を選択することです。

エディターグループ全体を移動する場合は、[エディターグループを新しいウィンドウに移動] () または [エディターグループを新しいウィンドウにコピー] () を選択します。

固定されたタブ

エディタータブを常に表示したい場合は、エディタータブバーに固定できます。コンテキストメニューから、または [表示: エディターを固定] コマンド (⌘K ⇧Enter (Windows, Linux Ctrl+K Shift+Enter)) を使用してエディタータブを固定できます。

固定されたタブは、次のような重要なファイルへのアクセスに役立ちます。

• 固定されたタブは常に、固定されていないタブの前に最初に表示されます。
• 多くのタブが開いている場合でも、ビューからスクロールアウトされません。
• [その他を閉じる] や [すべて閉じる] などのエディタータブコマンドを使用しても閉じません。
• 開いたエディターの制限数を超えた場合でも閉じません。

エディターの固定を解除するには、ピンアイコンをクリックするか、エディタータブのコンテキストメニュー項目 [固定解除] を使用するか、[表示: エディターの固定解除] コマンドを使用します。

[ワークベンチ] > [エディター: 固定されたタブのサイズ設定] (workbench.editor.pinnedTabSizing) 設定で、固定されたエディターをどのように表示するかを選択できます。オプションは次のとおりです。

• normal: 固定されたタブは他のタブの外観を継承します (デフォルト)
• shrink: 固定されたタブは固定サイズに縮小され、エディターラベルの一部が表示されます。
• compact: 固定されたタブは、エディターラベルのアイコンまたは最初の文字のみが表示されます。

[ワークベンチ] > [エディター: 固定されたタブを別の行に表示] を設定すると、固定されたエディタータブを通常のエディタータブバーの上の別の行に表示することもできます。2つの行の間でタブをドラッグアンドドロップして、エディターを固定および固定解除できます。

ロックされたエディターグループ

複数のエディターを使用する場合、常に表示しておきたいエディターが1つ以上あるのが一般的です。エディターグループ全体がロックされて表示されるロックされたエディターグループ機能は、安定した表示を提供し、新しいエディターを開く要求は別のグループに作成されます。エディターグループがロックされているかどうかは、エディターグループツールバーのロックアイコンでわかります。

エディターグループをロックするには、エディターツールバーの [その他のアクション] ... ドロップダウンから [グループをロック] を選択するか、[表示: エディターグループをロック] コマンドを実行します。

エディターグループのロックを解除するには、ロックアイコンをクリックするか、[表示: エディターグループのロック解除] コマンドを実行します。

ロックされたグループは、ロックされていないグループとは異なる動作をします。

• 新しいエディターは、明示的に移動されない限り (たとえば、ドラッグアンドドロップで)、ロックされたグループでは開きません。
• 新しいエディターがロックされたグループをスキップした場合、最後に使用したロックされていないグループで開くか、ロックされたグループの横に新しいグループを作成します。
• エディターグループのロック状態は、永続化され、再起動時に復元されます。
• 空のグループもロックできるため、より安定したエディターレイアウトが可能です。

主なユースケースは、エディター領域のターミナルです。例えば、左側でテキストを編集し、右側に常に表示されるターミナルを配置したい場合があります。ターミナルエディターが作成され、サイドに移動されると、自動的にロックされます。これは、右側のターミナルがフォーカスされている場合でも、ファイルを開くと最初に手動でフォーカスを変更する必要なく、左側に開かれることを意味します。

自動ロックグループは、workbench.editor.autoLockGroups 設定を使用して構成できます。デフォルトではターミナルエディターのみですが、同じ動作を得るために任意のエディタータイプを追加できます。

エディターグループのロックに関連するコマンド

• 表示: エディターグループをロック - アクティブなエディターグループをロックします。
• 表示: エディターグループのロックを解除 - アクティブなロックされたエディターグループのロックを解除します。
• 表示: エディターグループのロックを切り替え - アクティブなエディターグループをロックまたはロック解除します。

これらのコマンドを利用するには、複数のエディターグループが必要です。

次のステップ

以下について詳しく見ていきましょう

• Visual Studio Code ユーザーインターフェース - VS Code の簡単なオリエンテーション。
• 基本的な編集 - 強力な VS Code エディターについて学びます。
• コードナビゲーション - ソースコード内をすばやく移動します。