它本质是一个 JSON 文件。你可以用菜单生成,也可以手写。 下面是一份适合前后端分离项目的最小可用模板。

{
  "folders": [
    { "name": "web", "path": "packages/web" },
    { "name": "api", "path": "packages/api" },
    { "name": "docs", "path": "docs" }
  ],
  "settings": {
    "files.exclude": {
      "**/.DS_Store": true,
      "**/dist": true,
      "**/coverage": true
    },
    "search.exclude": {
      "**/node_modules": true,
      "**/dist": true,
      "**/coverage": true
    },
    "explorer.fileNesting.enabled": true,
    "explorer.fileNesting.expand": false,
    "explorer.fileNesting.patterns": {
      "package.json": "package-lock.json,yarn.lock,pnpm-lock.yaml,bun.lockb",
      "tsconfig.json": "tsconfig.*.json",
      "*.ts": "$(capture).test.ts,$(capture).spec.ts,$(capture).d.ts",
      "*.tsx": "$(capture).test.tsx,$(capture).spec.tsx"
    }
  },
  "extensions": {
    "recommendations": [
      "dbaeumer.vscode-eslint",
      "esbenp.prettier-vscode"
    ]
  }
}

File nesting 不是删除文件,而是在 Explorer 里把相关文件折到主文件下面。 它特别适合 lockfile、测试文件、类型声明、source map、构建产物。

Lab 1 — 搭一个多根工作区

目标:创建一个模拟前后端项目,并保存成 learning.code-workspace。

vscode-day08-lab/
  packages/
    web/
      src/
    api/
      src/
  docs/
  infra/

1. 创建上面的目录结构,用 VSCode 打开 vscode-day08-lab
2. 执行 File: Add Folder to Workspace,把 packages/web、packages/api、docs 作为根加入
3. 执行 Workspaces: Save Workspace As,保存为 learning.code-workspace
4. 关闭窗口后双击 learning.code-workspace,确认多根目录被恢复
5. 观察 Explorer 顶层是否显示 web / api / docs 三个 root

Lab 2 — 配置 file nesting

目标:把 lockfile、测试文件、类型文件折叠到主文件下面。

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.expand": false,
  "explorer.fileNesting.patterns": {
    "package.json": "package-lock.json,yarn.lock,pnpm-lock.yaml",
    "*.ts": "$(capture).test.ts,$(capture).spec.ts,$(capture).d.ts",
    "*.tsx": "$(capture).test.tsx,$(capture).spec.tsx"
  }
}

1. 在 workspace 的 settings 中加入上面配置
2. 创建 Button.tsx、Button.test.tsx、Button.spec.tsx
3. 创建 package.json 与 pnpm-lock.yaml
4. 回到 Explorer,观察测试文件和 lockfile 是否被折叠
5. 把 explorer.fileNesting.expand 改成 true,对比默认展开效果

Lab 3 — 用 Breadcrumbs 读一个深层文件

目标:练习不依赖文件树,只用 Breadcrumbs 和快速打开定位。

1. 在 packages/web/src/pages/settings/SettingsPage.tsx 写几个函数: SettingsPage、handleSubmit、validateForm
2. 用 ⌘P(Win: Ctrl P)直接打开 SettingsPage.tsx
3. 看编辑器顶部 Breadcrumb,确认当前路径和当前函数
4. 按 ⌘⇧.(Win: Ctrl Shift .)聚焦 Breadcrumbs
5. 用键盘选择上层目录或函数名跳转,体验路径导航与符号导航的区别

1. Open Folder 和打开 .code-workspace 的本质区别是什么?
2. folders、settings、extensions.recommendations 在 workspace 文件里分别负责什么?
3. files.exclude、search.exclude、explorer.fileNesting.patterns 应该分别用于什么场景?
4. Breadcrumbs 中路径导航和符号导航分别解决什么问题?
5. 什么时候应该信任一个 workspace?什么时候应该保持 Restricted Mode?