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

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

注: VS Code の「ワークスペース」の概念の詳細については、「VS Code の「ワークスペース」とは?」を参照してください。明示的にマルチルート ワークスペースを作成しない限り、「ワークスペース」はプロジェクトの単一のルート フォルダーにすぎません。

フォルダーの追加

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

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

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

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

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

files.exclude などの設定は、各ルート フォルダーに対して構成されている場合はサポートされ、グローバル ユーザー設定として構成されている場合はすべてのフォルダーでサポートされます。

ドラッグ アンド ドロップ

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

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

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

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

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

コマンドライン --add

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

  code --add vscode vscode-docs

フォルダーの削除

ワークスペースからフォルダーを削除するには、ワークスペースからフォルダーを削除 コンテキスト メニュー コマンドを使用します。

ワークスペース ファイル

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

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

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

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

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

ワークスペースを再度開くには、次の操作を実行できます。

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

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

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

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

Explorer のフォルダーにわかりやすい名前を付けるために、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 は最初のフォルダーから適切なエディター全体のsettingsを新しいグローバル ワークスペース設定に追加します。

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

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

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

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

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

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

デバッグ

マルチルート ワークスペースでは、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+クリック を使用して、複数のリポジトリを選択できます。それらの詳細は、下に個別の領域として表示されます。

拡張機能

拡張機能の作成者の場合は、マルチルート ワークスペース API の採用ガイドを確認して、VS Code マルチルート ワークスペース 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 の採用ガイドを参照してください。ほとんどの拡張機能は、マルチルート ワークスペースを簡単にサポートできます。