vscode本身不支持html运行，必须依赖live server等插件启动http服务（如http://127.0.0.1:5500）以绕过file://协议限制，解决fetch、相对路径、es模块等报错问题，并支持热重载与局域网调试。
VSCode 本身不带 HTML 运行能力，必须靠扩展启动本地服务或注入预览逻辑——直接双击打开 index.html 会因跨域、路径解析失败、ES模块限制等问题导致脚本不执行、样式丢失、API 调用报错。真正能“运行 HTML”的，不是某个插件，而是能模拟浏览器服务环境的组合方案。
Live Server：唯一值得默认启用的 HTML 运行扩展
它不是简单“右键打开”，而是启动一个真实 HTTP 服务（默认 http://127.0.0.1:5500），解决所有本地文件协议（file://）带来的限制：
- 支持
fetch、XMLHttpRequest等跨域敏感 API 正常工作 - 正确解析相对路径（如
./css/style.css、../data/config.json） - 保存即刷新（热重载），无需手动按 F5
- 支持局域网访问（改
liveServer.settings.host为0.0.0.0即可手机调试）
配置建议（写入项目级 .vscode/settings.json，避免污染全局）：
{
"liveServer.settings.port": 8080,
"liveServer.settings.wait": 300,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito"
}
注意：不要和已弃用的 Open in Browser 同时启用，后者仅生成 file:// 链接，对现代前端开发基本无效。
HTML CSS Class Completion：补全类名，避免手敲拼错
写 <div class="btn-primary"> 时，如果 <code>btn-primary 实际定义在 tailwind.css 或 bootstrap.min.css 中，纯靠记忆极易出错。这个扩展会扫描项目内所有 CSS/SCSS/LESS 文件及已知框架（Tailwind、Bootstrap、Bulma），在 class="" 属性中提供实时补全。
- 支持
@layer和@apply解析（Tailwind 3+） - 类名变更后自动更新补全列表（无需重启）
- 不依赖构建工具，开箱即用，比
CSS Peek更聚焦 HTML 场景
常见误配：若补全不出现，请检查是否已禁用其他 CSS 类扫描类插件（如旧版 Auto Close Tag 的冲突模式），或确认 CSS 文件未被 .gitignore 或 files.exclude 隐藏。
Auto Rename Tag + Auto Close Tag：减少标签操作错误
HTML 嵌套深时，手动改标签名或漏闭合是高频低级错误。这两个插件配合使用效果最稳：
-
Auto Rename Tag：改<section></section>为<article></article>，对应自动同步成 -
Auto Close Tag：输<div> 回车或 <code>>，自动补全为<div></div>，光标停在中间关键细节：两者都默认只作用于
html、xml、vue等语言模式。若在.svelte或 JSX 中失效，需在设置中手动添加语言 ID："auto-rename-tag.activationOnLanguage": ["html", "javascriptreact", "svelte"]
Path Intellisense：路径补全防 404
HTML 中引入外部资源（
<script src="./js/main.js"></script>）、CSS 中@import、或 JS 里import模块时，路径写错直接导致白屏。Path Intellisense 在你输入./或../后，实时列出当前目录结构，支持通配符过滤（如输入main显示所有含main的文件）。- 对大小写敏感路径（Linux/macOS）友好，补全结果严格匹配实际文件名
- 支持
node_modules内部路径（需开启path-intellisense.mappings配置） - 不推荐与已弃用的
Beautify插件共存，后者可能劫持Ctrl+Shift+P > Format Document快捷键
复杂点在于：当项目含符号链接（symlink）或 monorepo 子包时，它默认不跟随跳转。此时需手动配置
path-intellisense.includePaths指向真实位置，否则补全列表为空。
