Live Server是HTML运行环境核心，必须安装以避免file://协议导致的跨域错误；Auto Rename Tag与Auto Close Tag需成对启用并正确配置语言模式。
Live Server 是 HTML 运行环境的核心，不是可选项
不装 Live Server，就只能用 file:// 协议直接双击打开 HTML 文件——这时候浏览器会报 Cross-Origin Request Blocked，所有 fetch、AJAX、本地 JSON 加载、甚至部分 CSS @import 都会失败。这不是你代码写错了，是浏览器安全策略卡死的。
装完 Live Server 后，右键 HTML 文件 → Open with Live Server，它会在 http://127.0.0.1:5500/xxx.html 这类地址下启动一个轻量 HTTP 服务，所有前端能力才真正可用。
- 默认端口是 5500，想改的话，在工作区根目录建
.vscode/settings.json，加这行："liveServer.settings.port": 3000
- 别和
open in browser插件混用——它走的是file://，跟Live Server完全不同路子 - 修改保存后自动刷新页面，但只监听当前文件及同目录下被引用的资源（比如 JS/CSS），跨文件夹引用要手动确认路径是否正确
Auto Rename Tag 和 Auto Close Tag 必须成对启用
单独装 Auto Rename Tag，改了 <div> 不一定同步更新 </div>；单独装 Auto Close Tag，敲 <div 回车可能没反应——这两个插件底层依赖相同语法解析器，且需在设置里显式开启：
-
Auto Rename Tag：默认开启，但仅对已识别为 HTML 模式的文件生效（注意右下角状态栏是否显示HTML） -
Auto Close Tag：安装后需手动打开设置，搜autoCloseTag，确保Enable Auto Close Tag打钩 - 如果用了 Vue 或 JSX 文件，它们默认不是 HTML 模式，得额外配置
"files.associations"把*.vue映射到html
HTML Snippets 和 Emmet 是写结构的加速器，但别指望它猜你意图
输入 html:5 + Tab 生成基础模板、ul>li*3 + Tab 展开列表，这些是 Emmet 内置能力，VS Code 默认自带，不需要额外插件。但真实开发中容易卡住的点是：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- Emmet 缩写只在
HTML或JavaScript React等特定语言模式下触发，写 .js 文件里敲div+ Tab 是没反应的 -
HTML Snippets插件补的是语义化标签（比如输入main提示<main></main>），但它不会覆盖 Emmet，两者共存无冲突 - 如果缩写不生效，先按
Ctrl+Shift+P输入Change Language Mode，确认当前文件语言是HTML
Prettier 和 HTML CSS Support 是“省心”型插件，但有隐藏依赖
Prettier 格式化 HTML 时，默认会把属性换行、引号转双引号、强制闭合自闭合标签（如把 <img> 改成 <img />）。这些行为在纯静态页里没问题，但在 Vue 或某些 CMS 模板里可能报错。
HTML CSS Support 能在 class="" 里提示你已定义的 CSS 类名，但它只读取项目内 .css 或 .scss 文件，不会扫描 node_modules 或 CDN 引入的样式库。
- 装
Prettier后，建议在.vscode/settings.json里加"prettier.singleQuote": true,
避免和 ESLint 冲突 -
HTML CSS Support对tailwind.css或Bootstrap这类工具类框架基本无效，别指望它提示bg-red-500 - 这两个插件都不需要重启 VS Code，但首次启用时可能要等几秒才能加载完项目样式表
