🚀 在 VS Code 中

多根工作區

您可以使用多根工作區在 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 屬性覆寫資料夾的顯示名稱,以便在「檔案總管」中為資料夾提供更有意義的名稱。例如,您可以將專案資料夾命名為「產品」和「文件」,以便依資料夾名稱輕鬆識別內容

{
  "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

一般 UI

編輯器

當您使用多根工作區時,VS Code UI 只有少數變更,主要是為了消除多個資料夾之間檔案的歧義。例如,如果多個資料夾中的檔案之間存在名稱衝突,VS Code 會在索引標籤標頭中包含資料夾名稱。

tabbed headers

如果您總是希望在索引標籤標頭中看到資料夾顯示,您可以使用 workbench.editor.labelFormat 設定 「中」或「長」值,以顯示資料夾或完整路徑。

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

如果個別啟動組態名稱不是唯一的,則可以使用更詳細的「資料夾」語法來指定限定資料夾

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

後續步驟

常見問題

如何回到使用單一專案資料夾?

您可以關閉工作區並直接開啟資料夾,或從工作區移除資料夾。

身為擴充功能作者,我需要做什麼?

請參閱我們的採用多根工作區 API 指南。大多數擴充功能都可以輕鬆支援多根工作區。