VS Code 多工作区

在全栈开发中，当目录下可能有多个项目，使用 VS Code 打开目录后，目录中各个项目的相对路径就会发生变化，例如：.vscode、launch.json 等配置中的 ${workspaceFolder} 就会代表当前目录，而非项目根目录。解决此问题的最佳实践是在 VS Code 中主动声明工作空间，具体操作见下文。

在 VS Code 中点击“文件”-> “将工作区另存为...”，会生成一个 .code-workspace 后缀的工作区配置文件；将该文件放在根目录。然后配置如下：

{
    // 【工作区文件夹定义】
    // 这里决定了你 VS Code 左侧侧边栏（Explorer）显示的层级结构
    "folders": [
        {
            // 别名：在侧边栏显示的名称
            "name": "🛠️ Root",
            // 路径：“.” 代表当前工作区文件所在的根目录
            // 包含：README.md, .gitignore, 以及全局配置文件
            "path": "."
        },
        {
            "name": "🚀 Backend",
            // 指向物理文件夹 backend
            // 此时该目录下的 .vscode/launch.json 里的 ${workspaceFolder} 将指向此目录
            "path": "backend"
        },
        {
            "name": "💻 Frontend",
            "path": "frontend" 
        }
    ],


    // 【工作区全局设置】
    // 这里的设置对上述所有 folders 里的项目都生效，但会被项目内部的 .vscode/settings.json 覆盖
    "settings": {
        "files.exclude": {
            // 重点：在 “🛠️ Root” 分组下隐藏 backend 和 frontend 文件夹
            // 理由：因为它们已经作为独立的“根”显示在侧边栏了，隐藏它们可以避免目录树出现“套娃”现象
            "backend": true,
            "frontend": true,
            
            // 额外建议：隐藏一些开发过程中的干扰项
            "**/.git": true,
            "**/.venv": true,
            "**/__pycache__": true,
            "**/node_modules": true
        }
    }
}