VS Code 的多根工作區(qū)（Multi-root Workspace）功能允許在一個(gè) VS Code 窗口內(nèi)同時(shí)處理多個(gè)不同位置的文件夾，這對(duì)于需要同時(shí)操作多個(gè)關(guān)聯(lián)項(xiàng)目但又想避免頻繁切換窗口的開發(fā)者來(lái)說(shuō)非常實(shí)用。

???1. 什么是多根工作區(qū)？

多根工作區(qū)（Multi-root Workspace）是 VS Code 提供的一種高級(jí)功能，它允許在單個(gè)編輯器窗口內(nèi)同時(shí)打開和管理多個(gè)不同的文件夾。這些文件夾可以來(lái)自磁盤上的任意位置，甚至可以是完全獨(dú)立的項(xiàng)目。

傳統(tǒng)單文件夾模式：VS Code 默認(rèn)基于文件夾進(jìn)行管理。當(dāng)你打開一個(gè)文件夾時(shí)，編輯器會(huì)分析該文件夾內(nèi)容（如檢測(cè) .git 目錄或 tsconfig.json 文件）并加載相應(yīng)功能。
多根工作區(qū)模式：通過(guò)創(chuàng)建 .code-workspace 文件來(lái)定義工作區(qū)配置，此 JSON 格式文件記錄了工作區(qū)中包含的文件夾路徑、工作區(qū)特定設(shè)置、調(diào)試配置等。

示例如下：

2. 如何創(chuàng)建和使用多根工作區(qū)

2.1 創(chuàng)建多根工作區(qū)

1. 打開初始文件夾：首先在 VS Code 中打開一個(gè)文件夾（此時(shí)狀態(tài)欄為藍(lán)色，未打開任何文件夾時(shí)為紫色）。
2. 添加更多文件夾：
   • 使用命令面板（Ctrl+Shift+P / Cmd+Shift+P），搜索并執(zhí)行 將文件夾添加到工作區(qū)（Add Folder to Workspace）。

- 或者通過(guò)菜單欄：`文件` -> `將文件夾添加到工作區(qū)`。 

- 也可以直接將要添加的文件夾拖拽到 VS Code 左側(cè)的資源管理器窗格中。 

3. 保存工作區(qū)：添加文件夾后，資源管理器標(biāo)題欄會(huì)顯示“無(wú)標(biāo)題（工作區(qū)）”。通過(guò)命令面板搜索 將工作區(qū)另存為（Save Workspace As），將其保存為一個(gè)后綴名為 .code-workspace 的文件（例如 sample.code-workspace）。這個(gè)文件存儲(chǔ)了工作區(qū)的配置。

2.2 打開和關(guān)閉工作區(qū)

• 打開現(xiàn)有工作區(qū)：使用 文件 -> 打開工作區(qū)來(lái)自文件...（Open Workspace from File），或者直接雙擊 .code-workspace 文件。
• 關(guān)閉工作區(qū)或文件夾：若要移除工作區(qū)中的某個(gè)文件夾，可在資源管理器中右鍵點(diǎn)擊該文件夾，選擇 將文件夾從工作區(qū)中移除。要關(guān)閉整個(gè)工作區(qū)，只需關(guān)閉 VS Code 窗口或打開另一個(gè)文件夾/工作區(qū)。系統(tǒng)可能會(huì)提示你是否保存未命名的（untitled）工作區(qū)。

3. 多根工作區(qū)的核心結(jié)構(gòu)和配置

.code-workspace 文件是一個(gè) JSON 文件，其基本結(jié)構(gòu)如下：

{
    "folders": [
        {
            "path": "C:\\Users\\Administrator\\Desktop\\vscodefolder"
        },
        {
            "path": "relative/path/to/folder"  // 也可以是相對(duì)于工作區(qū)文件的相對(duì)路徑
        },
        {
            "path": "another-folder",
            "name": "Custom Display Name"  // 可選，為文件夾定義自定義顯示名稱
        }
    ],
    "settings": {
        // 工作區(qū)級(jí)別的設(shè)置，會(huì)覆蓋用戶設(shè)置和文件夾設(shè)置
        "editor.tabSize": 4,
        "files.exclude": {
            "**/node_modules": true
        }
    },
    "extensions": {
        // 可選，指定在此工作區(qū)中推薦或禁用的擴(kuò)展
        "recommendations": [
            "ms-vscode.vscode-typescript-next"
        ],
        "unwantedRecommendations": [
            "ms-vscode.vscode-extension"
        ]
    },
    "launch": {
        // 可選，工作區(qū)級(jí)別的調(diào)試配置
        "version": "0.2.0",
        "configurations": [
            {
                "type": "node",
                "request": "launch",
                "name": "Launch Program",
                "program": "${workspaceFolder}/app.js"
            }
        ]
    }
}

下面是多根工作區(qū)中設(shè)置優(yōu)先級(jí)的簡(jiǎn)要說(shuō)明：

4. 多根工作區(qū)的優(yōu)勢(shì)和適用場(chǎng)景

4.1 主要優(yōu)勢(shì)

• 無(wú)縫上下文切換：無(wú)需在多個(gè) VS Code 窗口間切換，即可同時(shí)訪問(wèn)和編輯不同項(xiàng)目的文件，并通過(guò)資源管理器輕松導(dǎo)航。
• 統(tǒng)一配置與管理：可以在工作區(qū)級(jí)別定義統(tǒng)一的設(shè)置（如代碼風(fēng)格、格式化規(guī)則）、調(diào)試配置 (launch) 和任務(wù)配置 (tasks)，這些配置會(huì)應(yīng)用于工作區(qū)中的所有文件夾，方便保持一致性。同時(shí)也支持為每個(gè)文件夾單獨(dú)配置（存儲(chǔ)在各自文件夾的 .vscode 目錄下），提供了靈活性。
• 高效的代碼導(dǎo)航與搜索：可以在整個(gè)工作區(qū)的所有文件夾中進(jìn)行全局搜索和替換，或者使用“跳轉(zhuǎn)到定義”、“查找所有引用”等功能跨越文件夾邊界。
• 共享的擴(kuò)展環(huán)境：通過(guò) extensions 字段可以為工作區(qū)推薦或禁用特定擴(kuò)展，方便團(tuán)隊(duì)新成員快速獲得一致的開發(fā)環(huán)境。
• 團(tuán)隊(duì)協(xié)作與版本控制：.code-workspace 文件可以納入版本控制系統(tǒng)（如 Git），團(tuán)隊(duì)成員共享同一工作區(qū)配置，保證環(huán)境一致性。

4.2 典型適用場(chǎng)景

• 前后端分離項(xiàng)目：前端（如 React/Vue 項(xiàng)目）和后端（如 Node.js/Spring Boot 項(xiàng)目）代碼存放在不同目錄，但開發(fā)時(shí)需要同時(shí)修改和調(diào)試。
• Monorepo 項(xiàng)目管理：?jiǎn)蝹€(gè)代碼倉(cāng)庫(kù)中包含多個(gè)相互關(guān)聯(lián)的包或模塊（例如使用 Lerna、Yarn Workspaces 或 Turborepo 管理的項(xiàng)目），每個(gè)子項(xiàng)目是一個(gè)子文件夾。
• 微服務(wù)架構(gòu)開發(fā)：同時(shí)處理多個(gè)獨(dú)立的微服務(wù)項(xiàng)目，需要頻繁在服務(wù)間切換和聯(lián)調(diào)。
• 文檔與代碼并存的項(xiàng)目：產(chǎn)品源代碼與對(duì)應(yīng)的文檔（如說(shuō)明文件、API文檔）存放在不同位置。
• 引用共享庫(kù)或工具包：主項(xiàng)目依賴于另一個(gè)本地開發(fā)中的公共庫(kù)或工具包，需要同時(shí)編輯和測(cè)試。

5. 使用技巧與注意事項(xiàng)

1. 工作區(qū)切換：
   • 使用 Ctrl+R（Windows/Linux）或 Cmd+R（Mac）打開最近文件或文件夾的列表，也可用于切換工作區(qū)。
   • 通過(guò)命令面板搜索 切換窗口（Switch Window）或 快速切換窗口（Quick Switch Window）在不同窗口（可能對(duì)應(yīng)不同工作區(qū)）間切換。
2. 無(wú)標(biāo)題工作區(qū)：未保存的“無(wú)標(biāo)題”工作區(qū)在 VS Code 重啟后會(huì)被自動(dòng)恢復(fù)，除非你明確選擇不保存。若要?jiǎng)h除無(wú)標(biāo)題工作區(qū)，請(qǐng)?jiān)陉P(guān)閉窗口時(shí)選擇“不保存”。
3. 空工作區(qū)：甚至可以創(chuàng)建一個(gè)不包含任何文件夾的 .code-workspace 文件，僅用于存儲(chǔ)特定的設(shè)置、任務(wù)或調(diào)試配置。
4. 路徑問(wèn)題：在 .code-workspace 文件中，建議盡可能使用相對(duì)路徑來(lái)定義文件夾位置，這樣可以提高文件在不同機(jī)器上的可移植性。
5. 性能考量：雖然多根工作區(qū)很方便，但如果添加的文件夾非常大（如包含成千上萬(wàn)個(gè)文件），可能會(huì)對(duì) VS Code 的性能（如索引、搜索速度）產(chǎn)生一定影響。請(qǐng)根據(jù)實(shí)際需要添加文件夾。
6. Git 集成：如果工作區(qū)中的多個(gè)文件夾都是 Git 倉(cāng)庫(kù)，VS Code 的源代碼管理視圖會(huì)分別顯示每個(gè)倉(cāng)庫(kù)的更改，你可以獨(dú)立進(jìn)行提交等操作。

6. 多根工作區(qū) vs. 其他方案

7. 總結(jié)

VS Code 的多根工作區(qū)是一個(gè)強(qiáng)大而靈活的功能，它巧妙地解決了開發(fā)者同時(shí)處理多個(gè)關(guān)聯(lián)項(xiàng)目時(shí)的痛點(diǎn)。通過(guò)創(chuàng)建一個(gè)集中管理的 .code-workspace 配置文件，可以做到不僅可以輕松組織來(lái)自不同位置的文件夾，還能實(shí)現(xiàn)統(tǒng)一的開發(fā)環(huán)境設(shè)置、高效的跨項(xiàng)目操作以及便捷的團(tuán)隊(duì)協(xié)作。

到此這篇關(guān)于VSCode多根工作區(qū)功能詳解的文章就介紹到這了,更多相關(guān)VSCode多根工作區(qū)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論