(12/5)VS Code でタブが勝手に上書きされる問題を解決！

はじめに

アドベントカレンダー12/5 = 5記事目になります！

VS Codeを使っているとき、Explorer（左のファイル一覧）や検索からファイルを開くと、すでに開いていたタブが別のファイルで置き換わってしまう――という挙動に戸惑ったことはありませんか？

今回は上記事象について、VS Code で「常にファイルを新しいタブで開く（＝既存タブを上書きしない）」ように設定する方法を初心者にもわかりやすく紹介したいと思います

✅ なぜ「タブが上書きされる」のか？ — プレビュー モードとは

• Explorer や検索、Quick Open（Ctrl＋Pなど）でファイルを 単クリック して開くと、そのファイルは「プレビューモードのタブ」として開かれる
• プレビューモードのタブは、タブ名が 斜体 (イタリック) 表示されることで区別できる
• プレビューモードのタブは「仮のタブ」で、次に別のファイルを開くと再利用され、上書きされてしまう仕様になっている
• つまり「最初に開いたファイルが消えて別のファイルがそのタブに置き換わる」ことになる
• もしそのファイルを編集したり、ダブルクリックしたりすれば「通常のタブ」となり、置き換えられずに残る

このような挙動のため、知らずにファイルをどんどん単クリックで開くと、「前に見ていたファイルをどこで開いたか分からなくなる」ことがある

🔧 解決／設定方法

「常に新しいタブで開きたい」「既存のタブを置き換えられたくない」という場合、以下の設定を変更することで実現できます。

(A) 設定をいじる方法（GUI）

1. VS Code を開く
2. メニューから 「ファイル」 > 「基本設定」 > 「設定」 を選ぶ（もしくはショートカット Ctrl + ,）
3. 検索バーに preview と入力
4. 表示された設定において、
   • Workbench › Editor: Enable Preview → チェックを外す（＝オフ）
   • Workbench › Editor: Enable Preview From QuickOpen → 必要ならこちらもオフにする
5. これで、Explorer で単クリックしても「常に新しいタブ」が開き、タブが上書きされない設定となる

(B) 設定ファイルに直接書く方法（JSON形式）

1. Ctrl + Shift + P を押して、コマンドパレットを開く
2. 「Preferences: Open User Settings (JSON)」と入力して選択
3. 出てきた settings.json に次の行を追加／変更

   {
     "workbench.editor.enablePreview": false,
     "workbench.editor.enablePreviewFromQuickOpen": false
   }
   

4. 保存すると即座に反映される

さいごに

VS Code に用意されている「プレビューモード」は、ファイルを軽く確認したいときにとても便利な仕組みです。
しかし、複数のファイルを同時に扱う作業では、タブが意図せず置き換わってしまい、見ていたファイルを見失う原因にもなります。

今回紹介した設定を変更すれば、常に新しいタブで開くスタイルに統一でき、タブが勝手に上書きされるストレスから解放されます。

VS Code は設定のカスタマイズ幅が広く、「ちょっとした設定変更」で作業効率が大きく変わるエディタです。
今後も、自分の作業スタイルに合った便利な使い方を見つけながら、少しずつ快適な開発環境を整えていきましょう。
また便利な機能や設定があれば、記事として紹介していきたいと思います。