Live Server5分钟搭好带 Live Reload 的本地预览服务器【免费下载链接】vscode-live-serverLaunch a development local Server with live reload feature for static dynamic pages.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-live-server本文以静态网页为例讲清如何安装 VS Code 插件 Live Server并用它的实时重载Live Reload能力搭一个本地预览服务器保存即见页面效果。解决什么问题周五下午你在改样式动一行 CSS 就切到浏览器刷新看完再切回来写下一行。半小时的样式调整被切来切去拖成一个多小时。Live Server 做的事就是把切换加刷新变成保存。它启动一个本地服务器并监听文件变化你保存后页面自己更新视线可以一直留在浏览器里。它顺带解决第二个麻烦想在手机上看效果或者想给别人现场演示。Live Server 会把服务器暴露到局域网手机和电脑连同一个网络时直接用手机打开就能预览。最短上手路径三步就能看到效果。安装在 VS Code 扩展面板搜索 Live Server点击安装。启动打开一个含 HTML 文件的文件夹点击底部状态栏的 Go Live。确认浏览器自动打开该文件夹下的页面此后每次保存页面自动刷新。喜欢用命令行的话按 CtrlP 输入下面这条命令也能装ext install ritwickdey.liveserver典型使用场景在手机上预览页面效果先确认手机和电脑在同一网络。查出电脑 IPWindows 执行ipconfigmacOS 和 Linux 执行ifconfig在地址后拼上端口例如192.168.1.10:5500手机浏览器即可访问。改完代码存一下手机上同步更新移动端布局问题当场就能验证。给 JavaScript 打断点调试Live Server 可以和 Chrome 调试器配合。把liveServer.settings.ChromeDebuggingAttachment设为true启动服务器后在调试面板选择 Attach to Chrome就能在你日常预览的那个浏览器窗口里直接命中断点、查看变量。调样式时不整页刷新默认情况下Live Server 保存 CSS 后是直接注入变更不做整页重载。长页面里的滚动位置和表单输入不会被重置连续调样式时省掉大量等待。如果你希望每次强制整页刷新把liveServer.settings.fullReload设为true即可。常用配置速查下面 6 项是改动频率最高的写在用户设置或项目.vscode/settings.json里都行。配置项作用示例值liveServer.settings.port指定端口填 0 表示随机可用端口3000liveServer.settings.root指定服务器根目录/srcliveServer.settings.ignoreFiles排除不需要监听的文件[**/*.scss]liveServer.settings.CustomBrowser指定用哪个浏览器打开chromeliveServer.settings.NoBrowser只起服务器不自动开浏览器trueliveServer.settings.wait重载前的延迟单位毫秒500出问题先看这里这三个情况覆盖了日常遇到的大部分麻烦。端口被占用把liveServer.settings.port设为 0让系统自动挑。文件改动没触发刷新检查该文件是否命中ignoreFiles里的规则。启动后浏览器没打开确认NoBrowser为false或用CustomBrowser指明浏览器。完整配置说明见 settings 文档常见疑问整理在 FAQ。静态页面开发里最耗时间的不是写代码而是切换和刷新Live Server 把这些零碎时间收走了。现在就打开一个 HTML 项目点一下底部状态栏的 Go Live。【免费下载链接】vscode-live-serverLaunch a development local Server with live reload feature for static dynamic pages.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-live-server创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考