VSCodeでファイルを別タブで開く方法

2026年9月30日2026年10月1日

VSCodeでは、複数のファイルをそれぞれタブとして開きながら作業できます。

ただし、ファイルを1回クリックしただけでは「プレビューエディター」として開かれ、次に別のファイルを選択すると同じタブが置き換わる場合があります。

複数のファイルを別タブとして保持したい場合は、ダブルクリックやプレビュー設定の変更を利用すると便利です。

ファイルをダブルクリックして別タブで開く

エクスプローラーからファイルをダブルクリックする

最も簡単な方法は、VSCode左側のエクスプローラーからファイルをダブルクリックする方法です。

たとえば、次のようなファイルがあるとします。

project
├─ index.html
├─ style.css
└─ script.js

index.htmlをダブルクリックし、続いてstyle.cssをダブルクリックすると、通常はそれぞれのファイルがタブとして保持されます。

[index.html] [style.css]

さらにscript.jsをダブルクリックすれば、次のように複数のタブを並べて作業できます。

[index.html] [style.css] [script.js]

ファイルを確実にタブとして残したい場合は、ダブルクリックする方法が分かりやすいでしょう。

シングルクリックではプレビューとして開かれることがある

標準的な設定では、エクスプローラー上のファイルをシングルクリックすると、プレビューエディターとして開かれる場合があります。

プレビュー状態のファイルを開いたあとに別のファイルをクリックすると、同じタブが新しいファイルに置き換わることがあります。

たとえば、index.htmlを1回クリックしたあとにstyle.cssを1回クリックすると、index.htmlのタブがstyle.cssに切り替わることがあります。

これは不具合ではありません。

ファイルの内容を一時的に確認するときに、タブが増えすぎないようにするためのVSCodeの機能です。

プレビュー状態のファイルをタブとして固定する方法

ファイルをダブルクリックする

プレビュー状態で開いているファイルをダブルクリックすると、そのファイルを通常のエディターとして保持できます。

その後に別のファイルをクリックしても、固定したファイルのタブは残ります。

「確認だけならシングルクリック」「編集するファイルはダブルクリック」と使い分けると効率的です。

Keep Openを使用する

プレビュー状態のエディターは、「Keep Open」コマンドを使って固定することもできます。

Windows/Linuxでは、

Ctrl + K
↓
Enter

macOSでは、

Cmd + K
↓
Enter

を使用します。

これは同時押しではなく、最初にCtrl + KまたはCmd + Kを押し、その後にEnterを押す操作です。

プレビューモードを無効にする方法

Settingsから設定を変更する

毎回ダブルクリックするのが面倒な場合は、プレビューエディター自体を無効にできます。

まずVSCodeのSettingsを開きます。

Windows/Linuxでは、

Ctrl + ,

macOSでは、

Cmd + ,

です。

設定画面の検索欄で、

enable preview

と検索します。

「Workbench › Editor: Enable Preview」という項目が表示されたら、チェックを外します。

これにより、ファイルを開いたときにプレビューとして再利用される動作を無効にできます。

settings.jsonから変更する

settings.jsonを直接編集して設定することもできます。

コマンドパレットを開きます。

Windows/Linuxでは、

Ctrl + Shift + P

macOSでは、

Cmd + Shift + P

です。

その後、

Preferences: Open User Settings (JSON)

を選択します。

settings.jsonに次の設定を追加します。

{
  "workbench.editor.enablePreview": false
}

すでに他の設定がある場合は、その中に追加します。

{
  "editor.fontSize": 14,
  "editor.wordWrap": "on",
  "workbench.editor.enablePreview": false
}

常に複数のファイルをタブとして開いておきたい場合に便利な設定です。

参考サイト

【VSCode】VSCodeでタブが上書きされてしまい一つしか表示されない人のための解決策 #VSCode – Qiita

Quick Openからファイルを開く方法

Ctrl+Pでファイルを検索する

VSCodeでは、エクスプローラーを使わずにファイルを検索して開くこともできます。

Windows/Linuxでは、

Ctrl + P

macOSでは、

Cmd + P

を押します。

その後、開きたいファイル名を入力します。

たとえば、

style.css

と入力して選択すれば、ファイルをすぐに開けます。

ファイル数が多いプロジェクトでは、エクスプローラーから探すよりもQuick Openを使った方が効率的な場合があります。

Quick Openのプレビュー設定も変更できる

Quick Openから開いたファイルのプレビュー動作は、次の設定でも制御できます。

workbench.editor.enablePreviewFromQuickOpen

Quick Openから開いたファイルをどのように扱うか細かく設定したい場合に便利です。

ファイルを横並びで開く方法

別タブとエディター分割は異なる

VSCodeでは、「複数タブ」と「エディターグループの分割」は別の機能です。

複数タブの場合は、1つのエディター領域に次のように表示されます。

[index.html] [style.css] [script.js]

一方、エディターを分割すると、複数のファイルを同時に表示できます。

┌─────────────────┬─────────────────┐
│ index.html      │ style.css       │
│                 │                 │
│ HTML            │ CSS             │
│                 │                 │
└─────────────────┴─────────────────┘

HTMLとCSSを見比べながら編集する場合などに便利です。

ショートカットでエディターを分割する

Windows/Linuxでは、

Ctrl + \

macOSでは、

Cmd + \

でエディターを分割できます。

現在開いているファイルを別のエディターグループに表示できるため、複数のファイルを同時に確認できます。

タブをドラッグして分割する

開いているファイルのタブをドラッグし、エディターの右側や左側へ移動させてもエディターグループを分割できます。

マウス操作でレイアウトを変更したい場合に便利です。

Quick Openから別のエディターグループに開く方法

Ctrl+Enterを使用する

Quick Openでファイルを検索したあと、選択したファイルを横側のエディターグループに開くこともできます。

Windows/Linuxでは、

Ctrl + Enter

macOSでは、

Cmd + Enter

を使用します。

たとえば、

Ctrl + P

でstyle.cssを検索したあとにCtrl + Enterを押すと、現在のエディターとは別のグループにファイルを開けます。

複数のファイルを切り替える方法

Ctrl+Tabで最近使用したファイルを切り替える

Windows/LinuxおよびmacOSでは、

Ctrl + Tab

を使って、現在のエディターグループ内で最近使用したエディターを切り替えられます。

単純に左から右へ次のタブへ移動する操作というより、最近使ったファイルを素早く切り替えるための機能です。

複数ファイルを頻繁に行き来する場合に便利です。

閉じたタブをもう一度開く方法

Reopen Closed Editorを使う

誤ってタブを閉じた場合でも、直前に閉じたエディターを再度開けます。

Windows/Linuxでは、

Ctrl + Shift + T

macOSでは、

Cmd + Shift + T

を使用します。

ブラウザで閉じたタブを復元するときと似た操作なので、覚えやすいショートカットです。

ファイルを別ウィンドウで開く方法

新しいVSCodeウィンドウにコピーする

現在開いているエディターを、新しいVSCodeウィンドウへコピーして表示することもできます。

Windows/Linuxでは、

Ctrl + K
↓
O

macOSでは、

Cmd + K
↓
O

を使用します。

Ctrl + Kを押したあとにOを押す操作であり、Ctrl + KとCtrl + Oを同時に押すわけではありません。

複数モニターを使用している場合などに便利です。

タブをウィンドウの外へドラッグする

現在のVSCodeでは、エディターのタブをウィンドウ外へドラッグし、別ウィンドウとして表示することもできます。

右クリックメニューから「Move into New Window」や「Copy into New Window」を利用する方法もあります。

複数の画面を使って作業する場合に便利です。

タブが表示されない場合の確認方法

workbench.editor.showTabsを確認する

複数のファイルを開いているのにタブが表示されない場合は、タブ表示の設定を確認します。

Settingsで、

show tabs

と検索します。

VSCodeでファイルを別タブで開くときのおすすめ設定

基本はダブルクリックで十分

普段は、編集するファイルをエクスプローラーでダブルクリックするだけでも十分です。

確認だけしたいファイルはシングルクリックし、編集したいファイルはダブルクリックすると、タブが増えすぎるのを防げます。

常に別タブで開きたい場合はプレビューを無効にする

毎回ファイルをタブとして保持したい場合は、次の設定がおすすめです。

{
  "workbench.editor.enablePreview": false
}

ただし、ファイルを頻繁に確認する大規模プロジェクトでは、タブが増えすぎる可能性もあります。

用途に応じてプレビュー機能を有効・無効にするとよいでしょう。