VS Codeで作業していると、「今どのファイルを開いているのか確認したい」と思うことがあります。
複数のファイルを同時に編集している場合は、開いているファイルを一覧で確認できる方法を知っておくと便利です。
VS Codeでは、「OPEN EDITORS（開いているエディター）」を使う方法をはじめ、タブやショートカットなど、いくつかの方法で現在開いているファイルを確認できます。
ここでは、それぞれの方法や違いについて詳しく解説します。
「OPEN EDITORS」で開いているファイルを確認する
VS Codeで現在開いているファイルを一覧で確認したい場合は、「OPEN EDITORS（開いているエディター）」を利用する方法が分かりやすいです。
エクスプローラーを開く
まず、VS Code左側にあるエクスプローラーを開きます。
Windows・Linuxでは、以下のショートカットを使用できます。
Ctrl + Shift + E
macOSでは、以下です。
Command + Shift + E
エクスプローラー内に「OPEN EDITORS」が表示されている場合、そこに現在開いているエディターが一覧表示されます。
たとえば、以下のようなイメージです。
OPEN EDITORS
index.html
style.css
app.js
README.md
複数のファイルを開いて作業しているときに、現在開いているファイルをまとめて確認できます。
「OPEN EDITORS」が表示されない場合
VS Codeの設定やバージョン、画面構成によっては、「OPEN EDITORS」が最初から表示されていない場合があります。
その場合は、エクスプローラー内のビュー設定やメニューを確認し、「Open Editors」を表示する設定になっているか確認しましょう。
また、設定画面で「Open Editors」に関する項目を検索する方法もあります。
Windows・Linuxでは、以下で設定画面を開けます。
Ctrl + ,
macOSでは、以下です。
Command + ,
設定画面で「Open Editors」などと検索すると、関連する設定を確認できます。
参考サイト
VS Codeでのファイルの作成と編集の第一歩：アクティビティーバーと［エクスプローラー］ビューを使ってみよう
タブから開いているファイルを確認する
VS Code上部に表示されているタブからも、現在開いているファイルを確認できます。
たとえば、以下のように複数のタブが表示されている場合、それぞれが現在開いているエディターです。
index.html | style.css | app.js | README.md
タブの数が多い場合は一覧表示を利用する
ファイルを大量に開いている場合、すべてのタブが画面内に収まらないことがあります。
その場合は、エディターグループにあるオーバーフロー表示などから、グループ内で開いているエディターを一覧表示できます。
タブだけでは確認しづらいほど多くのファイルを開いている場合に便利です。
Ctrl + Tabで開いているエディターを切り替える
現在開いているファイルを確認しながら切り替えたい場合は、Ctrl + Tabを利用できます。
Ctrl + Tab
Ctrlキーを押したままTabキーを押すと、最近使用したエディターを順番に確認しながら切り替えられます。
基本的には現在のエディターグループが対象
注意したいのは、Ctrl + Tabが基本的に現在のエディターグループ内のエディターを対象としている点です。
VS Codeでは、画面を左右などに分割して複数のエディターグループを作成できます。
たとえば、以下のような状態です。
左側のグループ
index.html
app.js
右側のグループ
style.css
README.md
この場合、Ctrl + Tabだけで必ず4つすべてのファイルを一覧表示できるとは限りません。
複数のエディターグループを含めて開いているファイル全体を把握したい場合は、「OPEN EDITORS」を確認するほうが分かりやすいでしょう。
Ctrl + Pでプロジェクト内のファイルを探す
VS Codeには「Quick Open」という機能があります。
Windows・Linuxでは、以下のショートカットです。
Ctrl + P
macOSでは、以下です。
Command + P
Ctrl + Pを押してファイル名の一部を入力すると、ワークスペース内のファイルを検索できます。
たとえば、以下のように入力します。
style
すると、条件に該当するファイルが候補として表示されます。
style.css
styles/main.css
components/style.ts
Ctrl + Pは「開いているファイル一覧」ではない
ここで注意したいのは、Ctrl + Pが現在開いているファイルだけを表示する機能ではないことです。
基本的には、現在開いているフォルダーやワークスペース内のファイルを検索するための機能です。
そのため、「現在開いているファイルだけを確認したい」という場合は、「OPEN EDITORS」などを利用したほうが適しています。
コマンドパレットからエディター一覧を確認する
VS Codeには「コマンドパレット」という機能があります。
Windows・Linuxでは、以下です。
Ctrl + Shift + P
macOSでは、以下です。
Command + Shift + P
コマンドパレットを開き、「Show All Editors」などと検索すると、エディター一覧に関連するコマンドを探せます。
最近使用した順にエディターを確認できる機能もある
VS Codeには、開いているエディターを最近使用した順に表示するためのコマンドもあります。
そのため、「どのファイルを最近編集していたのか確認したい」ときにもコマンドパレットが便利です。
VS Codeの機能名や表示位置を覚えていない場合でも、コマンドパレットでキーワードを入力すれば目的の操作を探しやすくなります。
「開いているファイル」と「プロジェクト内のファイル」の違い
VS Codeを使ううえでは、「開いているファイル」と「プロジェクト内に存在するファイル」の違いを理解しておくことが重要です。
たとえば、プロジェクト内に以下の5つのファイルが存在するとします。
project
├─ index.html
├─ style.css
├─ app.js
├─ about.html
└─ contact.html
このうち、エディターで以下の3ファイルだけを開いているとします。
index.html
style.css
app.js
この場合、エクスプローラーのファイルツリーでは5ファイルすべてを確認できます。
一方、「OPEN EDITORS」では現在開いている3ファイルが表示されます。
つまり、基本的には以下のように区別できます。
エクスプローラーのファイルツリー
→ ワークスペース内のファイルを確認する
OPEN EDITORS
→ 現在開いているエディターを確認する
目的に応じて使い分けることが大切です。
複数のエディターグループを使っている場合
VS Codeでは、エディターを左右や上下に分割して作業できます。
たとえば、左側でHTMLを編集しながら、右側でCSSを編集するといった使い方が可能です。
左側
index.html
app.js
右側
style.css
README.md
OPEN EDITORSならグループごとの状態を確認しやすい
複数のエディターグループを使っている場合、「OPEN EDITORS」ではグループごとに開いているエディターを把握しやすくなります。
画面分割を多用している場合は、単純にタブを見るよりも「OPEN EDITORS」を確認したほうが全体像を把握しやすいでしょう。
未保存のファイルを確認する方法
VS Codeでは、変更した内容をまだ保存していないファイルも画面上から確認できます。
ファイルを編集して未保存の状態になると、タブなどの表示が変化します。
未保存状態はタブやOPEN EDITORSから確認できる
通常、保存済みのエディターでは閉じるための「×」などが表示されますが、未保存の変更がある場合は状態を示すマークに変化します。
「OPEN EDITORS」にも変更状態が表示されるため、「どのファイルを開いているか」だけでなく、「どのファイルをまだ保存していないか」を確認する用途にも利用できます。
VS Codeで開いているファイルを確認する方法の使い分け
VS Codeには、開いているファイルやプロジェクト内のファイルを確認するための複数の方法があります。
それぞれ目的が異なるため、用途に応じて使い分けることが重要です。
現在開いているファイルを一覧で確認したい場合
現在開いているエディター全体を確認したい場合は、「OPEN EDITORS」が適しています。
複数のエディターグループを利用している場合でも、開いているファイルを把握しやすいのが特徴です。
開いているファイルを素早く切り替えたい場合
現在のエディターグループ内でファイルを切り替えたい場合は、Ctrl + Tabが便利です。
最近使用したエディターを確認しながら切り替えられます。
プロジェクト内からファイルを探したい場合
ワークスペース内のファイルを名前から検索したい場合は、Ctrl + Pを利用します。
現在開いているかどうかにかかわらず、目的のファイルを探して開くことができます。
エディター関連の機能を探したい場合
操作方法やコマンド名が分からない場合は、Ctrl + Shift + Pでコマンドパレットを開くと便利です。
「Show All Editors」などのキーワードから、目的に合ったコマンドを探せます。
VS Codeで開いているファイル一覧を確認する方法まとめ
VS Codeで現在開いているファイルを一覧で確認したい場合は、エクスプローラーにある「OPEN EDITORS」を利用する方法が基本です。
ただし、VS Codeの設定や画面構成によっては「OPEN EDITORS」が最初から表示されていないこともあります。
その場合は、エクスプローラーのビュー設定や「Open Editors」に関する設定を確認しましょう。
また、Ctrl + Tabは開いているエディターを切り替えるための機能ですが、基本的には現在のエディターグループが対象です。
一方、Ctrl + Pは現在開いているファイルだけを表示する機能ではなく、ワークスペース内のファイルを検索するための機能です。
それぞれの違いを整理すると、以下のようになります。
OPEN EDITORS
→ 現在開いているエディターを確認する
Ctrl + Tab
→ 現在のエディターグループ内でエディターを切り替える
Ctrl + P
→ ワークスペース内のファイルを検索する
Ctrl + Shift + P
→ VS Codeのコマンドを検索する
単純に「VS Codeで今開いているファイルを一覧で確認したい」という場合は、まず「OPEN EDITORS」を確認する方法がおすすめです。
以上、VS Codeで開いているファイル一覧を確認する方法についてでした。
最後までお読みいただき、ありがとうございました。
