如何解决Prettier在VS Code保存时随机换行缩进异常问题

问题成因 #

• 多端配置冲突：VS Code编辑器缩进规则、项目.editorconfig规则、Prettier自身规则三者不统一，尤其是空格/Tab缩进混用、tabWidth/printWidth参数数值不一致时，Prettier会按自身逻辑重算缩进，覆盖手动调整的结果。
• AST解析误判：出现异常缩进的代码段附近如果存在未闭合的语法节点（括号、JSX标签、模板字符串边界）、截断语法块的块注释、不规范的嵌入式语言混写（比如JSX内嵌套未转义的模板字符串、Vue SFC块边界标识错误、TS类型标注换行不规范），Prettier生成抽象语法树时会错误识别代码层级，反复将对应行判定为顶层作用域，直接移除缩进。

最高频的触发场景：React组件return JSX内容时，没有用()包裹整块JSX，Prettier会错误判定JSX节点层级，把后续所有行的缩进全部移除。

• 版本兼容问题：VS Code中安装的Prettier插件版本，和项目本地node_modules内的Prettier内核版本跨度太大（比如插件升级到v9.x，项目本地仍使用v2.x版本），两边解析逻辑不匹配会触发无规律的格式化异常。
• 多插件格式化冲突：保存文件时如果同时触发ESLint自动修复、JS Beautify等其他格式化工具的规则，多个工具先后修改文件内容，最终表现为Prettier反复移除缩进。
• 模板规则触发：编写HTML/JSX/Vue模板类代码时，如果htmlWhitespaceSensitivity设置为strict，Prettier为了避免空白字符影响页面渲染结果，会强制调整折行位置和缩进，容易出现非预期的缩进移除。

修复配置步骤 #

1. 统一全链路缩进规则
   在项目根目录新建/修改.prettierrc配置文件，明确指定缩进相关规则，避免默认值漂移：

   {
     "useTabs": false,
     "tabWidth": 2,
     "printWidth": 100,
     "htmlWhitespaceSensitivity": "css"
   }
   

   配置说明：

   • useTabs按团队规范选择是否用Tab缩进，全链路保持统一即可
   • tabWidth和团队规范对齐，可选值为2或4
   • printWidth不要设置过小（不建议低于80），否则频繁折行容易触发缩进判定bug
   • htmlWhitespaceSensitivity不要使用strict模式，用css模式平衡渲染准确性和排版可读性

   同步修改VS Code的用户/工作区设置（打开命令面板搜索「打开设置(JSON)」添加以下配置）：

   {
     "editor.tabSize": 2,
     "editor.insertSpaces": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": false,
       "source.fixAll.beautify": false
     }
   }
   

   配置说明：

   • editor.tabSize和Prettier的tabWidth保持一致
   • editor.insertSpaces和Prettier的useTabs取值相反（useTabs为false时这里设为true，反之设为false）
   • 临时关闭其他格式化工具的保存自动修复能力，排除多插件冲突
     如果项目根目录存在.editorconfig文件，确保文件内的indent_style、indent_size参数和上述配置完全一致。

2. 锁定Prettier版本消除兼容问题
   在项目内执行命令固定Prettier版本，避免版本漂移：

   npm install prettier@3.2.5 --save-dev --save-exact
   

   同步在VS Code设置中添加配置，强制Prettier插件使用项目本地安装的内核，禁用全局模块解析：

   {
     "prettier.resolveGlobalModules": false,
     "prettier.useEditorConfig": true
   }
   

3. 定位并修正语法歧义点
   找到被反复移除缩进的代码行，向上逐行排查语法问题：

   • 检查是否存在漏写的闭合括号、闭合标签
   • 检查是否有块注释（/* */）刚好截断了连续的语法节点
   • 检查模板字符串、正则表达式的转义符是否正确，是否存在提前闭合的情况
     可以通过编辑器自带的语法高亮判断：如果异常位置的代码高亮和预期层级不符，就说明存在语法歧义，修正对应语法后Prettier会自动恢复正确缩进。

4. 特殊场景兜底
   如果某段代码因为特殊业务写法确实不需要Prettier调整格式，可以在对应代码段前添加忽略注释，跳过Prettier格式化：

   // prettier-ignore
   const customFormattedData = { a: 1,   b:    2 }
   

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