VSCode中HTML文件无语法高亮，因文件被识别为“Plain Text”，需点击右下角语言模式→选“Change Language Mode”→输入html回车，即可启用HTML语言服务。
HTML文件没语法高亮？检查文件关联
VSCode 默认不会把所有 .html 后缀都当 HTML 处理，尤其你用命令行新建、或从别处复制来的文件，可能被识别成纯文本。右下角状态栏会显示当前语言模式（比如 “Plain Text”），点它 → 选 “Change Language Mode” → 输入 html 回车。之后这个文件就归 HTML 语言服务器管了，标签补全、错误提示、格式化全都能用。
常见错误现象：div 不变色、输入 没自动弹出标签建议、保存后不自动格式化。
- 永久生效：在设置里搜
files.associations，加一条"*.htm": "html"（防老式后缀） - 项目级覆盖：根目录放
.vscode/settings.json，写"files.associations": {"*.html": "html"} - 别信右键“重命名”改后缀——有些系统会隐藏真实扩展名，导致 VSCode 看不到
.html
输入 <div> 没自动闭合？开 Emmet
VSCode 自带 Emmet，但默认只对 HTML 语言模式生效，且部分旧版本需要手动确认启用。先确保语言模式是 html（见上一条），再试敲 div + Tab —— 如果没反应，说明 Emmet 被关了或冲突了。
使用场景：写结构快、少打重复字符、避免手滑漏闭合标签。
立即学习“前端免费学习笔记（深入）”；
- 检查设置：搜
emmet.includeLanguages，确认"html": "html"在列表里（默认就有） - 禁用其他插件干扰：比如某些“HTML Snippets”类插件会劫持
Tab行为，临时禁用它们再试 - Emmet 触发键可改：默认是
Tab，但如果你习惯用Enter，改emmet.triggerExpansionOnTab为false，再配editor.acceptSuggestionOnEnter为"on"
保存时格式乱了？关掉 Prettier 的自动格式化或调参数
很多人装了 Prettier 后，一保存，<img src="a.jpg"> 变成 <img src="a.jpg" />，或者缩进从 2 空格变 4 空格。这不是 bug，是 Prettier 按自己规则重写了 HTML，而它默认不完全兼容传统 HTML 写法（比如自闭合标签要不要斜杠）。
性能影响小，但协作时容易引发无意义的 Git diff。
- 最简方案：关自动格式化，按
Shift+Alt+F手动触发，或右键菜单选“Format Document With…”挑编辑器内置格式化器 - 保留自动格式但改行为：在
.prettierrc里加"htmlWhitespaceSensitivity": "css"（避免空格误删）和"singleAttributePerLine": false（防属性换行） - 如果不用 Prettier，直接用 VSCode 内置格式化：设置里开
html.format.wrapAttributes为"auto"，再设html.format.indentInnerHtml为true
Live Server 不刷新？路径和端口是关键
点“Go Live”没反应，或浏览器打开空白页、报 net::ERR_CONNECTION_REFUSED，八成是端口被占，或者你没在项目根目录打开 VSCode（导致 Live Server 找不到 index.html）。
使用场景：本地快速预览、调试响应式布局、验证 JS 加载顺序。
- 检查右下角状态栏：Live Server 显示的端口号（如
http://127.0.0.1:5500），用浏览器直接访问该地址；打不开就说明服务根本没起来 - 换端口：点状态栏 Live Server → “Change Port”，输个没被占的（比如
5501） - 必须从含
index.html的文件夹打开 VSCode，不是只打开单个文件——否则 Live Server 不知道哪是根 - 别用
file://协议双击打开 HTML：JS 的fetch、图片相对路径、模块导入全会跨域失败
