讲师中心 微信公众号
AI工具推荐 视频效率加速

如何在VSCode中配置多根工作区(Multi-root Workspace)以同时管理前后端分离项目

夜丽酱_3315

夜丽酱_3315

发布时间:2026-03-24 16:57:51

|

262人浏览过

|

来源于php中文网

原创

多根工作区必须使用 .code-workspace 后缀的 JSON 文件,路径须为相对或绝对路径,不可用 ~ 或环境变量;settings 中可配置语言专属选项和 watcher 排除,优先级介于用户与文件夹设置之间;调试需各子项目独立配置 launch.json;扩展应按工作区禁用以避免冲突。

如何在vscode中配置多根工作区(multi-root workspace)以同时管理前后端分离项目

多根工作区文件必须用 .code-workspace 后缀

VSCode 不会把普通文件夹或 .vscode 目录当多根工作区——必须显式创建一个 JSON 格式的 .code-workspace 文件。常见错误是直接在资源管理器里右键“添加文件夹到工作区”,结果只生成了临时会话,关掉窗口就丢失配置。

正确做法:菜单栏选 文件 → 将文件夹添加到工作区…,加完所有项目后,再点 文件 → 另存工作区为…,手动保存为 my-project.code-workspace。这个文件本质是 JSON,里面包含 "folders" 和可选的 "settings"、"extensions" 字段。

  • 路径必须是相对路径(如 "./client")或绝对路径(如 "/Users/me/project/server"),不能用环境变量或波浪号 ~
  • 如果路径不存在,VSCode 启动时会静默跳过该文件夹,不报错也不提示
  • 不要把 .code-workspace 放在某个子项目目录下,建议放在顶层统一管理

settings 里改配置只对当前工作区生效

前端和后端通常需要不同的编辑器行为:比如前端希望启用 ESLint 自动修复,后端可能要禁用它;Node.js 项目需要 "javascript.suggest.autoImports": false 避免污染全局,而 TypeScript 项目又依赖它。这些不能写在用户级或文件夹级设置里,否则会互相干扰。

直接在 .code-workspace 的 "settings" 字段中写:

{
  "folders": [
    { "path": "./client" },
    { "path": "./server" }
  ],
  "settings": {
    "[javascript]": { "editor.formatOnSave": true },
    "[typescript]": { "editor.formatOnSave": true },
    "eslint.enable": true,
    "eslint.packageManager": "npm",
    "files.watcherExclude": {
      "**/server/node_modules/**": true,
      "**/client/node_modules/**": true
    }
  }
}
  • "files.watcherExclude" 很关键:默认 VSCode 会监听所有子文件夹的文件变化,两个项目都含 node_modules 时容易触发高 CPU 占用
  • 语言专属设置(如 "[json]")必须写在 "settings" 下,不能嵌套在文件夹配置里
  • 工作区设置优先级高于用户设置,但低于文件夹内 .vscode/settings.json —— 如果你真在某个子项目里也配了 settings.json,它会覆盖工作区同名项

调试配置需按文件夹区分 launch.json 类型

前端启动 Webpack Dev Server,后端跑 nodemon 或 go run,它们的 launch.json 无法共用一套配置。VSCode 调试器靠 "cwd" 和 "program" 定位入口,路径一错就报 Cannot find module 或 No such file or directory。

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

正确结构是:每个子项目根目录下各自放 .vscode/launch.json,并在其中明确指定工作目录:

  • 前端 ./client/.vscode/launch.json 中设 "cwd": "${workspaceFolder}",启动命令为 "npm run dev"
  • 后端 ./server/.vscode/launch.json 中同样用 "${workspaceFolder}",但命令换成 "npm run start:dev" 或对应脚本
  • 不要试图在一个 launch.json 里用多个 "configurations" 混搭前后端——调试器不会自动识别该用哪个 "cwd"

启动调试时,先在资源管理器里点击对应文件夹,再按 Ctrl+Shift+D 打开调试面板,选择正确的配置。VSCode 左下角会显示当前激活的文件夹名称,这是唯一能确认你没点错地方的方式。

扩展推荐和禁用要按工作区粒度控制

有些扩展(比如 Prettier、ESLint、Go)在多根工作区里默认全局启用,但前端项目不需要 Go 插件,后端也不需要 Vue 模板语法支持。它们不仅占内存,还可能抢夺文件格式化权限,导致保存时反复触发不同格式化器。

解决方法不是卸载,而是用工作区禁用:

  • 打开命令面板(Ctrl+Shift+P),输入 Extensions: Configure Extension Settings
  • 选中目标扩展(如 esbenp.prettier-vscode),然后点“在工作区中禁用”
  • 也可以直接在 .code-workspace 中加 "extensions" 字段:
    "extensions": {
      "recommendations": ["ms-python.python", "esbenp.prettier-vscode"],
      "unwantedRecommendations": ["golang.go"]
    }

真正麻烦的是那些“隐形依赖”:比如你用了 Remote - SSH,但只在后端文件夹里需要连接远程服务器,这时前端文件夹的终端会莫名其妙连不上本地 shell —— 因为插件劫持了所有终端初始化逻辑。这种问题只能靠逐个禁用排查。

热门AI工具

更多
切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

292

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

500

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

371

2026.03.13

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

286

2026.06.03

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

598

2026.06.16

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2135

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3242

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1096

2023.10.13

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

60

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn