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

マルチルート ワークスペースを使用すると、Visual Studio Code で複数のプロジェクト フォルダを操作できます。これは、関連するいくつかのプロジェクトを同時に処理する場合に便利です。たとえば、製品のソース コードを更新するときに、製品のドキュメントが含まれるリポジトリを常に最新の状態に維持したい場合などです。

注意: VS Code の「ワークスペース」の概念について詳しく知りたい場合は、VS Code の「ワークスペース」とは？ をご覧ください。明示的にマルチルート ワークスペースを作成する場合を除き、「ワークスペース」は単にプロジェクトの単一のルート フォルダを指します。

フォルダの追加

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

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

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

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

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

個別設定されている場合、各ルート フォルダごとに files.exclude VS Code で開く VS Code Insiders で開く のような設定がサポートされ、グローバル ユーザー設定として構成されている場合はすべてのフォルダに適用されます。

ドラッグ アンド ドロップ

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

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

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

複数選択可能な OS 標準のファイルを開くダイアログ

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

コマンドライン --add

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

  code --add vscode vscode-docs

フォルダの削除

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

ワークスペース ファイル

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

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

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

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

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

ワークスペースを再び開くには、以下を行うことができます。

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

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 VS Code で開く VS Code Insiders で開く 設定で "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 は最初のフォルダからエディタ全体に適した設定を新しいグローバル ワークスペース設定に追加します。

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

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

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

グローバル ワークスペース設定はユーザー設定よりも優先され、フォルダ設定はワークスペース設定やユーザー設定よりも優先されます。

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

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

デバッグ

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

上の例は、TSLint 拡張機能 のデバッグ構成を示しています。tslint 拡張機能フォルダから拡張機能を VS Code 拡張機能ホストで実行開始するための launch VS Code で開く VS Code Insiders で開く 構成と、デバッガーを実行中の TSLint サーバーにアタッチするための tslint-server フォルダからの 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 VS Code で開く VS Code Insiders で開く セクションに通常の起動構成を含めることもできます。使用するすべての変数は、特定のフォルダに明示的にスコープ指定されていることを確認してください。そうしないと、ワークスペース内で有効になりません。明示的にスコープ指定された変数の詳細については、変数リファレンス を参照してください。

以下は、プログラムが "Program" フォルダに存在し、ステップ実行時に "Library" フォルダ内のすべてのファイルをスキップするようにする起動構成の例です。

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

タスク

デバッグ構成の検索方法と同様に、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+クリック を使用して、複数のリポジトリを選択できます。それらの詳細は、すぐ下に個別の領域として表示されます。

拡張機能

拡張機能の開発者の方は、Adopting Multi Root Workspace APIs ガイドを参照し、VS Code のマルチルート ワークスペース API や、複数のフォルダで拡張機能を適切に動作させる方法について学ぶことができます。

以下は、マルチルート ワークスペース API を導入している人気の拡張機能の一部です。

注意: 拡張機能がまだ複数フォルダに対応していない場合でも、マルチルート ワークスペースの最初のフォルダでは動作します。

拡張機能の推奨事項

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

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

次のステップ

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

よくある質問

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

ワークスペースを閉じてフォルダを直接開くか、ワークスペースからそのフォルダを削除します。

拡張機能の作成者として、何を行う必要がありますか？

Adopting Multi Root Workspace APIs ガイドを参照してください。ほとんどの拡張機能は、マルチルート ワークスペースを簡単にサポートできます。