🚀 在 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

移除資料夾

您可以使用 [從工作區移除資料夾] 內容功能表命令,從工作區移除資料夾。

工作區檔案

當您新增多個資料夾時,它們最初會放置在名為 UNTITLED WORKSPACE 的工作區中,該名稱將會保留,直到您儲存工作區為止。在您想要將工作區放在永久位置 (例如,在您的桌面上) 之前,您不需要儲存工作區。未命名的工作區會存在,只要它們正在使用的 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 區段也可以包含一般啟動組態。請確定所有使用的變數都明確地限定為特定資料夾,否則它們對工作區無效。您可以在變數參考中找到有關明確限定範圍變數的更多詳細資訊。

以下是一個啟動組態的範例,其中程式位於「程式」資料夾中,且在逐步執行時應略過「程式庫」資料夾中的所有檔案

"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 檔案中定義的工作。工作的location 由資料夾名稱後綴指示。請注意,在 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 指南。大多數擴充功能可以輕鬆支援多根工作區。