– 代理会话日,2月19日

多根工作区

您可以在 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)) 命令来关闭活动工作区。

工作区文件模式

.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

通用用户界面

编辑器

当您使用多根工作区时,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

当您打开多根工作区时,您可以使用 files to include 框中的 ./ 语法在单个根文件夹中搜索。例如,如果您输入 ./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

您还可以使用以下命令打开特定的设置文件

  • 首选项:打开用户设置 - 打开全局用户设置
  • 首选项:打开工作区设置 - 打开工作区文件的设置部分。
  • 首选项:打开文件夹设置 - 打开活动文件夹的设置。

全局工作区设置覆盖用户设置,文件夹设置可以覆盖工作区或用户设置。

不受支持的文件夹设置

不受支持的编辑器范围的文件夹设置将在您的文件夹设置中显示为灰色,并从 DEFAULT FOLDER SETTINGS 列表中过滤掉。您还会在设置前面看到一个信息图标。

unsupported setting information

调试

使用多根工作区时,VS Code 会在所有文件夹中搜索 launch.json 调试配置文件,并以文件夹名称作为后缀显示它们。此外,VS Code 还会显示在工作区配置文件中定义的启动配置。

debugging dropdown

上面的示例显示了 TSLint 扩展 的调试配置。有一个

launch
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
来自 tslint 扩展文件夹的配置,以在 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.