マルチルートワークスペース

Visual Studio Code では、マルチルート ワークスペースを使用して複数のプロジェクト フォルダーを操作できます。これは、一度に複数の関連プロジェクトに取り組む場合に役立ちます。たとえば、製品のソース コードを更新する際に、製品のドキュメントを含むリポジトリを最新の状態に保ちたい場合があります。

注意: VS Code の「ワークスペース」の概念について詳しく知りたい場合は、VS Code の「ワークスペース」とは何ですか？ を参照してください。明示的にマルチルート ワークスペースを作成しない限り、「ワークスペース」は単一のプロジェクト ルート フォルダーです。

フォルダーの追加

既存のワークスペースに別のフォルダーを追加するのは簡単です。フォルダーを追加する方法はいくつかあります。

ワークスペースにフォルダーを追加

ファイル > ワークスペースにフォルダーを追加 コマンドを実行すると、新しいフォルダーを選択するためのフォルダーを開くダイアログが表示されます。

ルート フォルダーが追加されると、エクスプローラーには新しいフォルダーがファイル エクスプローラーのルートとして表示されます。任意のルート フォルダーを右クリックし、コンテキスト メニューを使用してフォルダーを追加または削除できます。

ファイル エクスプローラーは以前と同じように機能し、動作します。ルート フォルダー間でファイルを移動したり、コンテキスト メニューやエクスプローラー ビューで提供される一般的なファイル操作アクションを使用したりできます。

files.exclude のような設定は、設定されていれば各ルート フォルダーでサポートされ、グローバル ユーザー設定として設定されていればすべてのフォルダーでサポートされます。

ドラッグ アンド ドロップ

ドラッグ アンド ドロップを使用して、ワークスペースにフォルダーを追加できます。フォルダーをファイル エクスプローラーにドラッグして、現在のワークスペースに追加します。複数のフォルダーを選択してドラッグすることもできます。

注意: 単一のフォルダーを VS Code のエディター領域にドロップすると、引き続きそのフォルダーが単一フォルダー モードで開かれます。複数のフォルダーをエディター領域にドラッグ アンド ドロップすると、新しいマルチルート ワークスペースが作成されます。

ドラッグ アンド ドロップを使用して、ワークスペース内のフォルダーの順序を変更することもできます。

複数選択のネイティブ ファイルを開くダイアログ

プラットフォームのネイティブ ファイルを開くダイアログで複数のフォルダーを開くと、マルチルート ワークスペースが作成されます。

コマンドライン --add

最後にアクティブだった VS Code インスタンスに、マルチルート ワークスペースとしてフォルダーまたは複数のフォルダーを追加します。

  code --add vscode vscode-docs

フォルダーの削除

ワークスペースからフォルダーを削除 コンテキスト メニュー コマンドで、ワークスペースからフォルダーを削除できます。

ワークスペース ファイル

複数のフォルダーを追加すると、それらは最初に「UNTITLED WORKSPACE」というタイトルのワークスペースに配置され、ワークスペースを保存するまでその名前が維持されます。ワークスペースを永続的な場所に保存する必要がある場合 (たとえば、デスクトップ上など) を除いて、ワークスペースを保存する必要はありません。名前のないワークスペースは、それを使用している VS Code インスタンスが開いている間は存在します。名前のないワークスペースを使用しているインスタンスを完全に閉じると、将来再び開く予定がある場合は、保存を求められます。

ワークスペースを保存すると、.code-workspace ファイルが作成され、ファイル名がファイル エクスプローラーに表示されます。

ワークスペースを名前を付けて保存...

ワークスペース ファイルを新しい場所に移動したい場合は、ファイル > ワークスペースを名前を付けて保存 コマンドを使用できます。このコマンドは、新しいワークスペース ファイルの場所に対して、正しいフォルダー パスを自動的に設定します。

ワークスペース ファイルを開く

ワークスペースを再度開くには、次のいずれかの方法を使用します。

• プラットフォームのエクスプローラーで .code-workspace ファイルをダブルクリックします。
• ファイル > ワークスペースを開く コマンドを使用して、ワークスペース ファイルを選択します。
• ファイル > 最近開いたもの (⌃R (Windows、Linux Ctrl+R)) のリストからワークスペースを選択します。
  • ワークスペースは、フォルダーと区別するために (ワークスペース) というサフィックスが付きます。

VS Code で単一フォルダーが開いている場合の フォルダーを閉じる と同様に、アクティブなワークスペースを閉じるための ワークスペースを閉じる (⌘K F (Windows、Linux Ctrl+K F)) コマンドがあります。

ワークスペース ファイルのスキーマ

.code-workspace のスキーマは非常にシンプルです。絶対パスまたは相対パスを持つフォルダーの配列があります。ワークスペース ファイルを共有したい場合は、相対パスの方が適しています。

name 属性を使用してフォルダーの表示名を上書きし、エクスプローラー内のフォルダーに、より意味のある名前を付けることができます。たとえば、フォルダー名でコンテンツを簡単に識別できるように、「Product」や「Documentation」などのプロジェクト フォルダーに名前を付けることができます。

{
  "folders": [
    {
      // Source code
      "name": "Product",
      "path": "vscode"
    },
    {
      // Docs and release notes
      "name": "Documentation",
      "path": "vscode-docs"
    },
    {
      // Yeoman extension generator
      "name": "Extension generator",
      "path": "vscode-generator-code"
    }
  ]
}

これにより、エクスプローラーに次のように表示されます。

上記の例からわかるように、ワークスペース ファイルにコメントを追加できます。

ワークスペース ファイルには、settings の下にワークスペースの グローバル設定、extensions の下に 拡張機能の推奨事項 も含めることができ、これらについては以下で説明します。

全般的な UI

エディター

マルチルート ワークスペースを使用する場合、主にフォルダー間のファイルを区別するために、VS Code UI にいくつかの変更点があります。たとえば、複数のフォルダー内のファイル間で名前の競合がある場合、VS Code はタブ ヘッダーにフォルダー名を含めます。

常にタブ ヘッダーにフォルダーが表示されるようにしたい場合は、workbench.editor.labelFormat 設定 の「medium」または「long」値を使用して、フォルダーまたはフルパスを表示できます。

"workbench.editor.labelFormat": "medium"

開いているエディター や クイック オープン (⌘P (Windows、Linux Ctrl+P)) のような VS Code UI リストには、フォルダー名が含まれます。

ファイル アイコン テーマ を使用していて、アクティブなテーマがそれをサポートしている場合、特別なワークスペース アイコンが表示されます。

以下に、組み込みの Minimal (Visual Studio Code) ファイル アイコン テーマからのワークスペース アイコンを示します。

検索

グローバル検索などの VS Code の機能は、すべてのフォルダーで機能し、検索結果をフォルダーごとにグループ化します。

マルチルート ワークスペースを開いている場合、ファイルに含める ボックスで ./ 構文を使用することで、単一のルート フォルダー内を検索することを選択できます。たとえば、./project1/**/*.txt と入力すると、project1/ ルート フォルダー内のすべての .txt ファイルが検索されます。

設定

1 つのワークスペースに複数のルート フォルダーがある場合、各ルート フォルダーに、そのフォルダーに適用される設定を定義する .vscode フォルダーを持つことができます。設定の競合を避けるため、マルチルート ワークスペースを使用する場合は、リソース (ファイル、フォルダー) 設定のみが適用されます。エディター全体に影響する設定 (たとえば、UI レイアウト) は無視されます。たとえば、2 つのプロジェクトが両方ともズーム レベルを設定することはできません。

ユーザー設定は、単一フォルダー プロジェクトと同様にサポートされており、マルチルート ワークスペース内のすべてのフォルダーに適用されるグローバル ワークスペース設定を設定することもできます。グローバル ワークスペース設定は .code-workspace ファイルに保存されます。

{
  "folders": [
    {
      "path": "vscode"
    },
    {
      "path": "vscode-docs"
    },
    {
      "path": "vscode-generator-code"
    }
  ],
  "settings": {
    "window.zoomLevel": 1,
    "files.autoSave": "afterDelay"
  }
}

単一フォルダー インスタンスから複数のフォルダーに移行すると、VS Code は最初のフォルダーから適切なエディター全体の値を新しいグローバル ワークスペース設定に追加します。

設定エディターから、さまざまな設定ファイルを簡単に確認および変更できます。設定エディターのタブを使用すると、ユーザー設定、グローバル ワークスペース設定、および個別のフォルダー設定を選択できます。

次のコマンドを使用して、特定の設定ファイルを開くこともできます。

• 基本設定: ユーザー設定を開く - グローバル ユーザー設定を開きます
• 基本設定: ワークスペース設定を開く - ワークスペース ファイルの設定セクションを開きます。
• 基本設定: フォルダー設定を開く - アクティブなフォルダーの設定を開きます。

グローバル ワークスペース設定はユーザー設定を上書きし、フォルダー設定はワークスペース設定またはユーザー設定を上書きできます。

サポートされていないフォルダー設定

サポートされていないエディター全体のフォルダー設定は、フォルダー設定でグレー表示され、既定のフォルダー設定 リストからフィルターで除外されます。また、設定の前に情報アイコンが表示されます。

デバッグ

マルチルート ワークスペースでは、VS Code はすべてのフォルダーで launch.json デバッグ構成ファイルを検索し、フォルダー名をサフィックスとして表示します。さらに、VS Code はワークスペース構成ファイルで定義されている起動構成も表示します。

上記の例は、TSLint 拡張機能のデバッグ構成を示しています。tslint 拡張フォルダーには、VS Code 拡張機能ホストで拡張機能の実行を開始するための launch 構成があり、tslint-server フォルダーには、実行中の TSLint サーバーにデバッガーをアタッチするための attach 構成もあります。

vscode-tslint ワークスペース 内の tslint、tslint-server、および tslint-tests フォルダーの 3 つの 構成の追加 コマンドも確認できます。構成の追加 コマンドは、フォルダーの .vscode サブフォルダーにある既存の launch.json ファイルを開くか、新しいファイルを作成してデバッグ構成テンプレートのドロップダウンを表示します。

構成で使用される 変数 (たとえば、${workspaceFolder} または現在非推奨の ${workspaceRoot}) は、それらが属するフォルダーを基準に解決されます。ルート フォルダーの名前を (コロンで区切って) 変数に付加することで、ワークスペース フォルダーごとに変数をスコープ指定することが可能です。

ワークスペース起動構成

ワークスペース スコープの起動構成は、ワークスペース構成ファイル (コマンド パレットで ワークスペース: ワークスペース構成ファイルを開く) の "launch" セクションにあります。

または、「構成の追加 (ワークスペース)」エントリから起動構成ドロップダウン メニュー経由で新しい起動構成を追加することもできます。

複合起動構成は、名前がワークスペース内で一意である限り、個々の起動構成を名前で参照できます。たとえば、次のようになります。

  "compounds": [{
      "name": "Launch Server & Client",
      "configurations": [
        "Launch Server",
        "Launch Client"
      ]
  }]

個々の起動構成名が一意でない場合は、より詳細な「folder」構文で対象フォルダーを指定できます。

  "compounds": [{
      "name": "Launch Server & Client",
      "configurations": [
        "Launch Server",
        {
          "folder": "Web Client",
          "name": "Launch Client"
        },
        {
          "folder": "Desktop Client",
          "name": "Launch Client"
        }
      ]
  }]

compounds に加えて、ワークスペース構成ファイルの launch セクションには、通常の起動構成も含まれる場合があります。使用されるすべての変数が特定のフォルダーに明示的にスコープ設定されていることを確認してください。そうでない場合、ワークスペースでは有効になりません。変数リファレンスで、明示的にスコープ設定された変数に関する詳細を確認できます。

プログラムが「Program」フォルダーにあり、「Library」フォルダー内のすべてのファイルがステップ実行時にスキップされる起動構成の例を次に示します。

"launch": {
  "configurations": [{
      "type": "node",
      "request": "launch",
      "name": "Launch test",
      "program": "${workspaceFolder:Program}/test.js",
      "skipFiles": [
        "${workspaceFolder:Library}/out/**/*.js"
      ]
  }]
}

タスク

VS Code がデバッグ構成を検索する方法と同様に、VS Code はワークスペース内のすべてのフォルダーで gulp、grunt、npm、および TypeScript プロジェクト ファイルからタスクを自動検出しようとし、tasks.json ファイルで定義されたタスクも検索します。タスクの場所はフォルダー名のサフィックスで示されます。tasks.json で定義されたタスクはバージョン 2.0.0 である必要があることに注意してください。

上記の TSLint 拡張機能 ワークスペース の例から、tslint および tslint-tests フォルダー内の tasks.json ファイルから 2 つの 構成済みタスク と、多数の自動検出された npm および TypeScript コンパイラ 検出タスク があることがわかります。

ワークスペース タスク構成

ワークスペース スコープのタスクは、ワークスペース構成ファイル (コマンド パレットで ワークスペース: ワークスペース構成ファイルを開く) の "tasks" セクションにあります。ワークスペース構成ファイルでは、"shell" および "process" 型のタスクのみを定義できます。

ソース管理

マルチルート ワークスペースでは、複数のアクティブなリポジトリがある場合に概要を示す ソース管理プロバイダー セクションがあります。これらは複数の SCM プロバイダーによって提供される場合があります。たとえば、Git リポジトリと Azure DevOps Server ワークスペースを並べて配置できます。このビューでリポジトリを選択すると、ソース管理の詳細が以下に表示されます。

Ctrl+クリック または Shift+クリック を使用して、複数のリポジトリを選択できます。それらの詳細は、下に個別の領域として表示されます。

拡張機能

拡張機能の作成者である場合は、VS Code マルチルート ワークスペース API と、拡張機能を複数のフォルダーでうまく機能させる方法について学ぶために、マルチルート ワークスペース API の採用 ガイドを参照してください。

以下に、マルチルート ワークスペース API を採用した人気のある拡張機能の一部を示します。

注意: 拡張機能がまだ複数のフォルダーをサポートしていない場合でも、マルチルート ワークスペースの最初のフォルダーでは引き続き機能します。

拡張機能の推奨事項

VS Code は、フォルダーの .vscode サブフォルダーにある extensions.json ファイルを介して、フォルダーレベルの拡張機能の推奨事項をサポートしています。また、それらを .code-workspace ファイルに追加することで、グローバル ワークスペース拡張機能の推奨事項を提供することもできます。拡張機能: 推奨拡張機能を構成 (ワークスペース フォルダー) コマンドを使用して、ワークスペース ファイルを開き、拡張機能識別子 ({publisherName}.{extensionName}) を extensions.recommendations 配列に追加できます。

{
  "folders": [
    {
      "path": "vscode"
    },
    {
      "path": "vscode-docs"
    }
  ],
  "extensions": {
    "recommendations": ["eg2.tslint", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
  }
}

次のステップ

• VS Code の「ワークスペース」とは何ですか？ - 単一フォルダーおよびマルチルート ワークスペースの詳細について。
• デバッグ - アプリケーションのデバッグを設定する方法について学習します。
• タスク - タスクを使用すると、VS Code 内でコンパイラなどの外部ツールを実行できます。

よくある質問

単一プロジェクト フォルダーでの作業に戻るにはどうすればよいですか？

ワークスペースを閉じてフォルダーを直接開くか、ワークスペースからフォルダーを削除することができます。

拡張機能の作成者として、何をすればよいですか？

弊社の マルチルート ワークスペース API の採用 ガイドをご覧ください。ほとんどの拡張機能は、マルチルート ワークスペースを簡単にサポートできます。