マルチルートワークスペース
Visual Studio Codeのマルチルートワークスペースを使えば、複数のプロジェクトフォルダーで作業できます。これは、関連する複数のプロジェクトで同時に作業している場合に役立ちます。たとえば、製品のソースコードを更新する際に常に最新の状態に保ちたいドキュメントのリポジトリがある場合などです。
注: VS Codeの「ワークスペース」という概念についてさらに詳しく知りたい場合は、VS Codeの「ワークスペース」とは?を参照してください。明示的にマルチルートワークスペースを作成しない限り、「ワークスペース」は単にプロジェクトの単一のルートフォルダーを指します。
フォルダーの追加
既存のワークスペースに別のフォルダーを追加するのは簡単です。フォルダーを追加するにはいくつかの方法があります。
ワークスペースにフォルダーを追加
ファイル > ワークスペースにフォルダーを追加コマンドを実行すると、[フォルダーを開く] ダイアログが表示され、新しいフォルダーを選択できます。
ルートフォルダーが追加されると、エクスプローラーはファイルエクスプローラーに新しいフォルダーをルートとして表示します。いずれかのルートフォルダーを右クリックし、コンテキストメニューを使用してフォルダーを追加または削除できます。
ファイルエクスプローラーは以前と同様に動作するはずです。ルートフォルダー間でファイルを移動したり、コンテキストメニューやエクスプローラービューで提供される一般的なファイル操作アクションを使用したりできます。
files.excludeのような設定は、各ルートフォルダーごとに設定されていればサポートされ、グローバルなユーザー設定として構成されていればすべてのフォルダーに適用されます。
ドラッグ アンド ドロップ
ドラッグ アンド ドロップを使用してワークスペースにフォルダーを追加できます。フォルダーをファイルエクスプローラーにドラッグすると、現在のワークスペースに追加されます。複数のフォルダーを選択してドラッグすることも可能です。
注: 単一のフォルダーをVS Codeのエディター領域にドロップすると、そのフォルダーは単一フォルダーモードで開かれます。複数のフォルダーをエディター領域にドラッグ アンド ドロップすると、新しいマルチルートワークスペースが作成されます。
ドラッグ アンド ドロップを使用して、ワークスペース内のフォルダーの順序を変更することもできます。
ネイティブのファイルを開くダイアログでの複数選択
プラットフォームのネイティブなファイルを開くダイアログで複数のフォルダーを開くと、マルチルートワークスペースが作成されます。
コマンドライン --add
最後にアクティブだったVS Codeインスタンスに、マルチルートワークスペース用のフォルダーを1つまたは複数追加します。
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は最初のフォルダーから適切なエディター全体の設定を新しいグローバルワークスペース設定に追加します。
設定エディターを通じて、さまざまな設定ファイルを簡単に確認・変更できます。設定エディターのタブで、ユーザー設定、グローバルワークスペース設定、個別のフォルダー設定を選択できます。
また、以下のコマンドで特定の設定ファイルを開くこともできます。
- Preferences: Open User Settings - グローバルなユーザー設定を開きます。
- Preferences: Open Workspace Settings - ワークスペースファイルの設定セクションを開きます。
- Preferences: Open Folder Settings - アクティブなフォルダーの設定を開きます。
グローバルワークスペース設定はユーザー設定を上書きし、フォルダー設定はワークスペース設定またはユーザー設定を上書きできます。
サポートされていないフォルダー設定
サポートされていないエディター全体にわたるフォルダー設定は、フォルダー設定内でグレーアウトして表示され、DEFAULT FOLDER 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}
) は、それらが属するフォルダーに相対的に解決されます。変数にルートフォルダー名をコロンで区切って追加することで、変数スコープをワークスペースフォルダーごとに設定することが可能です。
ワークスペースの起動構成
ワークスペーススコープの起動構成は、ワークスペース構成ファイル (コマンドパレットで Workspaces: Open Workspace Configuration File) の "launch"
セクションに記述します。
あるいは、起動構成ドロップダウンメニューの「Add Config (workspace)」エントリから新しい起動構成を追加することもできます。
複合起動構成は、名前がワークスペース内で一意である限り、個々の起動構成を名前で参照できます。例:
"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コンパイラの検出されたタスクがあることがわかります。
ワークスペースのタスク構成
ワークスペーススコープのタスクは、ワークスペース構成ファイル (コマンドパレットで Workspaces: Open Workspace Configuration File) の "tasks"
セクションに記述します。ワークスペース構成ファイルでは、"shell"
および "process"
タイプのタスクのみ定義できます。
ソース管理
マルチルートワークスペースでは、ソース管理プロバイダーセクションがあり、複数のアクティブなリポジトリがある場合に概要を把握できます。これらは複数のSCMプロバイダーによって提供され、たとえば、GitリポジトリとAzure DevOps Serverワークスペースを並べて配置できます。このビューでリポジトリを選択すると、その下にソース管理の詳細が表示されます。
Ctrl+Click または Shift+Click を使用して複数のリポジトリを選択できます。それらの詳細は、下に別々の領域として表示されます。
拡張機能
拡張機能の作成者である場合は、マルチルートワークスペース API の採用ガイドを参照して、VS CodeのマルチルートワークスペースAPIについて学び、拡張機能を複数のフォルダーでうまく動作させる方法を確認してください。
以下は、マルチルートワークスペースAPIを採用した人気のある拡張機能の一部です。
注: 拡張機能がまだ複数のフォルダーをサポートしていない場合でも、マルチルートワークスペースの最初のフォルダーで動作します。
拡張機能の推奨事項
VS Codeは、フォルダーの.vscode
サブフォルダーの下にあるextensions.json
ファイルを通じて、フォルダーレベルの拡張機能の推奨をサポートしています。.code-workspace
ファイルに追加することで、グローバルなワークスペースの拡張機能の推奨を提供することもできます。拡張機能: 推奨される拡張機能を構成する (ワークスペースフォルダー) コマンドを使用してワークスペースファイルを開き、extensions.recommendations
配列に拡張機能識別子({publisherName}.{extensionName})を追加できます。
{
"folders": [
{
"path": "vscode"
},
{
"path": "vscode-docs"
}
],
"extensions": {
"recommendations": ["eg2.tslint", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}
}
次のステップ
- VS Codeの「ワークスペース」とは? - 単一フォルダーとマルチルートワークスペースに関する詳細。
- デバッグ - アプリケーションのデバッグを設定する方法について学習します。
- タスク - タスクを使用すると、VS Code内でコンパイラなどの外部ツールを実行できます。
よくある質問
単一のプロジェクトフォルダーでの作業に戻るにはどうすればよいですか?
ワークスペースを閉じてフォルダーを直接開くか、ワークスペースからフォルダーを削除することができます。
拡張機能の作成者として、何をする必要がありますか?
当社のマルチルートワークスペースAPIの採用ガイドを参照してください。ほとんどの拡張機能は、マルチルートワークスペースを簡単にサポートできます。