VSCode workspace 機能の使い方

そもそも workspace とは

workspaceとは複数のフォルダを一つのwindowで同時に開く機能です.
通常、VSCodeでフォルダを開く際は、一つのルートフォルダを開く構成になっていますが、workspaceを使うと、複数のフォルダを同時に開くことができます.

↓イメージ (これを実現できる！)

- frontend
    - src
- backend
    - src

どんな時に使う？

上のイメージでも表したように、フロントエンドとバックエンドのコードを同時に見たい時によく使うでしょう.

バックエンドもフロントエンドもTypeScriptで書かれていたりするとモノレポで管理されていることもあるかもしれません、そのような場合は、workspaceを使わなくてもシングルルートのフォルダがあるので、同時にひらけます.

しかし、Golang+Next.js のようなケースがよくあると思います. そのような時は、リポジトリが分かれていることが多く、同時に開けると便利です.

設定の仕方

workspace を設定するには、<workspace-name>.code-workspaceというファイルを用意して設定します.

{
  "folders": [
    {
      "path": "frontend-folder"
    },
    {
      "path": "backend-folder"
    }
  ]
}

path のところに .code-workspace ファイルからの相対パスで、workspaceに追加したいフォルダのパスを指定します.

開く時は、下記の画像の一番下にある、「ファイルでワークスペースを開く...」から作成した、.code-workspace ファイルを開くと、開くことができます！

workspaceの開き方