vscode多根工作区需用.code-workspace文件显式声明绝对路径的多个根目录,调试须分设cwd,设置与扩展应按文件夹隔离配置。

多根工作区不是“打开两个文件夹”那么简单
VSCode 的多根工作区(Multi-root Workspace)本质是用一个 .code-workspace 文件显式声明多个根目录,而不是靠连续点击“添加文件夹”临时拼凑。直接拖拽两个项目进窗口,看起来像同时打开了,但调试配置、扩展行为、设置作用域都可能错乱——比如 launch.json 只对当前活动文件夹生效,后台项目断点根本不会触发。
- 必须通过 File → Save Workspace As… 生成并保存
.code-workspace文件,不能只依赖“最近打开”列表 - 每个根路径需为绝对路径,相对路径在共享或迁移时会失效
- 工作区文件里不能写注释(JSON 不支持),否则 VSCode 加载失败且无明确提示
调试前台和后台服务时 launch.json 得分开配,且指定 cwd
同一个 launch.json 放在工作区根下,无法自动适配两个项目的启动逻辑。常见错误是把两个 node 启动配置堆在一起,结果只有第一个生效,或者进程启动后找不到 package.json —— 因为默认工作目录是工作区根,而非各自项目根。
- 在工作区文件中为每个文件夹启用独立的
"settings",但调试仍要靠"configurations"的"cwd"字段精准指向对应项目路径 - 推荐结构:每个项目根下保留自己的
.vscode/launch.json,然后在工作区级launch.json中用"configurations"数组引用,并显式设"cwd": "${workspaceFolder:frontend}"或"cwd": "${workspaceFolder:backend}" -
workspaceFolder:xxx中的xxx必须与工作区文件里"name"字段值完全一致,大小写敏感
扩展和设置的作用域容易混淆,优先用文件夹级 .vscode/settings.json
全局设置(User Settings)或工作区设置(Workspace Settings)对所有根目录一视同仁,但前台用 eslint-plugin-react,后台用 eslint-plugin-node,混在一起就报错。VSCode 默认不区分“哪个设置该管哪个根”,得靠路径隔离。
- 每个项目根目录下建
.vscode/settings.json,里面只写该项目需要的配置,例如"eslint.validate"或"typescript.preferences.includePackageJsonAutoImports" - 工作区级
settings.json(即.code-workspace同级)只放跨项目通用项,如"files.exclude"或"editor.formatOnSave" - 禁用某扩展对特定根生效?在对应文件夹的
.vscode/extensions.json里写"recommendations"并留空,比在 UI 里手动禁用更稳定
终端默认不按根目录切换,cd 手动切容易忘
新开集成终端时,VSCode 默认进入工作区根(也就是 .code-workspace 所在目录),不是你当前编辑的文件所在项目。写完前端代码想立刻 npm run dev,却在后台目录下执行,报错 command not found 是高频问题。
- 右键编辑器标签页 → Open in Integrated Terminal,终端会自动
cd到该文件所在根目录 - 快捷键
Ctrl+Shift+`新开终端后,用 VSCode 内置命令Terminal: Focus Terminal View+Terminal: Rename标明用途(如 “frontend”、“backend”),避免串行操作 - 别依赖终端历史记录回溯路径,不同根目录下的
node_modules完全隔离,路径错一点就装错包
.code-workspace 里的 "path" 字段,否则下次打开直接丢失那个根。











