VSCode前端开发必装插件是Live Server、Auto Close Tag、Auto Rename Tag和Path Autocomplete：Live Server提供HTTP服务与自动刷新，Auto Close Tag实现标签自动补全，Auto Rename Tag同步修改开闭标签，Path Autocomplete智能补全src/href路径，共同解决保存刷新、标签漏闭合、路径手输易错等核心卡点。
VSCode 本身不直接预览网页，但装对插件后，保存即刷新、路径自动补全、HTML 标签智能闭合这些事就能全自动完成——关键不是“多装几个”，而是选准那几个真正减少手动操作的。
Live Server 启动本地服务并自动刷新
写完 index.html 后双击打开，浏览器里看到的永远是旧缓存；用 Live Server 就能绕过这一步，它起一个带热重载的本地 HTTP 服务。
- 安装后右键点击 HTML 文件 → “Open with Live Server”，浏览器自动打开
http://127.0.0.1:5500/index.html - 保存文件时，页面自动刷新，无需手动 F5
- 默认端口是 5500，如被占用，插件会在状态栏显示新端口，也可在设置中改
liveServer.settings.port - 不支持直接打开
file://协议的页面（比如拖进浏览器的本地 HTML），这是 CORS 限制，必须走http://
Auto Close Tag + Auto Rename Tag 配合写 HTML
手敲 <div> 后漏掉 </div> 是新手高频错误；改了 <header> 却忘了同步改 </header> 更容易引发布局错乱。
-
Auto Close Tag在输入<div后按>，自动补全为<div></div>，光标停在中间 -
Auto Rename Tag选中<main>并改成<section>，对应闭合标签会同步变，不用手动找 - 两个插件都默认启用，无需配置；但若和其他标签插件（如 Emmet）冲突，可关掉 Emmet 的自动闭合：
emeraldwalk.runonsave或禁用html.autoClosingTag
Path Autocomplete 补全 HTML 中的 src/href 路径
写 <script src="js/ 时，传统方式要切到资源管理器里复制粘贴路径，容易出错且打断思路。
- 输入引号内路径时，按
Ctrl+Space触发路径补全，会列出当前项目下所有匹配的.js、.css、.png等文件 - 支持别名路径（如
@/assets/），需配合jsconfig.json或tsconfig.json中的baseUrl和paths配置 - 若补全不出现，检查是否在
.vscode/settings.json中误关了："path-autocomplete.showButtons": false
Preview on Web Servers 不如直接用 Live Server
有些教程推荐 “Preview on Web Servers” 或 “view in browser”，它们只是调用系统默认浏览器打开 file:// 路径——这意味着无法加载 fetch()、localStorage 受限、CSS @import 失败等典型问题。
- 这类插件本质是快捷方式，不解决协议限制，适合纯静态展示，不适合开发调试
- Live Server 走的是真实 HTTP 服务，兼容所有现代前端 API，是开发阶段的事实标准
- 如果项目已用 Webpack/Vite，就别装 Live Server，直接用框架自己的 dev server
真正卡住效率的从来不是功能少，而是每次保存都要手动切浏览器、输路径、清缓存。这几个插件加起来不到 10MB，但把「写 → 保存 → 切换 → 刷新 → 检查」压缩成一次保存动作——前提是路径补全别配错别名，Live Server 别误关端口监听，标签自动闭合别和 Emmet 冲突。这些细节比插件本身更影响实际体验。
