🛠️

VS Code の Multi-root Workspaces でルートディレクトリをワークスペースとしていい感じに扱う

に公開
VS Code
tech

VS Code の Multi-root Workspaces、活用されてますか？
されてますね！良いことです。

例えばフロントエンド・バックエンド両方を含むモノレポなんかでは、ワークスペース分離できると便利ですよね。

今回は Multi-root Workspaces を活用しつつ、ルートディレクトリもワークスペースとしていい感じに扱っていく話です。

想定プロジェクト

以下を持つモノレポを想定します。

  • バックエンドのディレクトリ（frontend/）がある
  • フロントエンドのディレクトリ（backend/）がある
  • GitHub の設定ディレクトリ（.github/）がある
  • プロジェクトルートに README がある
.
├── .github
│   └── pull_request_template.md
├── README.md
├── backend
│   └── main.rs
└── frontend
    └── index.ts

リポジトリはこちら：

https://github.com/23prime/vscode-multi-root-workspaces-example

💡 フロントエンド、バックエンドをワークスペース化する

フロントエンド、バックエンドをそれぞれワークスペース化します。

プロジェクトルートに {適当な名前}.code-workspace というファイルを作ります。
※今回は example.code-workspace にします。

example.code-workspace
{
  "folders": [
    {
      "name": "Frontend",
      "path": "./frontend"
    },
    {
      "name": "Backend",
      "path": "./backend"
    }
  ]
}

この設定でワークスペースを開きます。

すでに VS Code で編集している場合、右下に Open Workspace が表示されるので、そこから開けます。

コマンドだと：

$ code example.code-workspace

するとこんな感じで、フロント・バックのワークスペースを1つのウィンドウで開くことができます。

🤔 問題点 - 1

  • README がない！？
  • .github/ 用のワークスペース作らなきゃならない！？

ルートにあるファイルも編集したいし、.github/ のようにワークスペースとして独立管理するほどでもないディレクトリもありますよね。

ということで、ルートディレクトリもワークスペースにしちゃいます。

💡 ルートディレクトリもワークスペース化する

ルートの設定を追加します。

example.code-workspace
 {
   "folders": [
     {
       "name": "Frontend",
       "path": "./frontend"
     },
     {
       "name": "Backend",
       "path": "./backend"
     },
+    {
+      "name": "Root",
+      "path": "./"
+    }
   ]
 }

これで開き直すと、こんな感じになります。

🤔 問題点 - 2

  • frontend/ backend/ が Root ワークスペースにもあって邪魔。

どうしても困る場面はおそらくありません。
例えば Root 側にある frontend/index.ts を開くと、自動的に Frontend ワークスペースのものとして認識されます。

ですが、まあ、同じものが2つずつ表示されていて、シンプルに邪魔だなぁと…。

💡 ルートワークスペースから個別ワークスペースのディレクトリを除外する

Root ワークスペースの設定で、対象ディレクトリを除外させます。

.vscode/settings.json
{
  "files.exclude": {
    "frontend/": true,
    "backend/": true
  }
}

すると、フロント・バックはそれぞれのワークスペースのみに表示されるようになります。

いい感じです！

🤔 問題点 - 3

  • Copy Relative Path でルートからの相対パスをコピーできない。

→ 知らん。

📚 参考

Discussion