ろぼいんブログ
HowToVS Codeデザインプログラミング

VS CodeのUIのデザインが変わったのでもとに戻す方法

現在MicrosoftはVS Codeの新しいUIデザインを試験的に展開しており、環境によっては以前と異なる新しいUIで表示されることがあります。新しいUIは全体的に角丸のコンテナーに各要素が配置されており個人的にはかなり好きですが、賛否のわかれるデザインでもあります。

VS Codeの新しいデザインはまだ試験段階なので、設定からオン・オフを切り替えられます。

VS Codeの従来のUIデザインのスクリーンショット
以前のVS Codeのデザイン
VS Codeの新しいUIデザインのスクリーンショット
VS Codeの新しいデザイン

VS Codeの設定には、新しいデザインについて次のように記載されています。

サイド バーと下部パネルは、角が丸く、余白のあるフローティング カードとして表示され、Agents ウィンドウのデザインに合わせた一連の更新済みのワークベンチ スタイルが適用されます。

VS Codeを以前のデザインに戻す方法

VS Codeの新しいデザインはすべてのユーザーにロールアウトされているわけではなく、環境によって古いデザインで表示されたり新しいデザインで表示されたりします。

広告

新しいデザインがロールアウトされている環境では、workbench.experimental.modernUIをfalseに変更することで以前のデザインに戻せます。

GUIから変更する場合

  1. VS Codeの設定を開きます

  2. 設定の検索バーに「modern」と入力して、［Workbench > Experimental: Modern UI］をオフにします

    VS Codeの設定画面で［Workbench > Experimental: Modern UI］が赤い枠線で強調されているスクリーンショット

  3. UIが以前のデザインに戻ります

settings.jsonから変更する場合

  1. VS Codeのsettings.jsonを開きます

  2. workbench.experimental.modernUIをfalseに設定します。

    settings.json
    {
        // ...既存の設定
        "workbench.experimental.modernUI": false
    }

  3. UIが以前のデザインに戻ります

記事をシェア

フォローして最新情報を入手

Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。

Googleの優先ソースとして追加するGoogleの優先ソースとして追加する
広告
著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。