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

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)

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

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

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

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

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

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

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

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

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

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

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

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

レイアウトとして「2行」を選択します。エディターグループの数が 3 から 2 に変更となるため、表示できなくなったエディターグループで開いていたファイルは別のエディターグループで自動的に開きました。

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

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

次にレイアウトとして「シングル」を選択します。エディターグループの数が 2 から 1 に変更となるため、表示できなくなったエディターグループで開いていたファイルは別のエディターグループで自動的に開きました。

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

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

なおこのあとレイアウトを変更して表示されるエディターグループの数が増えたとしても、同じエディターグループに移動したファイルは自動的には別のエディターグループに移動することはありません。必要であれば手動で移動してください。

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

開いているファイルを別のエディターグループに移動するには、対象のファイルのタブをドラッグしたあと別のエディターグループでドロップします。

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

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

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

開いているファイルを別のエディターグループに移動することができました。

-- --

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

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。