如何停止VS Code中使用Live Share时网页自动刷新？

核心原因 #

自动刷新并非VS Code自动保存导致，大概率是项目中的热重载工具（如Vite、Webpack Dev Server、Live Server插件）在监听文件变化——只要文件被修改（包括Live Share同步的编辑操作），就会触发页面刷新。

解决方案 #

1. 关闭热重载工具的自动刷新 #

• 若使用Vite：在vite.config.js中修改配置，设置server.hmr = false，直接关闭全局热重载
• 若使用Webpack Dev Server：在webpack.config.js里将devServer.hot设为false，或调整watchOptions忽略不必要的文件变更
• 若使用VS Code的Live Server插件：右键右下角Live Server图标，选择Stop Live Server，或在插件设置中关闭Live Server: Auto Refresh选项

2. 切换为手动刷新模式 #

多数热重载工具支持手动触发刷新：

• Vite：在终端按r键手动刷新页面
• Webpack Dev Server：在浏览器控制台输入window.location.reload()，或直接点击浏览器刷新按钮
• Live Server：在插件设置中将自动刷新改为Manual Refresh，需要刷新时点击插件图标内的刷新按钮

3. 调整Live Share同步配置 #

在VS Code设置中搜索liveShare，找到Live Share: File Sync相关选项，尝试将文件同步触发时机改为仅手动保存时同步（需双方都配置，可能会影响协作流畅度）

替代方案 #

• 双方各自启动本地开发服务，仅通过Live Share同步代码修改，不共享开发服务器的热重载状态，各自页面刷新仅受本地操作影响
• 使用Code With Me（JetBrains协作工具）替代Live Share，它对文件变更同步和热重载的隔离性更好，适合需要独立控制页面刷新的场景

内容的提问来源于stack exchange，提问作者blaze