VS Code HTML class不补全因CSS未被识别或插件冲突；Prettier报错因未安装本地版本；Live Server不监听CSS需手动重载或换Browser Sync；图片路径标红因未以文件夹形式打开项目。
VS Code 里 HTML 文件不自动补全 class 名？检查 emerald 类型的插件冲突
VS Code 默认对 HTML 的 class 补全依赖于 CSS 文件是否被正确识别和索引。常见现象是：你在 <div class="..."> 里敲 <code>btn，没弹出 btn-primary 或项目里的自定义类——大概率不是 VS Code 设置问题，而是它压根没把当前 CSS 文件当“源”。
实操建议：
- 确认你的 CSS 文件后缀是
.css（不是.scss或.less），否则默认不参与 HTML class 补全 - 如果用了 Tailwind、Bootstrap 等框架，装了对应插件（如
tailwindcss-intellisense），但同时又装了Auto Close Tag或Ember Snippets这类老插件，它们会劫持 class 属性解析逻辑，关掉试试 - 在
settings.json中加这一行强制启用："html.suggest.html5": true（别信 UI 设置页里那个开关，它有时不生效）
保存时自动格式化 HTML/CSS 却报错 Failed to load module 'prettier'
这是最常卡住新手的点：你点了“格式化文档”，弹窗报错，或者右下角状态栏显示“Prettier is not available”，但你明明装了 Prettier 插件。
根本原因在于 VS Code 不直接运行插件自带的 Prettier，而是优先找你项目里 node_modules 下的本地版本。如果没装，或版本太旧（比如 v1.x），就会失败。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 进项目根目录，运行
npm install --save-dev prettier（推荐 v3.x） - 确保
.prettierrc或prettier.config.js存在且语法合法（空文件也行，但不能写错 JSON） - 在
settings.json中明确指定路径："prettier.prettierPath": "./node_modules/prettier" - 别用全局安装的 Prettier（
npm install -g prettier），VS Code 默认不认
CSS 修改后浏览器没更新？Live Server 插件不监听 .css 文件
你改完 style.css，保存，但浏览器页面没变——不是缓存问题，是 Live Server 默认只监听 .html 和 .js，CSS 改动不会触发刷新。
这不是 bug，是设计如此。Live Server 的定位是“启动一个带热重载的静态服务”，但它本身不处理 CSS 注入逻辑。
实操建议：
- 点击右下角 Live Server 状态栏，选
Disable Live Server，再点一次重新启用——这会强制重建监听列表（临时有效） - 更稳的做法：在项目根目录加
.vscode/settings.json，写入："liveServer.settings.donotShowInfoMsg": true和"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito"（避免缓存干扰） - 真要 CSS 保存即刷新，换用
Browser SyncCLI（npx browsersync start --server --files \"*.css, *.html\"），比插件可靠
HTML 中引用本地图片路径总标红？src 路径校验和工作区设置有关
你在 <img src="./assets/logo.png" alt="vscode如何配置HTML/CSS环境" > 里写的路径没错，但 VS Code 在 src 上画红线，提示 “File not found”，甚至跳转失效——这不是文件不存在，是 VS Code 没把你当前文件夹当“根”。
它默认以打开的文件所在目录为基准解析相对路径，而不是你认为的“工作区根目录”。尤其当你从侧边栏双击打开 HTML，而非通过“文件 → 打开文件夹”进入整个项目时，这个行为特别明显。
实操建议：
- 务必用
File → Open Folder…打开整个项目文件夹，而不是单个 HTML 文件 - 检查左下角状态栏有没有显示文件夹名；如果没有，说明你处于“未托管工作区”状态，所有路径解析都会失准
- 如果必须单文件操作，可以在该 HTML 同级建一个空的
.vscode/settings.json，加："html.suggest.html5": true和"html.format.enable": false（关闭格式化可减少路径误判）
路径解析这事，VS Code 不看 <base href>，也不读 webpack.config.js，它只认你打开的是不是文件夹、以及当前文件相对于该文件夹的位置。这点容易忽略，但改完立刻见效。
