live server是html开发唯一真正需要的运行插件，它启动真实http服务（默认http://127.0.0.1:5500），解决file://协议导致的跨域、fetch失败、模块导入报错及相对路径加载失效等问题；右键html文件选择“open with live server”即可自动打开并保存即刷新，是现代前端开发的底线依赖。
Live Server 是 HTML 开发唯一真正需要的运行插件
VSCode 本身不带 Web 服务器，file:// 协议打开 HTML 文件会直接报 Cross-Origin Request Blocked，AJAX、fetch、模块导入、相对路径资源加载全失效。Live Server 插件启动的是真实 http:// 服务，端口默认 5500，改端口可在 .vscode/settings.json 加："liveServer.settings.port": 3000。
安装后右键 HTML 文件 → Open with Live Server，浏览器自动打开；保存即刷新，无需手动操作。它不是“可选增强”，而是现代 HTML/CSS/JS 开发的底线依赖。
Auto Rename Tag 和 Auto Close Tag 解决最频繁的手动出错
写 HTML 时改 <div> 忘记同步 <code>
，或漏写闭合标签导致结构塌陷——这类错误占初学者调试时间 60% 以上。
-
Auto Rename Tag：光标停在 <section></section> 的 section 上，改成 article，
-
Auto Close Tag：输入 <p></p> 回车或 Tab，立刻补全为 <p></p>，且光标落在中间
两者都轻量、零配置、无兼容问题，装上就生效，比反复检查标签配对快一个数量级。
Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
Prettier 和 HTML Snippets 是格式与骨架的硬需求
没有格式化，HTML 很快变成缩进混乱、属性换行随意的不可读状态；没有骨架生成，每次新建文件都要手敲 !DOCTYPE、meta charset、title 等固定结构。
-
Prettier：保存时自动整理缩进、属性换行、引号风格（默认双引号），配合设置 "html.format.enable": true 生效
-
HTML Snippets：输入 ! + Tab 直接生成完整 HTML5 骨架；输入 table>tr*2>td*3 + Tab 用 Emmet 一键生成表格结构
它们不参与“运行”，但直接影响你能否持续写出可维护的 HTML —— 尤其当项目从单页扩展到多页时，一致性比炫技重要得多。
别装 Open in Browser 或 View In Browser
这两个插件看似方便，实则强化了 file:// 错误路径。它们右键打开的仍是本地文件协议链接，一旦你写了 fetch('./data.json') 或引入 ./style.css，控制台立刻报错，而你可能花十分钟排查路径，其实根源是协议限制。
Live Server 已覆盖全部预览场景，额外装这两个插件只会增加右键菜单噪音，还容易误点导致调试环境错乱。真要多浏览器测试，直接复制 Live Server 启动后的地址（如 http://127.0.0.1:5500/index.html）粘贴到其他浏览器即可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
