參加你附近的 ,瞭解 VS Code 中的 AI 輔助開發。

多根工作區

在 Visual Studio Code 中,您可以透過多根工作區來處理多個專案資料夾。當您同時處理多個相關專案時,這會很有幫助。例如,您可能有一個包含產品文件的程式碼倉庫,並希望在更新產品原始碼時保持該文件為最新版本。

multi-root hero

注意:如果您想了解有關 VS Code “工作區”概念的更多資訊,可以查閱什麼是 VS Code “工作區”?。除非您明確建立多根工作區,否則“工作區”通常僅指您專案的單個根資料夾。

新增資料夾

向現有工作區新增另一個資料夾非常簡單。有多種新增資料夾的方式:

將資料夾新增到工作區

檔案 > 將資料夾新增到工作區命令會開啟一個“開啟資料夾”對話方塊,以選擇新資料夾。

Add Root Folder

一旦添加了根資料夾,資源管理器將在檔案資源管理器中將新資料夾顯示為一個根目錄。您可以右鍵單擊任何根資料夾,並使用上下文選單來新增或刪除資料夾。

Remove Root Folder

檔案資源管理器的功能和行為應與以前一樣。您可以在根資料夾之間移動檔案,並使用上下文選單和資源管理器檢視中提供的任何典型檔案操作。

如果已配置,像 files.exclude 這樣的設定對每個根資料夾都支援;如果配置為全域性使用者設定,則對所有資料夾都生效。

拖放

您可以使用拖放操作將資料夾新增到工作區。將一個資料夾拖到檔案資源管理器中,即可將其新增到當前工作區。您甚至可以選擇並拖動多個資料夾。

注意:將單個資料夾拖放到 VS Code 的編輯器區域仍會以單資料夾模式開啟該資料夾。如果將多個資料夾拖放到編輯器區域,則會建立一個新的多根工作區。

您還可以使用拖放來重新排列工作區中的資料夾。

透過原生檔案開啟對話方塊多選

使用您平臺的原生檔案開啟對話方塊開啟多個資料夾,將會建立一個多根工作區。

命令列 --add

將一個或多個資料夾新增到上一個活動的 VS Code 例項,以建立多根工作區。

  code --add vscode vscode-docs

移除資料夾

您可以使用上下文選單中的從工作區移除資料夾命令來從工作區中移除一個資料夾。

工作區檔案

當您新增多個資料夾時,它們最初會被放置在一個名為未命名工作區的工作區中,該名稱將一直保留到您儲存工作區為止。您不需要立即儲存工作區,除非您想將其儲存在一個永久的位置,例如您的桌面上。只要使用未命名工作區的 VS Code 例項保持開啟狀態,該工作區就會存在。一旦您完全關閉一個包含未命名工作區的例項,如果您計劃將來再次開啟它,系統會提示您儲存它。

save workspace dialog

當您儲存工作區時,它將建立一個 .code-workspace 檔案,檔名將顯示在檔案資源管理器中。

將工作區另存為...

如果您想將工作區檔案移動到新位置,可以使用檔案 > 將工作區另存為命令,該命令會自動設定相對於新工作區檔案位置的正確資料夾路徑。

開啟工作區檔案

要重新開啟工作區,您可以:

  • 在您平臺的資源管理器中雙擊 .code-workspace 檔案。
  • 使用檔案 > 開啟工作區命令並選擇工作區檔案。
  • 檔案 > 開啟最近的檔案 (⌃R (Windows、Linux 為 Ctrl+R)) 列表中選擇工作區。
    • 工作區會帶有一個(工作區)字尾,以區別於普通資料夾。

open recent workspace list

與在 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"
    }
  ]
}

這將導致以下資源管理器顯示效果:

named folders

從上面的示例可以看出,您可以在工作區檔案中添加註釋。

工作區檔案還可以在 settings 下包含工作區全域性設定,以及在 extensions 下包含擴充套件推薦,我們將在下面討論這些內容。

workspace file schema

通用使用者介面

編輯器

當您使用多根工作區時,VS Code 的使用者介面只有一些細微變化,主要是為了消除不同資料夾中檔案之間的歧義。例如,如果多個資料夾中的檔案存在名稱衝突,VS Code 會在選項卡標題中包含資料夾名稱。

tabbed headers

如果您總是希望在選項卡標題中顯示資料夾,可以使用 workbench.editor.labelFormat 設定的 "medium" 或 "long" 值來顯示資料夾或完整路徑。

"workbench.editor.labelFormat": "medium"

VS Code 的 UI,如開啟的編輯器快速開啟 (⌘P (Windows、Linux 為 Ctrl+P)) 列表,都會包含資料夾名稱。

quick pick has folder name

如果您正在使用檔案圖示主題,並且當前主題支援它,您將會看到一個特殊的工作區圖示。

下面您可以看到內建的 Minimal (Visual Studio Code) 檔案圖示主題中的工作區圖示。

custom workspace icon

VS Code 的功能(如全域性搜尋)可以跨所有資料夾工作,並按資料夾對搜尋結果進行分組。

multi-root search results

當您開啟一個多根工作區時,可以透過在要包含的檔案框中使用 ./ 語法來選擇在單個根資料夾中搜索。例如,如果您輸入 ./project1/**/*.txt,它將搜尋 project1/ 根資料夾下的所有 .txt 檔案。

設定

在一個工作區中有多個根資料夾時,每個根資料夾中都可能有一個 .vscode 資料夾,用於定義該資料夾應應用的設定。為避免設定衝突,使用多根工作區時,僅應用資源(檔案、資料夾)級別的設定。影響整個編輯器的設定(例如,UI 佈局)將被忽略。例如,兩個專案不能同時設定縮放級別。

使用者設定與單資料夾專案一樣受支援,您還可以設定全域性工作區設定,這些設定將應用於多根工作區中的所有資料夾。全域性工作區設定將儲存在您的 .code-workspace 檔案中。

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

當您從單資料夾例項切換到多資料夾例項時,VS Code 會將第一個資料夾中適用的編輯器範圍設定新增到新的全域性工作區設定中。

您可以透過設定編輯器輕鬆檢視和修改不同的設定檔案。設定編輯器的選項卡讓您可以選擇使用者設定、全域性工作區設定和單個資料夾設定。

settings dropdown

您還可以使用以下命令開啟特定的設定檔案:

  • 首選項: 開啟使用者設定 - 開啟您的全域性使用者設定
  • 首選項: 開啟工作區設定 - 開啟您工作區檔案的設定部分。
  • 首選項: 開啟資料夾設定 - 開啟活動資料夾的設定。

全域性工作區設定會覆蓋使用者設定,而資料夾設定可以覆蓋工作區或使用者設定。

不支援的資料夾設定

不支援的編輯器範圍的資料夾設定將在您的資料夾設定中顯示為灰色,並會從預設資料夾設定列表中過濾掉。您還會在設定前面看到一個資訊圖示。

unsupported setting information

除錯

在多根工作區中,VS Code 會在所有資料夾中搜索 launch.json 除錯配置檔案,並以資料夾名稱作為字尾顯示它們。此外,VS Code 還會顯示在工作區配置檔案中定義的啟動配置。

debugging dropdown

上面的示例顯示了 TSLint 擴充套件的除錯配置。有一個來自 tslint 擴充套件資料夾的 launch 配置,用於在 VS Code 擴充套件宿主中啟動該擴充套件;還有一個來自 tslint-server 資料夾的 attach 配置,用於將偵錯程式附加到正在執行的 TSLint 伺服器。

您還可以在 vscode-tslint 工作區中看到針對 tslinttslint-servertslint-tests 這三個資料夾的新增配置命令。新增配置命令要麼會開啟資料夾的 .vscode 子資料夾中現有的 launch.json 檔案,要麼會建立一個新檔案並顯示除錯配置模板下拉選單。

debugging template dropdown

配置中使用的變數(例如 ${workspaceFolder} 或現已棄用的 ${workspaceRoot})會相對於它們所屬的資料夾進行解析。可以透過將根資料夾的名稱附加到變數(用冒號分隔)來為每個工作區資料夾限定變數的作用域。

工作區啟動配置

工作區範圍的啟動配置位於工作區配置檔案(在命令面板中選擇工作區: 開啟工作區配置檔案)的 "launch" 部分。

Workspace Settings

另外,新的啟動配置可以透過啟動配置下拉選單中的“新增配置(工作區)”條目新增。

Add Config

複合啟動配置可以透過名稱引用單個啟動配置,只要這些名稱在工作區內是唯一的,例如:

  "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 版本。

tasks dropdown

從上面 TSLint 擴充套件的工作區示例中,您可以看到有兩個來自 tslinttslint-tests 資料夾中 tasks.json 檔案的已配置任務,以及許多自動檢測到的 npm 和 TypeScript 編譯器的已檢測任務

工作區任務配置

工作區範圍的任務位於工作區配置檔案(在命令面板中選擇工作區: 開啟工作區配置檔案)的 "tasks" 部分。只有 "shell""process" 型別的任務可以在工作區配置檔案中定義。

原始碼管理

在多根工作區中,有一個原始碼管理提供程式部分,當您有多個活動的倉庫時,它會為您提供一個概覽。這些倉庫可以由多個 SCM 提供程式貢獻;例如,您可以將 Git 倉庫與 Azure DevOps Server 工作區並排使用。當您在此檢視中選擇倉庫時,您可以在下方看到原始碼管理的詳細資訊。

multiple scm providers

您可以使用 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指南。大多數擴充套件都可以輕鬆支援多根工作區。