ちょっと話題の記事

VS Code に新しいサイドパネルが追加され、右側にアウトラインなどのビューを表示できるようになりました

2022.02.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

2カ月ぶりに VS Code の新しいバージョン 1.64 がリリースされました?
(2月に入ってますが January 2022 なので2022年1月のアップデート扱いなようです)

リリースノートは以下にまとまっています。今回は新しいサイドパネルに焦点を当てて紹介します。

新しいサイドパネルとは

今までの VS Code の UI は以下のように左側にサイドバー、下側にパネルがあり、workbench.panel.defaultLocation でデフォルトの下側以外にも左側や右側に設定できました。
またサイドバー内のアウトラインのようなビューをパネルの中に入れることができました。

https://code.visualstudio.com/docs/getstarted/userinterface

ただしパネル自体は一つだったので、ターミナルは下側で横幅が広い状態で見たいけど、アウトラインは左側にあるとサイドバーの切り替えで見れなくなるし、アウトラインは縦長の状態で表示したいといった悩みが今まではありました。

そんな悩みを解決するのが v1.64 で追加された「新しいサイドパネル」です。

リリースノートに分かりやすいスクリーンショットがありましたのでそちらをご覧ください。

サイドバーにあるアウトラインを右側にドラッグすると新しいサイドパネルがエリアが表示され、ドロップするとアウトラインが右側に移動している様子が確認できます。

https://code.visualstudio.com/updates/v1_64

このように新しいサイドパネルが追加されたことで、先ほど悩みで挙げたアウトラインは右側で縦長に、ターミナルは下側で横長に表示したい、サイドバーを切り替えてもアウトラインは表示しっぱなしにしたいといったことが実現できるようになりました。

元の場所に戻したい場合はアイコンを右クリックして「場所のリセット」を選択すれば元の場所に戻ります。

https://code.visualstudio.com/updates/v1_64

サイドバーの表示/非表示切り替え

サイドバーの表示/非表示の切り替え機能もサポートされています。

デフォルトではショートカットキーは割り当てられていません。

メニューバーから 表示 > 外観 > サイドバー 、もしくはコマンドパレットから View: Toggle Side Panel で切り替えられます。

workbench.panel.defaultLocation 設定は廃止されました

同時に UI の説明時に上げたパネルのデフォルト表示位置を設定する workbench.panel.defaultLocation 設定は廃止されました。

代わりにコマンドで実行するようになりました。

まとめ

新しいサイドパネルが追加され、右側にアウトラインなどのビューを表示できるようになりました。 これによって、下側にターミナル、右側でアウトラインを表示しつつ、サイドバーの切り替えができるようになりました。

また 従来の workbench.panel.defaultLocation 設定は廃止されました。

VS Code のリリースノートには他のアップデートについても記載されているので是非見てください。