VS Code 打开文件夹即为工作区目录，无全局默认工作区路径；必须通过“File → Open Folder”打开包含资源的父文件夹，才能使 HTML 中的相对路径（如 css/main.css）正确解析，否则会因路径上下文缺失导致 404 错误。
VS Code 打开文件夹即为工作区目录
VS Code 没有“全局默认工作区目录”概念，所谓“工作区目录”就是你点击 File → Open Folder... 选中的那个文件夹。它会成为当前窗口的根路径，所有相对路径（如 ./css/style.css、../images/logo.png）都以此为基准解析。
常见错误现象：在 HTML 中写 <link rel="stylesheet" href="css/main.css">，预览时报 404；但文件明明存在——问题往往出在没以包含 css/ 的父文件夹为工作区打开。
- 必须用
Open Folder，而非Open File单独打开 HTML 文件（否则工作区为空，相对路径失去上下文） - 如果项目结构是
my-project/index.html和my-project/css/main.css，就得打开my-project这个文件夹 - 多个项目切换时，每个窗口独立工作区，不会互相干扰
PyCharm 中工作区 = 项目根目录，需显式指定
PyCharm 的工作区绑定到“Project”，首次创建或导入时就已确定根路径。HTML 文件里的相对路径（如 <script src="js/app.js"></script>）按 Project 根目录解析，和 VS Code 逻辑一致，但配置入口不同。
容易踩的坑：从外部复制一个 HTML 文件进项目，却没刷新目录树，导致 PyCharm 不识别其所在子路径，补全和预览都失效。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 右键项目根目录 →
Reload project强制刷新索引 - 确认
Project Structure（Ctrl+Alt+Shift+S）中 “Project SDK” 和 “Project compiler output” 设置合理 - HTML 文件若放在
src/main/resources等非标准路径，需手动标记该目录为 “Resources Root”
webVisualEditor 插件依赖工作区目录解析资源路径
vscode-web-visual-editor 插件的 webVisualEditor.rootPath 配置项，本质是告诉插件：“当 HTML 里出现 /css/reset.css 这种以 / 开头的路径时，请从这个目录开始找”。它不改变 VS Code 自身的工作区，而是给插件自己加一层路径映射。
典型场景：开发 SPA，HTML 是 index.html，但构建后部署在 https://example.com/myapp/，所有资源路径带前缀 /myapp/。本地预览时需要模拟这个前缀行为。
- 设
"webVisualEditor.rootPath": "myapp"，插件就会把/myapp/css/app.css映射到本地myapp/css/app.css - 该值为空字符串（默认）时，
/xxx路径直接按系统根目录找，通常 404 - 注意：此配置只影响插件预览，不影响 VS Code 内置的 Live Server 或浏览器直接双击打开
跨编辑器协作时工作区目录必须统一约定
团队成员用不同编辑器（VS Code + PyCharm + HBuilder），但共享同一套 HTML 路径引用规则。这时“工作区目录”不是工具设置问题，而是项目规范问题。
最容易被忽略的一点：.gitignore 或构建脚本（如 vite.config.ts）里写的 public/ 或 dist/ 目录，往往就是事实上的工作区根。所有开发者必须以该目录为基准打开项目。
- 在项目根目录放一个
README.md，明确写：“请用编辑器打开./public文件夹作为工作区” - 用
.vscode/settings.json固化路径敏感配置，例如"html.suggest.html5": true和"editor.tabSize": 2 - 避免在 HTML 中写绝对路径（如
C:\project\img\icon.png）或用户家目录路径（~/assets），这类路径在他人机器上必然失效
