VS Codeのマルチルートワークスペースの使い方｜複数フォルダを1ウィンドウに

VS Codeのウィンドウ、何枚開いてる？

フロントとバックエンドで1枚ずつ、授業のフォルダでもう1枚。気づいたらVS Codeが3枚も4枚も並んでて、Alt+Tabで目当てのウィンドウを探すだけで数秒溶ける。しかもどのウィンドウがどのリポジトリか、タスクバーのアイコンじゃ区別がつかない。

これ、VS Codeの「マルチルートワークスペース」で1枚に畳める。

目次 / INDEX

マルチルートワークスペースは、複数フォルダを1つのウィンドウのルートにする

普通にVS Codeで「フォルダを開く」をすると、ルートは1つだけだ。エクスプローラー（左のファイルツリー）の一番上にそのフォルダが来て、検索も設定もそのフォルダの中だけが対象になる。

マルチルートワークスペースは、このルートを複数持てるようにしたもの。エクスプローラーに複数のフォルダが縦に並んで、それぞれが対等なルートとして扱われる。フロントのリポジトリとバックエンドのリポジトリが、1つのウィンドウの中に上下で並ぶイメージ。

親フォルダを開けばいいじゃん、と思うかもしれないけど、それだと関係ないフォルダまで全部ツリーに入ってくるし、そもそも別ドライブや離れた場所にあるフォルダはまとめられない。マルチルートなら、場所がバラバラのフォルダを好きな組み合わせで束ねられる。

作り方は Add Folder to Workspace → Save Workspace As の2手

手順は思ってるより簡単だ。

1. まず普通に1つ目のフォルダを開く
2. File メニューから「Add Folder to Workspace（ワークスペースにフォルダーを追加）」で2つ目以降を足す
3. File メニューの「Save Workspace As（名前を付けてワークスペースを保存）」で保存する

これで .code-workspace という拡張子のファイルができる。次回からはこのファイルを開く（ダブルクリックでもいい）だけで、全フォルダが揃った状態で復元される。ウィンドウを何枚も開き直す作業が丸ごと消える。

中身はただのJSONで、手で編集もできる。

{
  "folders": [
    { "path": "frontend" },
    { "path": "../backend-api", "name": "バックエンド" }
  ],
  "settings": {}
}

folders 配列にフォルダを並べるだけ。path は .code-workspace ファイルからの相対パスで書けるので、置き場所さえ決めればチームで共有もできるはず。

name は任意で、ツリーに表示される名前を変えられる。フォルダ名が app とか src とかで被ってるとき、これがけっこう効く。

嬉しいのは横断検索と、ツリーを1画面に畳めること

一番効くのは検索だ。Ctrl+Shift+F の検索がワークスペース内の全ルートに効く。

フロントで使ってるAPIのエンドポイント名でバックエンド側も一緒に検索する、みたいなことがウィンドウを切り替えずにできる。置換も同じで、全ルートまたぎで一括置換できる。

ファイルツリーが1画面に収まるのも地味に大きい。「あのファイルどのウィンドウだっけ」がなくなるし、Ctrl+P のファイル名ジャンプも全ルート対象になる。

あとウィンドウが1枚で済むので、VS Codeのプロセスが減ってメモリにも優しいし、何より注意が散らない。Alt+Tabの候補にVS Codeが4枚並ぶ状態と比べると、頭の切り替えコストが全然違う。

ツリーが縦に長くなるぶん、画面は広い方が快適だと思う。横に広いディスプレイならエディタを分割してフロントとバックを同時に表示できるので、相性はいい。外部モニターを足すなら大学生向けモニターの選び方に1万円台からまとめてある。

Ctrl+Shift+F や Ctrl+P を何度も押す使い方なので、外付けキーボードを足すなら大学生におすすめのキーボードで配列や打鍵感から選ぶといい。

設定はフォルダごとに分けられる（ここが本番）

マルチルートの真価はここだと思う。設定の置き場所が2段階ある。

• ワークスペース全体の設定 → .code-workspace の settings に書く
• フォルダ個別の設定 → 各フォルダの .vscode/settings.json に書く

例えばフロントは Prettier でフォーマット、バックエンドは別のフォーマッタ、みたいな使い分けが、各フォルダの .vscode/settings.json に書くだけで共存できる。Pythonのリポジトリと TypeScript のリポジトリを同居させても、それぞれの設定が生きる。Prettier などの拡張と settings.json の基本はVS Codeの拡張と設定の記事にまとめてある。

ただし注意が1つ。設定にはスコープという概念があって、フォルダ単位で効くのは resource スコープの設定（ファイルやフォルダに関わるもの）だけ。window スコープの設定は .code-workspace の settings に、application スコープの設定（VS Code全体に関わるもの）はユーザー設定に書く必要がある。

フォルダの settings.json に書いたのに効かない、というときはまずこのスコープを疑うといい。どの項目がどのスコープかは、公式ドキュメントで確認できる。

あと、tasks.json や launch.json から特定フォルダのパスを参照したいときは ${workspaceFolder:フォルダ名} という変数が使える。マルチルートだと ${workspaceFolder} がどのフォルダを指すか曖昧になるので、フォルダ名付きで指定するのが安全だ。tasks.json 自体の書き方はVS Codeのtasks.jsonで頻出コマンドを一発にする記事に書いた。

いつマルチルートにすべきか（単一フォルダで十分な時もある）

全部マルチルートにすればいいわけじゃない。判断の型はこのくらいだと思う。

• 関連しあう複数リポジトリを同時にいじるならマルチルート。フロントとバックエンド、アプリ本体と共有ライブラリ、みたいにAPIの変更が両方に波及する組み合わせは、横断検索と1画面ツリーの恩恵をフルに受けられる
• 単独リポジトリなら普通に「フォルダを開く」で十分。.code-workspace ファイルを管理するコストの方が無駄になる
• 中身は独立してるけど横断検索したい、というフォルダ群も有力な用途。授業ごとのフォルダを全部束ねておいて、「前にどの授業でこの関数書いたっけ」を Ctrl+Shift+F で一発検索する、みたいな使い方だ

逆に、たまにしか触らないフォルダまで詰め込むとツリーが縦に伸びて探しにくくなる。同時に触るものだけ束ねるのがコツだと思う。用途ごとに .code-workspace を複数作って使い分けてもいい。

つまずきポイント

先に知っておくと戸惑わないのが3つ。

Source Control（Git）ビューに複数リポジトリが並ぶ

それぞれ独立して commit / push できるのは便利なんだけど、裏を返すと「どのリポジトリに commit しようとしてるか」を毎回確認する必要がある。リポジトリ名を見ずにステージすると、意図と違う方に変更が積まれてることがある。Git の操作自体がまだ不安なら、先にGit入門の記事を読んでおくと安心だ。

拡張機能の有効/無効はワークスペース単位

「このワークスペースでは無効にする」はできるけど、「このフォルダだけ無効」はできない。フォルダAでは使いたいけどBでは邪魔、という拡張は諦めてワークスペース全体でオンオフを決めることになる。

フォルダの設定で効くのは resource スコープだけ

さっきも書いたスコープの話。「設定書いたのに反映されない」の原因は、体感これが一番多いはず。

まとめ

「フォルダを開く」しか使ってなかったなら、一度試す価値はある。今開いてる別ウィンドウのVS Code、あれを File → Add Folder to Workspace で1枚に畳んで、Save Workspace As するだけだ。合わなかったら .code-workspace ファイルを消せば元通りなので、失うものは何もない。