「Visual Studio Code」でUIのモダナイズが進行中、従来の「クラシックUI」はいずれ廃止へ

モダン化された「Visual Studio Code」のUI

　「Visual Studio Code」では、ユーザーインターフェイスの見た目の一貫性・視認性・エージェント時代への適応を目的としたモダナイズが進められているとのこと。

　「Visual Studio Code」は2015年のプレビュー以来、タブやツリーコントロール、テーマなど、UIを拡充させてきた。しかし、10年以上にわたる機能追加の結果、ワークベンチの見た目は複雑になり、一貫性も失われつつある。

　今回導入されるUIのモダナイズはその解決を目的としたものだが、エディターを完全に作り直したわけではない。あくまでも見慣れたインターフェイスを洗練させ、階層構造を明確にし、気が散る要素を減らすのが目的だ。情報密度が著しく下がったり、カスタマイズ性が損なわれたり、操作感が大きく変わったりはしない。

「Visual Studio Code」のUIの変遷

　モダン化の取り組みは、［Dark 2026］［Light 2026］テーマでの色の見直しから始まったという。背景などの色数を絞って視覚的な階層を明確にし、コードを際立たせたほか、ホバーや選択、フォーカス、入力の検証、AIエージェントの状態などの表現にも一貫性を持たせた。

「Dark 2026」「Light 2026」テーマ

　次に、エージェントの利用・管理に特化した［エージェント ウィンドウ］（Agents window）で、余白やタイポグラフィー、コントロールなどに共通の“デザインシステム”を開発。それをエディターウィンドウのアクティビティバーやサイドバー、エディターグループ、パネル、タブ、ステータスバーにも適用した。

　モダン化されたUIはまず安定版で実験的な設定として導入され、「Insiders」（先行テスト）版では既定で有効化された。その後、安定版の一部ユーザーを対象としたテストを経て、安定版でも既定で有効となっている。なお、現在もプレビューとして提供されている。

　しかし現状のモダン化されたUIでは、1,920×1,080ピクセル・拡大率100％のディスプレイでは横方向に約20ピクセル、縦方向に12～18ピクセルほど余計にスペースを使う。そのため、表示できるコードやツリーの行数が減ってしまうといったフィードバックが多く寄せられた。

　そこで、余白を減らす［Compact］レイアウト密度が導入された。これはタイトルバーの［レイアウトのカスタマイズ］から選択可能。［window.density.layout］設定オプションを［compact］に設定してもよい。

　また、当初のピル型のエディタータブは、選択中のファイルとエディター本体のつながりがわかりにくいとの声を受けて、選択中のタブがエディターの面とつながって見えるデザインに改められた。ピル型が好みであれば、［workbench.experimental.modernUIEditorTabStyle］設定で選択可能だ。

表示密度とタブ形状の比較（説明用に再構成）

タイトルバーの［レイアウトのカスタマイズ］メニュー

　そのほかにも、すべて大文字のラベルの廃止、余白や角丸、色の調整、パネルの区切りやリサイズ操作の改善などが行われた。描画パフォーマンスについても改善が進められており、CSSセレクターの見直しにより、一般的な操作を組み合わせたベンチマークでスタイル再計算の時間が8.2％短縮されたという。

　なお、現在はモダン化されたUIと従来のデザイン（クラシックUI）を選択できるが、いずれはクラシックUIが廃止される予定だ。移行期間中は、設定で［workbench.experimental.modernUI］のチェックを外せばクラシックUIに戻せる。この選択肢は一時的なもので、廃止の時期は決まっていないが、事前に告知するとのこと。