Live Server 快速上手：三步搭建本地实时预览服务器

Live Server 快速上手三步搭建本地实时预览服务器【免费下载链接】vscode-live-serverLaunch a development local Server with live reload feature for static dynamic pages.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-live-server打开项目改一行 CSS按保存的瞬间浏览器里就变了不用切窗口手动刷新。Live Server 是一款免费的 VSCode 扩展做的就是这件事启动一个带实时重载的本地开发服务器。写静态页面的开发者、正在练 HTML 和 CSS 的前端新手都适合用它。从安装到 Go Live 的 5 步打开 VSCode 扩展面板搜索 Live Server点击安装。在 VSCode 中打开一个包含 HTML 文件的文件夹双击打开页面文件。点击底部状态栏的 Go Live 按钮浏览器自动打开并显示页面。修改代码后按保存浏览器自动重载显示最新效果。用完后点状态栏的 Stop结束服务。三个真实场景里的 Live Server预览静态页面。打开 index.html 点 Go Live 后改任何 HTML 结构或 CSS 样式保存即见效果。调样式不用来回切窗口。手机同步预览。想在手机上确认效果先确保手机和电脑连同一个 Wi-Fi用 ipconfigWindows或 ifconfigmacOS/Linux查出电脑 IP在浏览器输入http://IP:端口端口号看 VSCode 状态栏的 Server starts 提示。之后两边画面同步。给 JS 打断点。装 Debugger for Chrome 扩展把liveServer.settings.ChromeDebuggingAttachment设为 true再从调试面板点 Attach to Chrome就能挂到当前正在运行的浏览器窗口上设断点、单步执行不用另开调试窗口。Live Server 常用配置四件套配置改在 VSCode 的 settings.json 里把同样的配置写进项目根的.vscode/settings.json则只对该项目生效也方便和队友共享。最常用的是下面四项配置项作用示例liveServer.settings.port服务器端口5500 被占用就改这里设 0 表示自动选3000liveServer.settings.root指定服务器根目录适合嵌套目录的项目/srcliveServer.settings.CustomBrowser选择 Go Live 时打开的浏览器chromeliveServer.settings.ignoreFiles列出改动后不触发重载的文件[**/*.ts]避坑提醒端口 5500 被占用起不来服务把liveServer.settings.port改成别的数字或者直接设 0让 Live Server 自动挑一个可用端口。保存文件却不触发重载先看文件是否命中ignoreFiles里的规则默认.scss、.sass、.ts文件不会被跟踪再确认状态栏的 Go Live 处于活动状态。浏览器没有自动打开检查liveServer.settings.NoBrowser是否被设成了 true改回 false 恢复默认行为。延伸资料docs/settings.md完整配置项与默认值清单docs/faqs.md手机访问、动态页面等常见问题src/extension.ts扩展入口文件src/appModel.ts核心服务器逻辑如果它对你的工作流有用装上 Live Server下一个静态页面直接点 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），仅供参考