Visual Studio Code入門エディターレイアウトで、自分好みの配置にしよう

WindowsでもmacOSでも、複数のファイルを開きたいときはそれぞれ別のウィンドウを開いて、それを配置して利用しているかも知れません。

しかし、VSCodeは1つのソフトで、複数のエディタを左右や上下に並べて利用することができます。参照用のエディタと制作用を分けたり、HTMLとCSSでエディターを分けたり等、自在なアレンジが可能です。早速使っていきましょう。

タブを利用しよう

VSCodeではファイルをダブルクリックで開いたりすると、画面上部の「タブ」で切り替えができるようになります。

タブは、エクスプローラーパネルで「開いているエディター」で一覧することもできます。

エディターを左右分割しよう

複数のファイルを同時に閲覧したい場合は、ウィンドウを分割して確認することができます。右上の「エディターを右に分割」ボタンをクリックしましょう。

2等分されて2つのエディターが表示されます。それぞれのエリアに、別のファイルを開くことができます。

標準では右に開きますが、上下左右のどこに開くこともできます。「表示→エディターレイアウト」メニューで選択することができますし、またタブを右クリックしてもメニューが表示されます。

また、エクスプローラーパネルでファイルを開くときに、ファイルをドラッグをすると、グレーの枠が表示されるので、希望する形になったら離せばその場所に開くことができます。

ピン留めとグループを利用しよう

VSCodeで次々にファイルを開いていくと、タブの数が管理しきれなくなってしまいます。そんな時、よく編集するファイルだけを別にしておくことができます。

ファイルの数が限られている場合は「ピン留め」が便利です。タブを右クリックして「ピン留めする」メニューをクリックしましょう。

タブが一番左に移動して、閉じることができなくなります。また、各タブを右クリックしたときの「閉じる」メニュー類でも閉じられなくなり、いつでも編集できるようになります。

ピン留めを外す場合は、再度右クリックして「ピン留めを外す」メニューをクリックするか、またはタブ右側のピンボタンをクリックしましょう。

また、複数のファイルがある場合は「グループ」を利用することもできます。一番右端のボタンをクリックし、「グループをロックする」をクリックしましょう。

今開いているタブが「グループ」となり、この状態でロックされます。

これ以降、ファイルを開く場合はウィンドウが自動的に分割されて、他の「グループ」として開くようになります。

ただし、グループ間でタブを移動することはできます。また、一時的に1つのグループ内だけの編集をしたい場合は、右上のメニューから「グループの最大化」をクリックしましょう。

解除する場合は、メニューから選ぶか、図のボタンをクリックしましょう。また、エクスプローラーバーの「開いているエディター」から開くこともできます。

このように多彩な操作で、ウィンドウを自由にアレンジできるので、編集しやすい構成を作っていくと良いでしょう。