vs code html 自动格式化错乱因内置格式器简陋，需禁用 html.format.enable 并配置 prettier；emmet 失效多因语言模式非 html；live server 路径 404 源于根目录理解偏差；doctype 自动插入可关 html.suggest.html5。
HTML 文件一保存就自动格式化，但缩进错乱或标签被改写
VS Code 默认启用 editor.formatOnSave 后，如果没配对的 HTML 格式化器，它会 fallback 到内置的简易格式器，结果常把 <div><p>文本</p></div> 拆成多行加空格，甚至错误闭合自闭合标签（比如把 <img src="a.jpg" alt="vscode怎么编写html_vscode编写html插件配置【技巧】" > 改成 <img src="a.jpg" alt="vscode怎么编写html_vscode编写html插件配置【技巧】" >）。
根本原因是：VS Code 本身不带 HTML 专业格式器，得靠插件补上。最稳的选择是装 ESLint + Prettier + prettier-plugin-html 组合，或者更轻量直接用 prettier 插件并指定解析器。
- 打开插件市场搜
Prettier，安装官方出品的esbenp.prettier-vscode - 在设置里搜
html.format.enable，把它设为false—— 关掉 VS Code 自带 HTML 格式器，避免和 Prettier 冲突 - 在工作区根目录加
.prettierrc，内容写：{ "parser": "html", "tabWidth": 2, "useTabs": false } - 确保文件关联正确：右下角点击“Plain Text”或“HTML”，选成
HTML；否则 Prettier 不会触发
输入 按回车没自动补全 或属性提示
这是 Emmet 功能没激活或作用域不对。VS Code 的 Emmet 默认只在 html、vue、jsx 等语言模式下生效，纯文本或未识别后缀的文件里不会响应。
常见掉坑点：新建文件叫 test.txt，手敲 div 回车，没反应——不是插件坏了，是语言模式错了。
立即学习“前端免费学习笔记（深入）”；
- 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac），输Change Language Mode，选HTML - 检查设置里
emmet.includeLanguages是否有漏配，比如想在.svelte里用 Emmet，就得加"svelte": "html" -
div回车能出完整标签，但div.myclass没反应？确认emmet.triggerExpansionOnTab是true，且没被其他插件快捷键劫持
Live Server 启动后页面空白，控制台报 net::ERR_FILE_NOT_FOUND
这不是插件问题，是路径引用写死了。Live Server 启动的是本地 HTTP 服务（http://localhost:5500/），所有相对路径都基于项目根目录解析，而双击 HTML 文件用 file:// 协议时，浏览器以当前文件所在目录为基准。
典型翻车现场：<img src="images/logo.png" alt="vscode怎么编写html_vscode编写html插件配置【技巧】" > 在子文件夹里打开正常，用 Live Server 就 404——因为服务器认为根是项目顶层，而图片其实在 ./src/images/ 下。
- 启动 Live Server 前，先确认当前打开的文件是项目根目录下的 HTML（比如
index.html），不是嵌套太深的子页 - 资源路径统一用相对路径，且以项目根为起点，比如
src="images/logo.png"前提是images/和index.html同级 - 需要动态路径或兼容双击打开？改用
<base href="./">配合./images/logo.png，但注意会影响所有相对链接
保存时自动插入 和基础结构，但我不想要
这是 VS Code 的 HTML 模板片段（skeleton snippet）在作祟。当你新建一个空 .html 文件并首次输入 ，它会自动展开默认骨架——但很多人不知道这行为可关。
这个片段由内置语言功能提供，不依赖插件，所以禁用插件也没用。
- 打开设置，搜
html.suggest.html5，把它设为false - 或者更彻底：搜
html.autoClosingTag和html.autoCreateQuotes，按需关掉，减少干扰 - 如果只是某次不想展开，敲
后立刻按 <code>Esc可取消自动补全弹窗
