VSCode更新后保存文件时Prettier失效问题求助

算力阿峰

2026-8-17

问题描述

VSCode更新后，保存文件时会出现红框，且Prettier无法完成缩进操作。以下是当前的VSCode JSON配置：

{
  "code-runner.runInTerminal": true,
  "code-runner.saveAllFilesBeforeRun": true,
  "code-runner.saveFileBeforeRun": true,
  "workbench.iconTheme": "vscode-icons",
  "C_Cpp.errorSquiggles": "Enabled",
  "editor.minimap.enabled": false,
  "explorer.confirmDelete": false,
  "workbench.startupEditor": "none",
  "editor.formatOnSave": true,
  "editor.fontSize": 20,
  "editor.linkedEditing": true,
  "editor.wordWrap": "on",
  "explorer.confirmDragAndDrop": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.formatOnPaste": true,
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "underline": "yellow"
      },
      "right": {
        "surround": "#155FFA"
      },
      "name": {
        "highlight": "rgba(180, 20, 80, 0.3)"
      }
    },
    "closing": {
      "full": {
        "custom": {
          "dark": {
            "borderWidth": "0 0 3px 0",
            "borderColor": "yellow",
            "borderStyle": "solid",
            "borderRadius": "4px",
            "right": "10px"
          },
          "light": {
            "borderWidth": "0 0 3px 0",
            "borderColor": "yellow",
            "borderStyle": "solid",
            "borderRadius": "5px",
            "right": "10px"
          }
        }
      }
    }
  },
  "prettier.jsxSingleQuote": true,
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "files.autoSave": "afterDelay",
  "liveServer.settings.donotVerifyTags": true,
  "workbench.colorTheme": "GitHub Dark",
  "window.zoomLevel": 1,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

排查与解决方法

升级/重装Prettier插件：VSCode更新后，旧版Prettier可能存在兼容性问题。打开扩展面板找到Prettier - Code formatter，点击更新至最新版本；若无效，先卸载插件，重启VSCode后重新安装。
排查插件冲突：保存时的红框大概率是其他插件与Prettier冲突导致。可临时禁用highlight-matching-tag、Code Runner等插件，逐个测试找出冲突插件，再调整插件设置或卸载冲突插件。
确认默认格式化器优先级：打开有问题的文件，点击右下角的格式化器名称，选择Configure Default Formatter，确保选中esbenp.prettier-vscode，避免其他格式化器抢占优先级。
检查项目本地配置：查看项目根目录是否存在.prettierrc、.prettierignore等文件，这些本地配置会覆盖VSCode全局设置，可能导致缩进失效。可临时重命名这些文件测试，或调整配置内容。
修复文件语法错误：Prettier无法在有语法错误的文件上正常格式化，红框也可能是语法报错提示。打开问题面板（Ctrl+Shift+M），检查并修复文件中的语法问题后再尝试格式化。
重置VSCode设置：若以上方法均无效，可先备份当前配置，通过Ctrl+Shift+P打开命令面板，输入Preferences: Reset Settings重置到默认设置，再重新配置Prettier。

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