vs code 新建 .html 文件即支持语法高亮、emmet 和标签补全，无需插件；须确保编码为 utf-8、使用 live server 预览（非双击），并正确输入 emmet 缩写。
直接新建 .html 文件就能写，不用装插件或配置
VS Code 本身对 HTML 零依赖——只要文件后缀是 .html，它就自动启用语法高亮、基础标签补全和 Emmet 支持。你不需要提前安装“HTML 插件”或改设置，新建即用。
常见错误现象：index.html 写完双击打开是空白页，或者浏览器地址栏显示 file:///... 但内容不渲染——大概率是没写 结构，或保存时误选了其他编码（比如 UTF-16）。
- 右键资源管理器空白处 → 新建文件 → 输入
index.html（必须带.html后缀） - 按
Enter确认后，立刻按!+Tab（Emmet 快捷键），自动生成标准 html5 模板 - 保存时确认右下角编码显示为
UTF-8；如果显示UTF-16 LE，点它 → 选择Save with Encoding→UTF-8
用 Live Server 实时预览，别双击打开文件
双击 index.html 运行，浏览器走的是 file:// 协议，很多功能（比如 fetch 本地 jsON、模块导入、Service Worker）会直接报错或不生效。真实开发必须走 http 服务。
使用场景：改一行 HTML 就想立刻看效果，且后续要加 JS/CSS/接口调用。
立即学习“前端免费学习笔记（深入）”；
- 在扩展市场搜
Live Server（作者：Ritwick Dey），安装并重启 VS Code - 右键编辑器里的
index.html→ Open with Live Server，自动在浏览器打开http://127.0.0.1:5500/index.html - 之后每次保存，页面自动刷新；端口冲突时，它会自动换一个（比如
:5501）
emmet 是默认开启的，但缩写要敲对才触发
VS Code 的 Emmet 不是“智能猜”，而是严格匹配缩写规则。敲错一个字母、少个符号，Tab 就没反应——不是插件没开，是输入不符合语法。
参数差异：div 和 div* 效果不同；ul>li*3 生成 3 个 <li>，但 ul>li*3{item$} 会带上文字 item1～item3。
- 输入
html:5+Tab→ 完整 HTML5 模板（含<meta charset="utf-8">） - 输入
section.container>h1+p+Tab→ 套嵌结构：<section class="container"><h1></h1> <p></p></section> - 如果
Tab没反应，检查是否在注释里、是否漏了或引号、或当前语言模式被误设成 <code>Plain Text（右下角点一下切回HTML）
别改 files.associations 强制关联 HTML，除非真有特殊需求
有人遇到“写 .vue 文件里 template 部分没 HTML 补全”，就去用户设置里加 "files.associations": {"*.vue": "html"}——这会让整个 .vue 文件被当纯 HTML 解析，Script 和 Style 区域失去 JS/CSS 语法支持，得不偿失。
性能影响：错误关联会导致 VS Code 启动变慢、内存占用升高，尤其打开大项目时。
- 默认情况下，VS Code 能正确识别
.html、.htm、.shtml等后缀，无需手动干预 - 如果打开某个文件后右下角显示
Plain Text，点它 → 选择HTML即可（仅当前文件生效） - 真正需要改
files.associations的情况极少，比如公司内部用.tpl写 HTML 模板，且确定所有.tpl都是纯 HTML
最常被忽略的是保存编码和预览方式——90% 的“写完了看不到效果”问题，都卡在这两步上。其他全是锦上添花。