Visual Studio Code入門エクスプローラーパネルでファイル・フォルダを操作しよう

VSCodeは単体のファイルを編集するエディタとしても利用できますが、簡易的なファイル管理機能を持っていて、フォルダ単位で管理をすることができます。Webサイトやソフトウェアを開発している場合、環境設定ファイルや各種ソースファイルなどがフォルダにまとまっているかと思います。

その場合は、そのフォルダ自体をVSCodeで開いてしまうと良いでしょう。まずは、デスクトップなどにフォルダを作成しましょう。

そしたら、VSCodeの「ファイル→フォルダを開く」をクリックし、今作成したフォルダを開きます。また、フォルダをアプリケーションのアイコンやウィンドウにドラッグしても開くことができます。さらに、Windowsの場合でインストール時にオプションを選択していると、コンテキストメニュー（右クリックメニュー）内にフォルダを開くメニューが追加されています。

なお、最初に開くときは図のような警告が表示されます。

信頼できるフォルダの場合は「信頼します」をクリックしましょう。

エクスプローラーを操作しよう

フォルダを開くと、画面の左側にエクスプローラーパネルが表示されます。マウスカーソルを重ねると、パネルタイトル部分には各ボタンが表示されます。

これをクリックすると、ファイルやフォルダを作成することができます。

ここでは、新しいファイルを作成してみましょう。先にファイル名をつける必要があります。面倒に感じますが、前節ので紹介した通りVSCodeは、ファイルの拡張子に従って「言語モード」が切り替わるため、最初にファイル名や拡張子を確定しておくと結果的に作業がしやすくなります。

フォルダも作成することができ、そのフォルダ内にファイルを作成することもできます。その場合は、最初にファイルを作りたいフォルダをクリックして反転した状態にしておいてから、ファイルを作成しましょう。

または、作成したファイルをフォルダにドラッグすることで移動することもできます。

空のフォルダに注意

VSCodeのエクスプローラーパネルは、その表示方法に若干クセがあり、空のフォルダを作成すると、階層では表示されなくなります。例えば次の例は、1stの中に2nd、その中に3rdという名前の空のフォルダがある場合の表示例です。

このように1列になって表示されてしまいます。若干見にくいですが、空のフォルダが存在するケースはそれほど多くないので、作業にはそれほど支障はないでしょう。

その他のパネル

エクスプローラーパネルには、いくつか他の機能も利用できます。それぞれ紹介しましょう。

開いているエディタ

現在タブで開いているエディターを、一覧表示できます。数が増えるとタブは一画面に表示しきれなくなるため、ここで管理すると良いでしょう。

なお、標準では表示されていない場合があるため、パネル右上の「…」をクリックして開いてから利用しましょう。

アウトライン

マークダウン形式のファイルやHTML等、「見出し」などが構造化される文書の場合に、見出しを階層表示してくれます。

ファイルが長い場合でも、このアウトライン状の見出しをクリックすることで、その場に移動することができるので便利でしょう。

タイムライン

ファイルを保存する度に、VSCodeが独自に履歴を保管し、過去の状態をここに表示することができます。クリックすることで、履歴と現在の状態を比べることもでき、間違えて編集してしまった場合などは、元に戻すこともできます。

ワークスペースを利用しよう

VSCodeではフォルダを開くことができますが、複数のプロジェクトを「ワークスペース」という機能で、まとめて管理することができます。

先の手順でフォルダを開いたら、「ファイル→フォルダーをワークスペースに追加」メニューをクリックしましょう。または直接ドラッグします。開き方を問われるので「フォルダーをワークスペースに追加」をクリックしましょう。

すると、エクスプローラーパネルに複数のフォルダを一度に表示することができ、個別に管理することができます。これを「ワークスペース」と言います。

ワークスペースは保存しておくこともできます。「ファイル→名前をつけてワークスペースを保存」をクリックしましょう。「.code-workspace」という独自の形式のファイルとして保存しておくことができます。

これをダブルクリックやドラッグ、「ファイル→ファイルでワークスペースを開く」メニューから開くこともできます。

フォルダー間で、ファイルを移動したりコピーすることもできるので、通常のFinderやエクスプローラーよりも便利に利用できるでしょう。