多根工作区

通过多根工作区(multi-root workspaces),你可以在 Visual Studio Code 中同时处理多个项目文件夹。当你要同时处理多个相关项目时,这将非常有用。例如,你可能拥有一个产品的文档仓库,并希望在更新产品源代码时保持文档同步。

multi-root hero

注意:如果你想了解更多关于 VS Code “工作区”的概念,可以参阅 什么是 VS Code “工作区”?。除非你显式创建了多根工作区,否则“工作区”仅仅是你项目的单个根文件夹。

添加文件夹

向现有工作区添加其他文件夹非常容易。有几种添加文件夹的方式:

将文件夹添加到工作区

使用 文件 > 将文件夹添加到工作区 命令会弹出“打开文件夹”对话框,以便选择新文件夹。

Add Root Folder

添加根文件夹后,资源管理器会将新文件夹显示为文件资源管理器中的一个根目录。你可以右键点击任何根文件夹,并使用上下文菜单添加或删除文件夹。

Remove Root Folder

文件资源管理器的功能和表现与以往相同。你可以在根文件夹之间移动文件,并使用上下文菜单和资源管理器视图中提供的任何常规文件操作。

如果进行了相应配置,像 files.exclude 在 VS Code 中打开 在 VS Code Insiders 中打开 这样的设置可以针对每个根文件夹进行单独配置,如果配置为全局用户设置,则会应用于所有文件夹。

拖放

你可以使用拖放方式将文件夹添加到工作区。将文件夹拖到文件资源管理器中即可将其添加到当前工作区。你甚至可以选择并拖动多个文件夹。

注意:将单个文件夹放入 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)) 命令用于关闭当前活动的工作区。

工作区文件结构(schema)

.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 的 UI 只有少量变更,主要是为了区分不同文件夹之间的文件。例如,如果多个文件夹中的文件出现名称冲突,VS Code 会在标签页标题中包含文件夹名称。

tabbed headers

如果你希望始终在标签页标题中显示文件夹,可以使用 workbench.editor.labelFormat 在 VS Code 中打开 在 VS Code Insiders 中打开 设置,将其值设为 "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 中打开 在 VS Code Insiders 中打开 配置,用于在 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 在 VS Code 中打开 在 VS Code Insiders 中打开 部分也可以包含常规启动配置。确保所有使用的变量都明确限定到特定文件夹,否则它们对于工作区将无效。关于显式限定变量的更多详细信息,请参阅 变量参考

这是一个启动配置示例,其中程序位于“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 指南。大多数扩展都可以轻松支持多根工作区。

© . This site is unofficial and not affiliated with Microsoft.