VS Code的Live Server扩展无法自动刷新浏览器问题求助

• Visual Studio Code 使用Live Server扩展时可正常打开页面，但修改代码后浏览器不会自动刷新，仅能关闭后重新打开页面查看修改效果
• 尝试修改配置指定Chrome为默认浏览器时，弹出cannot edit in read only editor报错无法操作
• 已尝试无效操作：确认Chrome已设为系统默认浏览器、重装Visual Studio Code
• 当前已安装扩展列表：Code runner、HTML CSS Support、Live Sass compiler、Live Server、Monokai Pro

第一步：修复配置只读报错 #

• 请勿直接在设置预览页编辑参数：按快捷键Ctrl+,（Windows）/Cmd+,（Mac）打开设置界面后，点击页面右上角的*打开设置(JSON)*图标，进入可编辑的JSON配置页再修改参数
• 若仍提示只读，检查配置文件权限：Windows系统下配置文件路径为C:\Users\你的用户名\AppData\Roaming\Code\User\settings.json，Mac系统下路径为~/Library/Application Support/Code/User/settings.json，右键打开文件属性，取消「只读」勾选，确保当前系统用户拥有该文件的读写权限

第二步：修复Live Server自动刷新失效问题 #

按优先级依次尝试以下操作：

1. 排除扩展冲突
   临时禁用除Live Server外的所有扩展，尤其是Live Sass compiler，该扩展的编译写入逻辑容易和Live Server的文件监听逻辑冲突，导致变更检测失效。禁用后重启VS Code测试自动刷新是否恢复，若恢复则逐个开启其余扩展定位冲突项，可调整冲突扩展的监听/保存时机参数规避问题
2. 配置Live Server核心参数
   在可编辑的settings.json中添加以下配置：

// 指定Live Server默认启动Chrome
"liveServer.settings.CustomBrowser": "chrome",
// 关闭预览模式启用全量文件监听
"liveServer.settings.useBrowserPreview": false,
// 配置忽略的文件类型，避免Sass编译生成文件触发重复监听
"liveServer.settings.ignoreFiles": [
    ".vscode/**",
    "**/*.scss",
    "**/*.sass"
],
// 取消监听延迟
"liveServer.settings.wait": 0

3. 校验项目路径规则

• 项目存放路径不要包含中文、空格、特殊字符或emoji，Live Server的文件监听服务对非ASCII字符路径兼容性较差，会导致变更识别失败
• 确保你修改的文件处于VS Code当前打开的工作区目录内，不要修改工作区外的关联文件

4. 重置扩展配置
   打开扩展管理页找到Live Server，点击扩展卡片右下角的齿轮图标，选择「重置设置」，重启VS Code后重新配置即可

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