VS Codeの機能紹介 その６ (ワークスペース)

VS Code VS Code/Extension

VS Codeの使えそうな機能を何回かに分けて記事に整理していく。
今回は、ワークスペースについて要点まとめ。

環境

  • Windows 11 Home 23H2
  • Visual Studio Code 1.91

ワークスペースとは？

ワークスペースとは、VS Codeによって開かれる1つ以上のフォルダーの集合で、以下を可能にする。

  • 特定のフォルダー、または複数フォルダーに対してのみ設定を適用
  • デバッグ構成やタスクを保持
  • UIの状態を保持 (例. エディタで開いているファイル)
  • ワークスペース単位での拡張機能のON/OFF

ワークスペースには、以下の2つの種類がある。

  • 単一フォルダーのワークスペース
  • 複数ルートのワークスペース

単一フォルダーのワークスペース

通常は、VS Codeで開いた単一のフォルダーがワークスペースになる。

ワークスペースの管理

ワークスペースを開く

単一フォルダーのワークスペースを開くには、以下のいずれかを実行する。

  • [ファイル]メニュー -> [フォルダーを開く…]
  • コマンドパレット(Ctrl+Shift+P) -> ファイル: フォルダーを開く… (File: Open Folder…)

ワークスペースの設定

単一フォルダーのワークスペースの設定は、フォルダー内のファイル (.vscode/settings.json)に保持される。詳しくは、ワークスペース設定 参照。
デバッグ構成やタスクも同様に、フォルダー内のファイル (.vscode/tasks.json、launch.json)に保持される。

複数ルートのワークスペース

ワークスペースのルートは複数フォルダーでも良い (複数ルートのワークスペース)
複数ルートのワークスペースを使用すると、以下の例ようなメリットがある。

例1. 別々のフォルダーをまとめて、1つのプロジェクトとして作業できるようになる

  • ../folder-c/Client   // クライアントソース、
  • ../folder-s/Server   // サーバソース
  • ../folder-d/Docs     // ドキュメント

例2. 同一フォルダー内の不要なフォルダーをフィルタで除外することができる

  • my-folder/a
  • my-folder/b
  • my-folder/c  // 除外

複数ルートのワークスペースの管理

フォルダーを追加

複数ルートのワークスペースを作成するには、以下のいずれかを実行し、ワークスペースにフォルダーを追加する。

  • [ファイル]メニュー -> [フォルダーをワークスペースに追加…]
  • [エクスプローラ]ビュー内で右クリック -> [ワークスペースにフォルダーを追加…]
  • コマンドパレット(Ctrl+Shift+P) -> ワークスペース: ワークスペースにフォルダーを追加… (Workspaces: Add Folder to Workspace…)

フォルダーを削除

追加したフォルダーをワークスペースから削除するには、以下のいずれかを実行する。

  • [エクスプローラ]ビュー内で右クリック -> [ワークスペースからフォルダーを削除…]
  • コマンドパレット(Ctrl+Shift+P) -> ワークスペース: ワークスペースにフォルダーを削除… (Workspaces: Remove Folder from Workspace…)

ワークスペースを保存

以下のいずれかを実行すると、ワークスペースが.code-workspaceファイルとして保存される。

  • [ファイル]メニュー -> [名前を付けてワークスペースを保存…]
  • コマンドパレット(Ctrl+Shift+P) -> ワークスペース: 名前を付けてワークスペースを保存… (Workspaces: Save Workspace As…)

ワークスペースを開く

保存した複数ルートのワークスペースを開くには、以下のいずれかを実行する。

  • .code-workspaceファイルをダブルクリック
  • [ファイル]メニュー -> [ファイルでワークスペースを開く…] -> .code-workspaceファイルを選択
  • コマンドパレット(Ctrl+Shift+P) -> ファイル: ファイルでワークスペースを開く… (File: Open Workspace from File…)

ワークスペースの設定

複数ルートのワークススペースにおける設定、デバッグ構成やタスクは、ワークスペース単位か、もしくは個別のフォルダー単位で定義できる。

ワークスペース単位の設定

  • ワークスペースに属するすべてのフォルダーが対象になる
  • ワークスペース単位の設定をするには、以下のいずれかの方法で、設定エディタを起動する
    • コマンドパレット(Ctrl+Shift+P) -> 基本設定: ワークスペース設定を開く (Preferences: Open Workspace Settings)
    • Ctrl+, -> [ワークスペース]タブを選択 (下図)

設定値は、.code-workspaceファイル(JSON)に保存される。
.code-workspaceファイルをVS Code上で編集するには、以下のいずれかのコマンドを実行すれば良い。

  • コマンドパレット(Ctrl+Shift+P) -> 基本設定: ワークスペース設定を開く (JSON) (Preferences: Open Workspace Settings (JSON))
  • コマンドパレット(Ctrl+Shift+P) -> ワークスペース: ワークスペースの構成ファイルを開く (Workspace: Open Workspace Configuration File)

ワークスペース全体に関係するデバッグ構成やタスクも、設定同様、.code-workspaceファイル内に保存することができる。

個別のフォルダー単位の設定

  • ワークスペースに属する個別のフォルダーが対象になる
  • 個別のフォルダー単位の設定をするには、以下のいずれかの方法で、設定エディタを起動する
    • コマンドパレット(Ctrl+Shift+P) -> 基本設定: フォルダーの設定を開く (Preferences: Open Folder Settings)
    • Ctrl+, -> [フォルダー]タブを選択 (下図)

設定値は、以下のJSONファイルに保存される。

<フォルダー>/.vscode/settings.json

JSONファイルをVS Code上で編集するには、[エクスプローラー]ビューのファイルを直接クリックするか、以下のコマンドを実行すれば良い。

  • コマンドパレット(Ctrl+Shift+P) -> 基本設定: フォルダーの設定を開く (JSON) (Preferences: Open Folder Settings (JSON))

個別のフォルダーに関係するデバッグ構成やタスクも、設定同様の場所に保存される。

<フォルダー>/.vscode/launch.json // デバッグ構成
<フォルダー>/.vscode/tasks.json // タスク

ワークスペースファイル (.code-workspace)

複数ルートのワークスペースの設定内容は、以下のような.code-workspaceファイルに保存される。

例.

// <project>.code-workspace
{
  // 複数ルートのワークスペースを構成するフォルダー
  // フォルダーのパス(絶対/相対どちらでも良い)と、[エクスプローラ]ビューでの表示名
  "folders": [
    {
        "path": "../folder-c",  // ../folder-cをワークスペースに含める
        "name": "Client"  // [エクスプローラ]ビューで、フォルダを"Client"と表示
    },
    {
        "path": "../folder-s",  // ../folder-sをワークスペースに含める
        "name": "Server"  // [エクスプローラ]ビューで、フォルダを"Server"と表示
    },
    {
        "path": "../folder-d",  // ../folder-dをワークスペースに含める
        "name": "Document"  // [エクスプローラ]ビューで、フォルダを"Document"と表示
    }
    // ...
  ],
  
  // 設定
  // 内容は、.vscode/settings.jsonと同じ
  "settings": {
    // ...
  },
  
  // デバッグ構成 
  // 内容は、.vscode/launch.jsonと同じ
  "launch": {
    "version": "0.2.0",
    "configurations": [
      // ...
    ],
    "compounds": [
      {
        "name": "lanuch server and client",
        "configurations": [
          {
            // ../folder-sフォルダのlaunch serverを実行する
            "path": "../folder-s",  // デバッグ構成の一意制を確保するため、パスを指定
            "name": "launch server"
          },
          {
            // ../folder-cフォルダのlaunch clientを実行する
            "path": "../folder-c",  // デバッグ構成の一意制を確保するため、パスを指定
            "name": "launch client"
        }
        ]
      },
      // ...
    ]
  },
  
  // タスク
  // 内容は、./vscode/tasks.jsonと同じ
  "tasks": {
    "version": "2.0.0",
    "tasks": [
      // ...
    ]
  }
}

参考

What is a VS Code workspace?
Learn about Visual Studio Code workspaces
code.visualstudio.com
Multi-root Workspaces
You can open and work on multiple project folders in Visual Studio Code with multi-root workspaces.
code.visualstudio.com
タイトルとURLをコピーしました