HTML开发VS Code必备四款插件：Auto Close Tag与Auto Rename Tag解决标签闭合及同步重命名；Path Intellisense实现路径智能补全；Live Server提供本地HTTP服务实时刷新；HTML Snippets和HTML CSS Class Completion（或Tailwind CSS IntelliSense）提升语法提示效率。
HTML开发在 VS Code 里不用装一堆插件也能写，但想少踩坑、不手抖、改完立刻看到效果，以下几款是真正能闭环工作的核心插件——不是“看起来很酷”，而是关掉就明显变慢。
HTML标签自动闭合与同步重命名必须开
写 <div> 忘了闭合、改 <section> 漏掉 ，浏览器报错才反应过来？Auto Close Tag 和 Auto Rename Tag 就是干这个的。前者在你输入 <div 回车或 > 后自动生成 </div>；后者在你修改开始标签时（比如把 <span> 改成 <p>），光标一移开，闭合标签立刻同步变。
- 两者都支持 JSX、Vue 单文件组件里的模板块，不是只认纯 HTML 文件
- 如果同时装了
Volar或Vetur，记得在设置里关掉它们内置的同类功能，否则会冲突导致标签乱跳 - 别指望它修嵌套错误——
<div><p></div></p>这种结构它不会主动纠正，只保“对称”不保“合法”
路径补全不能只靠记忆，Path Intellisense 是刚需
HTML 里写 <img src="assets/logo.png">，输到 as 就该提示 assets/；写 <link href="../css/main.css">，输 ../c 就该列出所有 css/ 目录下的文件——这靠人手数 ../ 层数或翻文件夹太容易出错。Path Intellisense 就是让路径变成可预测、可联想的操作。
- 默认支持
@/别名（如@/components/Button.vue），但需项目里有 webpack / vite 配置 alias 才生效，插件本身不帮你配构建工具 - 遇到
Cannot find module报错，先检查是不是路径补全选错了大小写——Windows 不敏感，Linux/macOS 敏感，插件提示的是文件系统真实大小写 - 不推荐和
ESLint的import/no-unresolved规则混用在 HTML 中，它只管 JS/TS 的 import，对src或href属性无效
Live Server 要比右键“Open with Live Server”更稳
点一下就起一个本地服务、自动打开浏览器、改完 HTML/CSS/JS 实时刷新——听起来简单，但原生 open in browser 插件只是调系统默认浏览器打开 file:// 协议，跨域、相对路径解析、ESM 模块加载全崩。Live Server 起的是真实 HTTP 服务（默认 http://127.0.0.1:5500），所有现代 Web 特性都能跑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 端口被占？在
.vscode/settings.json加"liveServer.settings.port": 3000换一个 - 启动后页面空白？检查控制台有没有
Cross-Origin Request Blocked——说明你手动用了file://打开，得关掉旧标签，用 Live Server 新开的链接 - 它不处理构建产物，别指望它跑
dist/下的文件，工作区根目录才是它服务的起点
语法提示类插件，HTML Snippets 和 HTML CSS Class Completion 够用
敲 html:5 回车生成完整 HTML5 模板、lorem20 插入 20 字假文、.btn + Tab 补全 <div class="btn"></div>——这些不是炫技，是减少机械输入带来的拼写错误和格式混乱。HTML Snippets 提供基础标签快捷键，HTML CSS Class Completion（或新版叫 HTML CSS Class Suggestions）则从当前项目 CSS/SCSS 文件里提取类名，写 class="m" 就提示所有以 m 开头的类。
- 别装
Auto Complete Tag这类名字相近但功能重复的插件，VS Code 市场里同名插件版本混乱，容易覆盖掉Auto Close Tag的行为 - 如果你用 Tailwind，换
Tailwind CSS IntelliSense，它能识别class="flex gap-4 p-2 hover:bg-gray-100"并实时预览样式，比通用类名提示精准得多 - 这些提示依赖文件后缀识别语言模式，确保
.html文件右下角显示的是 “HTML”，不是 “Plain Text” 或 “PHP”
插件不是越多越好，HTML 开发真正卡脖子的就三件事：标签写错、路径写错、改了看不见。上面四组插件分别对准这三点，装完重启 VS Code，打开一个空 index.html 试五分钟，就能感受到区别——其它所谓“增强体验”的插件，等你真需要时再加也不迟。
