カスタム レイアウト
Visual Studio Code には、シンプルなユーザー インターフェイスと便利なデフォルトのレイアウトが備わっています。同時に、VS Code には、好みや作業スタイルに合わせて UI レイアウトをカスタマイズできるオプションや設定も用意されています。このトピックでは、ビュー、エディター、パネルを自分にとって最も生産的な方法で表示できるように、さまざまな UI カスタマイズについて説明します。
この記事では、まずサイドバー、ビュー、パネルなどの UI 要素を並べ替えるためのワークベンチのカスタマイズについて説明します。記事の後半では、エディター グループ、分割エディター、エディター タブを使用したエディター領域のカスタマイズについて説明します。
VS Code を初めて使用する場合は、ユーザー インターフェイスの概要から始めるか、ヒントとコツの記事を参照することをお勧めします。
ワークベンチ
プライマリ サイドバー
デフォルトでは、プライマリ サイドバーはワークベンチの左側に配置され、エクスプローラー、検索、ソース管理などのビューが表示されます。アクティビティ バーのアイコンを選択することで、ビューをすばやく切り替えることができます。
プライマリ サイドバーの位置を変更するには、以下の操作を行います。
- アクティビティ バーを右クリックし、[プライマリ サイドバーを右に移動] を選択します。
- [表示: プライマリ サイドバーの位置を切り替え] を実行して、プライマリ サイドバーを左右に切り替えます。
- [表示] > [外観] > [プライマリ サイドバーを右に移動] メニュー項目を使用します。
- 設定エディターで Workbench > Side Bar: Location ( workbench.sideBar.location ) 設定を
rightに設定します。
セカンダリ サイドバー
デフォルトでは、VS Code はエディター領域の左側にあるプライマリ サイドバーにビューを表示します。2 つのビューを同時に開いておくと便利な場合があります。そのために、セカンダリ サイドバーを使用して、プライマリ サイドバーの反対側にビューを表示できます。セカンダリ サイドバーは、プライマリ サイドバーの位置を入れ替えたとしても、常にプライマリ サイドバーの反対側に配置されます。
フォルダーまたはマルチルート ワークスペースを最初に開いたとき、セカンダリ サイドバーはデフォルトで表示されます。空のウィンドウでは、デフォルトで非表示になっています。この動作は workbench.secondarySideBar.defaultVisibility 設定で構成できます。
次の画像は、プライマリ サイドバーにエクスプローラー ビュー、セカンダリ サイドバーに Copilot チャット ビューを表示したものです。
セカンダリ サイドバーが非表示の場合は、VS Code タイトル バーのレイアウト コントロールを使用して表示できます。レイアウト コントロールが表示されていない場合は、VS Code タイトル バーを右クリックして [レイアウト コントロール] を選択します。
または、次のようにしてセカンダリ サイドバーを開くこともできます。
- [表示: セカンダリ サイドバーの表示を切り替え] コマンドを実行します (または ⌥⌘B (Windows、Linux では Ctrl+Alt+B) を押します)。
- [表示] > [外観] > [セカンダリ サイドバー] メニュー項目を使用します。
いつでも、ビューやパネルをドラッグ アンド ドロップしてプライマリまたはセカンダリ サイドバーに移動できます。VS Code は、セッションをまたいでビューとパネルのレイアウトを記憶します。
[表示: ビューの場所をリセット] コマンドを使用すると、ビューとパネルをデフォルトの位置に戻すことができます。
コマンド パレットの位置
コマンド パレットを別の場所に移動するには、マウス カーソルで上端をつかんでドラッグします。または、タイトル バーの レイアウトのカスタマイズ コントロールを選択し、事前構成済みの クイック入力位置 のいずれかを選択します。
アクティビティ バーの位置
デフォルトでは、アクティビティ バーはプライマリ サイドバーと一緒に移動し、ワークベンチの外側の端に配置されます。アクティビティ バーを非表示にしたり、プライマリ サイドバーの上部または下部に移動したりすることもできます。
[アクティビティ バーの位置] メニューは、アクティビティ バーのコンテキスト メニュー、または [表示] > [外観] > [アクティビティ バーの位置] から利用でき、[デフォルト]、[上部]、[下部]、または [非表示] のオプションがあります。
アクティビティ バーが上部または下部の位置にある場合、通常はアクティビティ バーの下部にある [アカウント] ボタンと [管理] ボタンはタイトル バーの右側に移動します。
アクティビティ バーのサイズ
アクティビティ バーは、大きめのデフォルト サイズと、従来のアクティビティ バーの外観に合わせたコンパクト サイズの 2 つのサイズをサポートしています。コンパクト モードに切り替えるには、 workbench.activityBar.compact を true に設定します。
また、アクティビティ バーを右クリックし、[アクティビティ バーのサイズ] サブメニューから [デフォルト] または [コンパクト] を選択してサイズを切り替えることもできます。
[アクティビティ バーのサイズ] サブメニューは、アクティビティ バーがデフォルト (側面) の位置にある場合にのみ表示されます。アクティビティ バーが上部または下部に移動されている場合、サイズ オプションは利用できません。
レイアウトのカスタマイズ コントロール
VS Code のタイトル バーには、主要な UI 要素 (サイドバーとパネル領域) の表示を切り替えるためのボタンもあります。
一番右のボタンをクリックすると [レイアウトのカスタマイズ] ドロップダウンが表示され、さまざまな UI 要素の表示やレイアウトをさらに変更できます。これにはいくつかのレイアウト モードが含まれています。
レイアウト モードは次のとおりです。
- 全画面表示 (Full Screen) - エディターがディスプレイ画面全体に広がるように設定します。[表示: 全画面表示の切り替え] (⌃⌘F (Windows、Linux では F11))。
- 禅モード (Zen Mode) - エディター領域以外のすべての UI を非表示にします。[表示: 禅モードの切り替え] (⌘K Z (Windows、Linux では Ctrl+K Z))。
- 中央揃えレイアウト (Centered Layout) - エディター領域内の中央にエディターを配置します。[表示: 中央揃えレイアウトの切り替え]。
ウィンドウとメニューのスタイル
以下の設定を使用して、VS Code ウィンドウとメニュー バーの外観をカスタマイズできます。
-
window.titleBarStyle : VS Code ウィンドウのタイトル バーの外観を、OS 標準 (native) にするかカスタム (custom) にするかを調整します。変更を適用するには、完全に再起動する必要があります。
-
window.title : 開いているワークスペースやアクティブなエディターなど、現在のコンテキストに基づいて VS Code ウィンドウのタイトルを構成します。変数はコンテキストに基づいて置換されます。たとえば、
${activeEditorShort}は現在アクティブなエディターのファイル名を表示します。${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}のように、複数の変数を組み合わせることができます。 -
window.titleSeparator : window.title 設定で使用される区切り文字です。
-
window.menuStyle : メニューのスタイルを、OS 標準 (native)、カスタム (custom)、またはタイトル バーのスタイル ( window.titleBarStyle で定義) から継承するように調整します。これはコンテキスト メニューの外観にも影響します。変更を適用するには、完全に再起動する必要があります。
-
window.menuBarVisibility : メニュー バーの表示を構成します。
classic: メニュー バーはウィンドウの上部に表示され、ウィンドウが全画面モードの場合にのみ非表示になります。visible: ウィンドウが全画面モードであっても、メニュー バーは常に表示されます。toggle: メニュー バーは非表示になり、Alt キーを 1 回押すと表示されます。compact: メニューがサイドバーに移動します。hidden: メニュー バーは常に非表示になります。
パネル
パネル領域には、問題、ターミナル、出力パネルなどの UI 要素が表示され、デフォルトではエディター領域の下に配置されます。
パネルの位置
この領域は、エディターの左、右、下、または上に移動できます。これらのオプションは、[表示] > [外観] > [パネルの位置] の下のメニュー、またはパネルのタイトル バーのコンテキスト メニューから構成できます。
コマンド パレットで [パネルの移動] コマンドを使用することもできます。
- [表示: パネルを左に移動] (
workbench.action.positionPanelLeft) - [表示: パネルを右に移動] (
workbench.action.positionPanelRight) - [表示: パネルを下に移動] (
workbench.action.positionPanelBottom) - [表示: パネルを上に移動] (
workbench.action.positionPanelTop)
パネルの配置
このオプションを使用すると、下部パネルがウィンドウ全体にわたってどの程度広がるかを構成できます。4 つのオプションがあります。
- 中央 (Center) - これがデフォルトの動作です。パネルはエディター領域の幅のみを占めます。
- 両端揃え (Justify) - パネルはウィンドウの全幅を占めます。
- 左 (Left) - パネルはウィンドウの左端からエディター領域の右端まで広がります。
- 右 (Right) - パネルはウィンドウの右端からエディター領域の左端まで広がります。
すべてのパネル配置オプションにおいて、アクティビティ バーはウィンドウの端とみなされます。
これらのオプションは、[表示] > [外観] > [パネルの配置] メニュー、パネル タイトルのコンテキスト メニュー、または新しい [パネルの配置を ... に設定] コマンドを使用して構成できます。
パネル サイズの最大化
パネルの配置が [中央] の場合、パネル領域の右上の [パネル サイズを最大化] シェブロン ボタンを使用して、パネル領域をエディター領域全体に広がるようにすばやく切り替えることができます。最大化されたパネルでは、シェブロン ボタンが下を向き、パネルを元のサイズに戻すことができます。
[表示: 最大化パネルの切り替え] コマンドを使用してパネル領域を最大化することもできます。
パネル領域全体の表示をカスタマイズするだけでなく、個々のパネルに独自のレイアウト カスタマイズがある場合があります。たとえば、ターミナルでは、複数のタブを開いたり、既存のターミナルを分割したりできます。
ビューとパネルのドラッグ アンド ドロップ
VS Code にはプライマリ サイドバーとパネル領域のビューとパネルのデフォルト レイアウトがありますが、これらの領域間でビューとパネルをドラッグ アンド ドロップできます。たとえば、ソース管理ビューをパネル領域にドラッグ アンド ドロップしたり、問題パネルをプライマリ サイドバーに入れたりできます。
ビューやパネルは [場所のリセット] コンテキスト メニュー項目で、すべてのビューやパネルは一般的な [表示: ビューの場所をリセット] コマンドで、デフォルトの場所に戻すことができます。
既存のビューやパネルにビューやパネルを追加してグループを作成することもできます。たとえば、出力パネルをエクスプローラーのアクティビティ バー項目の上にドラッグし、ビュー内にドロップすることで、出力パネルをエクスプローラー ビュー グループに移動できます。
ビューやパネルの移動には、マウスだけでなくキーボードも使用できます。[表示: ビューの移動] および [表示: フォーカスされたビューを移動] コマンドを使用してレイアウトをカスタマイズすることもできます。ドロップダウンから移動する UI 要素と移動先 (サイドバーやパネル領域などの場所、または既存のビューやパネル) を選択してグループを作成できます。
通知
デフォルトでは、Visual Studio Code はワークベンチの右下隅に通知トーストと通知センターを表示します。通知の位置は workbench.notifications.position 設定で変更できます (試験運用中)。
利用可能な位置は次のとおりです。
bottom-right(デフォルト) - 通知は右下隅に表示されます。ベル アイコンはステータス バーにあります。bottom-left- 通知は左下隅に表示されます。ベル アイコンはステータス バーの左側に移動します。top-right- 通知は OS レベルの通知と同様に右上隅からスライドして表示されます。ベル アイコンはステータス バーからタイトル バーに移動します。
通知の位置は、通知センターから直接変更することもできます。ベル アイコンを選択して通知センターを開き、ヘッダー ツールバーの配置アイコンを選択して別の位置を選択します。
通知の位置が top-right に設定されている場合、 workbench.notifications.showInTitleBar 設定を使用して、タイトル バーにベル アイコンを表示するかどうかを制御できます。
ツール バー
ほとんどの VS Code ビューとパネルには、UI の右上にツール バーが表示されます。たとえば、検索ビューには、[リフレッシュ]、[検索結果をクリア] などのアクションを含むツール バーがあります。
ツール バーの項目を非表示にする
ツール バーが煩雑で、あまり使用しないアクションを非表示にしたい場合は、どのアクションでも右クリックして [非表示] コマンド (たとえば ['検索結果をクリア' を非表示]) を選択するか、ドロップダウンからアクションのチェックを外します。非表示のアクションは ... [その他のアクション] メニューに移動し、そこから呼び出すことができます。
ツール バーにアクションを復元するには、ツール バーのボタン領域を右クリックして [メニューのリセット] コマンドを選択するか、非表示のアクションを再度チェックします。VS Code のすべてのメニューを復元するには、コマンド パレットから [表示: すべてのメニューをリセット] を実行します (⇧⌘P (Windows、Linux では Ctrl+Shift+P))。
エディター
VS Code エディター領域のレイアウトは、ワークベンチのユーザー インターフェイスとは別にカスタマイズできます。デフォルトでは、エディター領域にはミニマップ、階層リンク (breadcrumbs)、エディター タブなどの便利な機能が表示され、固定スクロール (Sticky Scroll) などのオプション UI もあります。エディター自体のレイアウトを調整したり、フローティング ウィンドウに移動したりすることもできます。
ミニマップと階層リンク
[表示] > [外観] メニューには、エディター領域をカスタマイズするためのセクションがあります。そこには、以下の切り替えスイッチがあります。
- ミニマップ (Minimap) - 現在のファイルの視覚的な概要。[表示: ミニマップの切り替え]。
- 階層リンク (Breadcrumbs) - アクティブなファイルのフォルダー、ファイル、および現在のシンボル情報を表示します。[表示: 階層リンクの切り替え]。
- 固定スクロール (Sticky Scroll) - アクティブなファイル内のネストされたシンボルのスコープを表示します。[表示: 固定スクロールの切り替え]。
エディター グループ
デフォルトでは、開かれた各エディターは同じ エディター グループ に入り、右側に新しいエディター タブが追加されます。類似したファイルや関連するファイルをグループ化したり、同じファイルを左右に並べて編集したりするために、新しいエディター グループを作成できます。
エディターを横にドラッグするか、エディター タブのコンテキスト メニューにある [分割] コマンドのいずれかを使用して、現在のエディターを左、右、上、または下の新しいエディター グループに複製することで、新しいエディター グループを作成できます。
エディターの 分割 コマンドは、[表示] > [エディター レイアウト] メニューおよびコマンド パレットからも利用できます。
エディター グループの垂直レイアウトと水平レイアウトをすばやく切り替えたい場合は、[垂直/水平エディター レイアウトの切り替え] コマンドを使用できます (⌥⌘0 (Windows、Linux では Shift+Alt+0))。
グループ内で分割
[表示: グループ内でエディターを分割] コマンドを使用して、同じグループ内でエディターを分割し、左右に並べて編集することもできます (⌘K ⇧⌘\ (Windows、Linux では Ctrl+K Ctrl+Shift+\))。
グループ内分割機能を使用する場合、このモードを切り替えたり、分割された 2 つのエディター間を移動したりするための特定のコマンドがあります。
- [表示: グループ内でエディターを分割] - 現在のエディターを分割します。
- [表示: グループ内の分割エディターの切り替え] - アクティブなエディターの分割モードを切り替えます。
- [表示: グループ内のエディターを結合] - アクティブなファイルを単一のエディターに戻します。
- [表示: グループ内の分割エディターのレイアウトを切り替え] - 水平レイアウトと垂直レイアウトを切り替えます。
サイド間を移動するには、以下を使用します。
- [表示: アクティブなエディターの最初のサイドにフォーカス] - 分割エディターの最初の (左または上) サイドにフォーカスを移動します。
- [表示: アクティブなエディターの 2 番目のサイドにフォーカス] - 2 番目の (右または下) サイドに移動します。
- [表示: アクティブなエディターの別のサイドにフォーカス] - 分割エディターのサイド間を切り替えます。
Workbench > Editor: Split in Group Layout ( workbench.editor.splitInGroupLayout ) 設定により、優先する分割エディター レイアウトを水平 (デフォルト) または垂直に設定できます。
グリッド レイアウト
エディター グループのレイアウトをより細かく制御したい場合は、エディター グループの複数の行と列を表示できる グリッド レイアウトを使用できます。[表示] > [エディター レイアウト] メニューには、さまざまなエディター レイアウト オプション ([2 列]、[3 列]、[グリッド (2x2)] など) がリストされており、グループ間のサッシをつかんで動かすことでグループ サイズを調整できます。
フローティング ウィンドウ
エディター、ターミナル、または特定のビューをフローティング ウィンドウで開くことができます。これは、エディターを別のモニターに移動したり、同じモニター上の別の場所に移動したりできるマルチモニター環境で便利です。
エディターをフローティング ウィンドウで開くには、メイン ウィンドウの外にドラッグし、現在の VS Code ウィンドウの外側の任意の場所にドロップします。
フローティング ウィンドウでは、グリッド レイアウトでお好みの数だけエディターを開くことができます。ウィンドウは再起動後もその場所で復元され、その中のすべてのエディターが再び開かれます。
エディターを切り離すもう 1 つの方法は、エディター タブを右クリックして、[新しいウィンドウに移動] (workbench.action.moveEditorToNewWindow) または [新しいウィンドウにコピー] (⌘K O (Windows、Linux では Ctrl+K O)) オプションを選択することです。
エディター グループ全体を移動するには、[エディター グループを新しいウィンドウに移動] () または [エディター グループを新しいウィンドウにコピー] () コマンドを使用します。
コンパクト モード
フローティング ウィンドウから不要な UI 要素を削除してコンテンツのスペースを増やすには、フローティング ウィンドウのタイトル バーで [コンパクト モードに設定] オプションを選択します。もう一度選択すると、フローティング ウィンドウが元のモードに戻ります。
最前面に固定
フローティング ウィンドウのタイトル バーで [常に手前に表示] オプションを選択すると、フローティング ウィンドウを画面の最前面に固定できます。これは、メインの VS Code ウィンドウで作業している間、ターミナルやプレビュー ウィンドウを常に表示しておくのに便利です。もう一度選択すると、フローティング ウィンドウの固定が解除されます。
ピン留めされたタブ
エディター タブを常に表示しておきたい場合は、エディター タブ バーにピン留めできます。エディター タブは、コンテキスト メニューから、または [表示: エディターをピン留め] コマンドを使用してピン留めできます (⌘K ⇧Enter (Windows、Linux では Ctrl+K Shift+Enter))。
ピン留めされたタブは、自分にとって重要なファイルへのアクセスに役立ちます。
- ピン留めされたタブは、ピン留めされていないタブよりも常に先に表示されます。
- 多くのタブを開いていても、表示外にスクロールすることはありません。
- [他を閉じる] や [すべて閉じる] などのエディター タブ コマンドを使用しても閉じられません。
- 開いているエディターの設定制限を超えても閉じられません。
ピン アイコンをクリックするか、エディター タブのコンテキスト メニューの [ピン留め解除] 項目を使用するか、[表示: エディターのピン留めを解除] コマンドを使用して、エディターのピン留めを解除します。
Workbench > Editor: Pinned Tab Sizing ( workbench.editor.pinnedTabSizing ) 設定を使用して、ピン留めされたエディターの表示方法を選択できます。オプションは以下の通りです。
normal: ピン留めされたタブは、他のタブの外観を継承します (デフォルト)。shrink: ピン留めされたタブは、エディター ラベルの一部を表示する固定サイズに縮小されます。compact: ピン留めされたタブは、アイコンまたはエディター ラベルの最初の文字としてのみ表示されます。
また、Workbench > Editor: Pinned Tabs On Separate Row を設定することで、通常のエディター タブ バーの上の別の行にピン留めされたエディター タブを表示することもできます。2 つの行の間でタブをドラッグ アンド ドロップすることで、エディターをピン留めしたりピン留めを解除したりできます。
ロックされたエディターグループ
複数のエディターを使用する場合、1 つまたは複数のエディターを常に表示しておきたいのが一般的です。エディター グループ全体がロックされて表示されるロックされたエディター グループ機能は、安定した表示を提供し、新しいエディターを開くリクエストは別のグループに作成されます。エディター グループのツール バーにあるロック アイコンで、エディター グループがロックされているかどうかを確認できます。
エディター ツール バーの [その他のアクション] ... ドロップダウンから [グループをロック] を選択するか、[表示: エディター グループをロック] コマンドを実行して、エディター グループをロックできます。
ロック アイコンをクリックするか、[表示: エディター グループのロックを解除] コマンドを実行して、エディター グループのロックを解除できます。
ロックされたグループは、ロックされていないグループとは動作が異なります。
- 明示的に移動されない限り (たとえば、ドラッグ アンド ドロップなど)、新しいエディターはロックされたグループで開きません。
- 新しいエディターがロックされたグループをスキップする場合、最近使用したロックされていないグループで開くか、ロックされたグループの横に新しいグループを作成します。
- エディター グループのロック状態は保持され、再起動後も復元されます。
- 空のグループをロックすることもでき、より安定したエディター レイアウトが可能になります。
主なユースケースは、エディター領域のターミナルです。たとえば、左側でテキストを編集し、右側に常に表示されるターミナルを配置したい場合があります。ターミナル エディターが作成されて横に移動されると、自動的にロックされます。つまり、右側のターミナルにフォーカスがある場合でも、ファイルを開くと、手動でフォーカスを変更することなく左側で開かれます。
グループの自動ロックは workbench.editor.autoLockGroups 設定を使用して構成できます。デフォルトはターミナル エディターのみですが、任意のエディター タイプを追加して同じ動作をさせることができます。
エディター グループのロックに関連するコマンドは次のとおりです。
- [表示: エディター グループをロック] - アクティブなエディター グループをロックします。
- [表示: エディター グループのロックを解除] - アクティブなロックされたエディター グループのロックを解除します。
- [表示: エディター グループのロックを切り替え] - アクティブなエディター グループのロック/ロック解除を切り替えます。
これらのコマンドを利用するには、2 つ以上のエディター グループが必要です。
次のステップ
詳細については、以下をお読みください。
- Visual Studio Code ユーザー インターフェイス - VS Code のクイック ガイドです。
- 基本的な編集 - 強力な VS Code エディターについて学習します。
- コードナビゲーション - ソースコードを素早く移動します。