VSCode HTML开发效率瓶颈在于配置而非语法：需启用emerald缩写、配好Live Server路径与端口、统一用Prettier格式化、严格按HTML文件位置写相对路径。
VSCode 写 HTML 本身没有门槛，但真正影响效率的不是“能不能写”，而是“改得快不快、补全准不准、结构清不清楚、预览顺不顺畅”。下面几个点，都是日常高频卡点。
Emmet 缩写不生效？检查 emerald 相关设置和触发方式
很多人敲 div.container>ul>li*3 按 Tab 没反应，第一反应是插件坏了——其实大概率是没开 Emmet 或触发键被改了。
-
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac）打开命令面板，搜Preferences: Open Settings (JSON)，确认里面有"emerald.enableEmmetAbbreviation": true（注意：键名是emerald，不是emmet，旧版 VSCode 可能是emmet，新版已统一为emerald） - 默认缩写触发键是
Tab，但如果你装了 Vim 插件或设置了editor.tabCompletion为on，可能冲突；建议显式设"emerald.triggerExpansionOnTab": true - 缩写只在
.html文件或html语言模式下生效；如果文件是.txt或语言模式被误设为Plain Text，右下角点击语言标签手动切回HTML
Live Server 点击刷新没反应？看端口、路径和文件保存状态
Live Server 插件点“Go Live”后浏览器空白或 404，90% 和路径有关，不是插件问题。
- 确保当前打开的是一个
.html文件（不是文件夹），且该文件已保存（未保存的临时文件不会被服务识别） - 默认会从项目根目录起服务，如果
index.html不在根目录，比如在src/index.html，它访问的是http://127.0.0.1:5500/，实际要访问http://127.0.0.1:5500/src/才能看到；可在settings.json中加"liveServer.settings.root": "./src" - 端口被占会导致启动失败但无明显报错；可右键“Go Live”选择“Change Live Server port”换一个，比如
5501
代码格式化乱套？别让 Prettier 和内置 HTML 格式化打架
按 Shift+Alt+F 后 <img> 被拆成多行、属性顺序错乱、甚至删掉自闭合斜杠，说明格式化工具链没对齐。
立即学习“前端免费学习笔记（深入）”；
- VSCode 内置的 HTML 格式化（
vscode.html-language-features）和Prettier默认规则冲突；禁用前者更稳妥："html.format.enable": false - 确保
Prettier是默认格式化工具：在设置里搜default formatter，对HTML语言选esbenp.prettier-vscode - 如果用了
prettier.config.js，记得加htmlWhitespaceSensitivity: 'ignore'，否则空格换行容易被误判为内容
引用本地 CSS/JS 不加载？路径是相对当前 HTML 文件，不是工作区根目录
这是新手最常踩的坑：把 style.css 放在 css/style.css，HTML 在 index.html（根目录），却写 <link rel="stylesheet" href="css/style.css"> —— 这是对的；但如果 HTML 在 pages/about.html，同样写这个路径就 404。
- 浏览器解析路径时，基准是当前 HTML 文件所在目录，不是 VSCode 打开的文件夹根目录
- 推荐统一用相对路径：上级目录用
../，同级用./（可省略），避免绝对路径/css/（依赖服务器配置） - VSCode 的
Path Intellisense插件能自动提示路径，但只对已存在的文件有效；新建文件后要先保存，才能被识别
真正拖慢 HTML 开发的，往往不是语法不会写，而是路径猜错、格式化反向污染、预览没连上这些“看不见的环节”。调一次 emerald 设置、配一次 Live Server root、定死一个格式化工具，后面几周都会少点烦躁。
