VS Code1.25の新機能 - グリッドエディタレイアウト

Visual Studio Code 1.25の新機能・グリッドエディタレイアウト

従来のバージョンではエディタを並べて表示したい場合、並べられる最大数は３つまでで、また並べる方向は１方向（横方向か縦方向、切り替えは可能）という仕様だった。

今回、グリッドエディタレイアウトが採用され、最大数の制限が無くなり、また同時に横方向にも縦方向にも並べられるようになり、より自由度の高い並べ方が可能になった。

エディタの配置

エクスプローラからエディタを選んで表示する際、既に表示されているエディタの端にドロップすることによってその隣にエディタを配置することができる。

レイアウトの保持

エディタを閉じる際、それがエディタグループの最後のエディタの場合、デフォルトの動作ではエディタグループが閉じられるが、エディタを閉じてもレイアウトはキープしておきたい場合のために設定が追加された。
設定workbench.editor.closeEmptyGroupsをfalseに変更するとエディタを閉じてもレイアウトはキープされるようになる。

エディタの分割

エディタ右上にある分割ボタンを押すと分割される。デフォルトは右分割されるがAltキーを押しながらだと下分割になる。この動作を逆にしたい場合は設定workbench.editor.openSideBySideDirectionによって変えることができる。

分割のプリセットパターンがいくつか用意されており、それらを呼び出すことによって分割することもできる。

これらのプリセットパターン分割はコマンドにショートカットキーを割り当てればワンキーで呼び出すことができる。

さらに、自分でカスタムのレイアウトを定義して、それをショートカットキーで呼び出すこともできる。
Ctrl+K Ctrl+S(or ⌘K ⌘S)でキーボードショートカット画面を出し、さらにkeybindings.jsonのリンクをクリックし、例えば以下のような感じで設定する。

設定例

[
    {
        "key": "alt+numpad0",
        "command": "layoutEditorGroups",
        "args": {
            "orientation": 1,
            "groups": [
                {"groups": [{"size": 0.4},{"size": 0.4},{"size": 0.2}]},
                {"groups": [{"size": 0.2},{"size": 0.4},{"size": 0.4}]},
                {"groups": [{"size": 0.4},{"size": 0.4},{"size": 0.2}]},
                {"groups": [{"size": 0.2},{"size": 0.4},{"size": 0.4}]}
            ]
        }
    }
]

orientationは方向を表し、0は水平方向、1は垂直方向の設定を表す。
groupsにレイアウトの定義を記述する。１つのエディタグループを{}で表記し、[{},{},{}]のように配置したい数だけ並べる。{}の中にsizeを指定すると幅比率を指定でき、1つのgroupsの中の合計値が1になるように指定する。sizeを省略した場合は均等に配置される。
タテヨコに配置したい場合はgroupsをネストして表記する。なのでその場合はorientationに1を指定したほうが上記の例のように定義とレイアウトの並び方向が一致するので直感的にわかりやすくなる。
上記設定を行った場合、Alt+numpad0を押すと以下のようなレイアウトになる。

ショートカットキー

今回の機能によって追加されたショートカットキー
Ctrl+K Ctrl+\：エディタの分割。分割される方向は設定openSideBySideDirectionとは逆の方向。なお、設定されている方向への分割はCtrl+\。
Shift+Alt+9：エディタを最後のグループに移動
Ctrl+K ↑/↓：エディタグループを上/下に移動
Ctrl+F4：アクティブなエディタグループを閉じる
Ctrl+4～8：4～8個目のグループにフォーカスを移動する。グループが無ければ追加する(ただし追加は１つ前のグループがすでに存在する場合のみ)。
Ctrl+K Ctrl+↑/↓/←/→：フォーカスを上/下/左/右のグループに移動する