VSCode多根工作区怎么创建

夜辰酱_9878

夜辰酱_9878

2026-09-06

218人浏览

原创

vscode的“添加文件夹到工作区”仅为临时会话操作,不生成持久配置;必须执行“另存工作区为…”生成.code-workspace文件,才能保存路径、设置、调试等全部状态,否则关闭窗口即丢失。

vscode多根工作区怎么创建

必须显式保存为 .code-workspace 文件,否则所有添加的文件夹都是临时的,关掉窗口就丢。

为什么“添加文件夹到工作区”不等于创建多根工作区

VSCode 的「将文件夹添加到工作区…」只是会话级操作,不生成任何持久配置。你拖拽、右键、菜单添加的文件夹,只要没执行「另存工作区为…」,重启 VSCode 后全部消失。状态栏显示“无标题(工作区)”时,它仍是未保存的临时状态。

  • 常见错误:先打开 ./frontend,再添加 ./backend,以为已经完成 → 实际只在内存里记住了路径
  • 更隐蔽的坑:从已有文件夹窗口出发添加其他根 → VSCode 会把第一个文件夹当作“主根”,后续添加可能被路径解析干扰(尤其跨父目录时)
  • 正确起点:启动 VSCode 后确保状态栏显示 No folder opened(紫色背景),再开始添加

创建 .code-workspace 文件的两种可靠方式

推荐用命令面板操作,避免菜单误点;手动编辑仅适合已有明确路径结构的场景。

VSCode
VSCode

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

下载
  • 方式一(推荐):按 Ctrl+Shift+P → 输入 Workspaces: Create Workspace from Folder → 按住 Ctrl 多选所有项目根目录(如 ./frontend, ./backend, ../shared)→ 确认后自动进入保存流程
  • 方式二(兼容旧版):菜单栏 文件 → 将文件夹添加到工作区… 逐个添加 → 添加完后立即执行 文件 → 另存工作区为… → 保存为 my-app.code-workspace
  • 手动创建(慎用):新建 JSON 文件,命名为 my-app.code-workspace,内容至少包含 "folders": [{"path": "./frontend"}, {"path": "./backend"}];注意 JSON 不支持注释,路径不能用 ~ 或环境变量

.code-workspace 文件该放哪儿、怎么写路径

位置和路径写法直接决定可迁移性。放错位置或写死绝对路径,换电脑或给同事用就会报错或加载失败。

  • 必须放在所有项目共同的父目录下(例如 ~/projects/my-app.code-workspace,而各项目是 ~/projects/frontend, ~/projects/backend
  • 路径必须用相对路径("./frontend"),不能用绝对路径(/home/user/project/frontend)或波浪线(~/frontend
  • 不要嵌套:比如 ./frontend/src 是非法根路径,VSCode 要求每个 path 必须是完整项目根(含 package.jsontsconfig.json 等标识)
  • 如果项目不在同一父目录下(如 ./frontend../shared),仍可用相对路径,但要以 .code-workspace 文件所在位置为基准计算

保存后立刻验证的三件事

很多人以为保存完就万事大吉,其实关键配置是否生效得当场确认。

  • 双击刚保存的 my-app.code-workspace 文件,检查资源管理器是否同时列出所有根目录,且状态栏显示工作区名而非“无标题”
  • Ctrl+Shift+P → 输入 Preferences: Open Settings (JSON) → 看顶部注释是否为 Workspace settings,且内容来自该 .code-workspace 文件
  • 在任一子项目里打开终端(Ctrl+`),运行 pwd → 应显示对应项目根路径,不是工作区根路径(这点直接影响 npm run dev 能否找到 package.json

最常被忽略的是路径基准问题:一旦 .code-workspace 移动位置,里面所有 "path" 字段都得重算;还有调试时 cwd 默认指向工作区根,而不是你当前打开的子项目——这两个点不提前踩坑,后面 launch.json 配一半才发现进程起不来。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1135

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2212

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1769

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1587

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2467

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1738

14

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1202

10

vscode和visualstudio的区别
vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1076

8

vscode设置中文界面不生效解决方法
vscode设置中文界面不生效解决方法

vscode设置中文界面不生效解决方法:安装中文语言包、通过命令面板设置语言、检查 locale.json 设置、重新安装中文语言包、检查 VSCode 版本和更新、排除插件冲突、检查系统语言设置、查看 VSCode 日志和错误消息、重置 VSCode 设置、查看官方文档和社区支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

394

5

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程