必须选 live server,因为它起真实 http 服务(如 http://localhost:5500),绕过浏览器本地文件跨域限制,使 css import、fetch、service worker 等正常工作;其他插件如 live preview 不监听文件变化,live reload 需额外配置构建工具。

直接用 Live Server 插件,别试其他名字相近的——live reload、live preview 都不满足“改完就刷”的需求。
为什么必须选 Live Server 而不是别的插件?
它不是简单打开一个 file:// 页面,而是起一个真实的 HTTP 服务(比如 http://localhost:5500),能绕过浏览器对本地文件的跨域限制,CSS import、fetch 请求、Service Worker 等功能才真正可用。
常见错误现象:
- 装了
live preview,改完 HTML 保存没反应 → 它压根不监听文件变化,也不起服务器 - 装了
live reload,但页面不刷新 → 它需要你额外配 Gulp/Webpack,单独装插件无效 - 右键没出现
Open with Live Server→ 插件没装对,或装的是同名但作者不是Ritwick Dey的非官方版本
Live Server 启动后浏览器没自动打开?检查这三处
默认行为是自动开浏览器,但经常被以下设置干扰:
-
"liveServer.settings.NoBrowser": true—— 如果你在.vscode/settings.json里手动加了这行,删掉就行 - 系统默认浏览器被锁死为 Edge 或 Safari,而你想要 Chrome → 在设置里加:
"liveServer.settings.CustomBrowser": "chrome" - 端口被占用(比如另一个项目正在用
5500)→ 改成:"liveServer.settings.port": 8080,再重启插件
验证是否生效:启动后看 VSCode 底部状态栏有没有蓝色 Go Live 按钮亮起,且旁边显示端口号(如 5500)。
想保存即刷新,但又不想每敲一个字都存?配 files.autoSave
Live Server 只响应“保存动作”,不是“内容变化”。如果你关了自动保存,就得手动按 Ctrl+S 才能触发刷新——这反而比不用插件还麻烦。
推荐配置(写在工作区 .vscode/settings.json 中):
{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 500
}
这样编辑时停顿半秒就自动存,Live Server 紧接着刷新,手感接近实时。注意别设成 "onFocusChange",切到浏览器窗口就保存,容易误触。
多个 HTML 文件时,默认打开哪个?
插件默认找 index.html;找不到就打开当前活动标签页的 HTML 文件。但如果你项目里有 src/index.html 和 demo.html 并列,右键点 demo.html 再选 Open with Live Server,它就会以 demo.html 为入口,地址变成 http://localhost:5500/demo.html。
如果你想固定入口,加这一行配置:
"liveServer.settings.file": "src/index.html"
路径是相对于项目根目录的,别写成绝对路径或带 ./ 前缀。
复杂点在于:如果同时开了两个 Live Server 实例(比如两个终端窗口各自跑了不同端口),它们互不感知,改一个文件可能只刷其中一个页面。这种情况得手动停掉旧实例——点底部状态栏的 Go Live 按钮两次,或右键选 Stop Live Server。











