エディターグループのレイアウトを設定する

Visual Studio Code ではエディターグループを利用することで複数のファイルを同時に表示することができますが、複数のエディターグループを画面内でどのようにレイアウトするのかを簡単に設定することができます。ここではエディターグループのレイアウトを設定する方法について解説します。

(Last modified: )

レイアウトを設定する

エディターグループのレイアウトを設定するには「表示」メニューの中の「エディターレイアウト」にマウスを合わせてください。サブメニューとして「シングル」「2列」「3列」「2行」「3行」「グリッド(2x2)」「2行右」「2列下」の 8 つが表示されます。

レイアウトを設定する(1)

デフォルトで設定されているレイアウトは「シングル」です。このレイアウトでは画面全体に 1 つのエディターグループが表示されています。

レイアウトを設定する(2)

その他のレイアウトを選択した場合、画面全体を 2 つから 4 つに分割しエディターグループを表示します。それでは順にレイアウトを試してみます。

2列:

レイアウトを設定する(3)

3列:

レイアウトを設定する(4)

2行:

レイアウトを設定する(5)

3行:

レイアウトを設定する(6)

グリッド(2x2):

レイアウトを設定する(7)

2行右:

レイアウトを設定する(8)

2列下:

レイアウトを設定する(9)

複数のエディターグループが画面に表示されている場合、エクスプローラーを表示すると現在開いているエディターグループを確認することができます。

レイアウトを設定する(10)

レイアウトを設定する(11)

なお表示されたエディターグループを個別に削除する方法は「エディターグループを閉じる」を参照されてください。

エディターグループを指定してファイルを開く

レイアウトを選択すると自動的にエディターグループが 1 つから 4 つまで画面に表示されます。それぞれのエディターグループでファイルを開くには、対象のエディターグループを選択してアクティブにしたあとで、通常通りファイルを開いてください。

エディターグループを指定してファイルを開く(1)

エディターグループを指定してファイルを開く(2)

アクティブにしたエディターグループでファイルが開きました。

エディターグループを指定してファイルを開く(3)

なお既にファイルを開いているエディターグループをアクティブにしたあとでファイルを開くと、同じエディターグループで複数のファイルを開くことができまっす。複数のファイルを開いた場合は、タブをクリックすることで表示するファイルを切り替えることができます。

エディターグループを指定してファイルを開く(4)

レイアウトを変更してエディターグループの数が減った場合

エディターグループのレイアウトを変更した結果、エディターグループの数が減った場合、表示できなくなったエディターグループで開いていたファイルは別のエディターグループに自動的に追加されます。

例えば次のように「2列下」のレイアウトで、それぞれのエディターグループでファイルをひとつ開いていた場合で試してみます。

レイアウトを変更してエディターグループの数が減った場合(1)

レイアウトとして「2行」を選択します。

レイアウトを変更してエディターグループの数が減った場合(2)

エディターグループの数が 3 から 2 に変更となるため、表示できなくなったエディターグループで開いていたファイルは別のエディターグループで自動的に開きました。今回は右のエディターグループで 2 つのファイルが開きました。

レイアウトを変更してエディターグループの数が減った場合(3)

レイアウトを変更してエディターグループの数が減った場合(4)

なおこのあとレイアウトを変更して表示されるエディターグループの数が増えたとしても、同じエディターグループに移動したファイルは自動的には別のエディターグループに移動することはありません。例えばレイアウトを「2列下」に変更してみます。

レイアウトを変更してエディターグループの数が減った場合(5)

レイアウトグループが 1 つ増えましたが、ファイルは何も開いていません。

開いているファイルを別のエディターグループに移動する

開いているファイルを別のエディターグループに移動するには、対象のファイルのタブをドラッグしたあと別のエディターグループでドロップします。例として左側のエディターグループで開いているファイルの中の一つを右のエディターグループへ移動させてみます。

開いているファイルを別のエディターグループに移動する(1)

開いているファイルを別のエディターグループに移動する(2)

別のエディターグループへ移動することができました。

開いているファイルを別のエディターグループに移動する(3)

-- --

エディターグループのレイアウトを設定する方法について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。