VS Code设置报错：添加Live Server配置后无法用Prettier格式化

1. 检查settings.json的语法正确性 #

添加"liveServer.settings.CustomBrowser": "chrome"时，很可能不小心破坏了JSON文件的语法规则（比如漏加逗号、引号不闭合），这会导致VS Code的配置解析异常，进而影响Prettier工作：

• 打开VS Code设置（快捷键Ctrl+,/Cmd+,），点击右上角的{}图标进入settings.json编辑界面
• 仔细核对文件格式，确保所有键值对用逗号分隔，字符串引号完全闭合，示例正确格式：

  {
    "liveServer.settings.CustomBrowser": "chrome",
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  

• 如果有语法错误，VS Code左侧会显示红色波浪线，修复后保存文件。

2. 重置Prettier核心配置 #

配置冲突可能导致Prettier无法正常触发格式化：

• 打开设置，搜索Prettier，找到Editor: Default Formatter选项，确认选中的是Prettier - Code formatter
• 搜索Format On Save并勾选，测试保存文档时是否自动格式化
• 若仍有问题，重置Prettier扩展设置：
  1. 打开扩展面板（Ctrl+Shift+X/Cmd+Shift+X），找到Prettier扩展
  2. 点击扩展右侧齿轮图标，选择Extension Settings
  3. 点击页面顶部的Reset Settings按钮，恢复默认配置

3. 排查扩展冲突 #

其他格式化类扩展（比如ESLint、Beautify）可能和Prettier、Live Server产生冲突：

• 暂时禁用除Prettier和Live Server外的所有格式化相关扩展
• 重启VS Code，尝试格式化文档，观察是否仍报错
• 若恢复正常，逐个启用其他扩展，定位出冲突的扩展并调整其配置或保持禁用

4. 重装相关扩展 #

如果以上方法都无效，尝试通过重装扩展解决潜在的文件损坏问题：

• 卸载Prettier和Live Server扩展
• 完全关闭VS Code，重新打开后重新安装这两个扩展
• 重新配置Live Server的自定义浏览器设置，注意严格遵循JSON语法

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