现已发布!阅读 10 月份的新功能和修复。

多根工作区

您可以使用多根工作区在 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

如果您正在使用 文件图标主题 并且活动主题支持它,您将看到一个特殊的工作区图标。

在下面,您可以看到内置的 最小 (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 工作区 中看到三个文件夹的 **添加配置** 命令,`tslint`、`tslint-server` 和 `tslint-tests`。**添加配置** 命令将打开文件夹的 `.vscode` 子文件夹中已有的 `launch.json` 文件,或者创建一个新的 `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 扩展 工作区 示例中,您可以看到 `tslint` 和 `tslint-tests` 文件夹中来自 `tasks.json` 文件的两个 **已配置任务**,以及许多自动检测到的 npm 和 TypeScript 编译器 **已检测任务**。

工作区任务配置

工作区范围的任务位于工作区配置文件的 `"tasks"` 部分(在命令面板中使用 **工作区:打开工作区配置文件**)。工作区配置文件中只能定义 `"shell"` 和 `"process"` 类型的任务。

源代码管理

在多根文件夹工作区中,有一个 **源代码管理提供程序** 部分,当您拥有多个活动存储库时,该部分可以为您提供概述。这些可以由多个 SCM 提供程序贡献;例如,您可以将 Git 存储库与 Azure DevOps Server 工作区并排放置。当您在此视图中选择存储库时,您可以在下面看到源代码管理详细信息。

multiple scm providers

您可以使用 Ctrl+ClickShift+Click 选择多个存储库。它们的信息将作为独立的区域显示在下方。

扩展

如果您是扩展作者,您可以查看我们的 采用多根文件夹工作区 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 指南。大多数扩展可以轻松地支持多根文件夹工作区。