Prettier保存时格式化功能导致.jsx文件格式错乱

云原生阿岚

2026-5-27

我来帮你搞定Prettier在JSX文件上的格式错乱问题！这种.js正常但.jsx保存就乱掉的情况，大多是文件关联、配置范围或者工具冲突导致的，完全不用关闭format on save，按下面的步骤排查修复：

1. 先确保编辑器正确识别JSX文件

以VS Code为例，很多时候问题出在.jsx文件没被归类为「JavaScript React」类型，导致Prettier用错了格式化规则：

添加或修改配置项：

"files.associations": {
  "*.jsx": "javascriptreact"
}

2. 让Prettier明确包含JSX文件

检查项目根目录的Prettier配置文件（比如.prettierrc、.prettierrc.json），确保它把.jsx纳入了格式化范围：

{
  // 你的其他Prettier规则
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  // 明确指定要格式化的文件
  "include": ["**/*.js", "**/*.jsx"]
}

另外如果有.prettierignore文件，一定要确认里面没有排除.jsx后缀的文件。

3. 解决和其他格式化工具的冲突

如果你的项目同时用了ESLint，很可能是ESLint的规则和Prettier冲突了，导致JSX格式被打乱：

先安装eslint-config-prettier来禁用ESLint中与Prettier冲突的规则：
```
npm install eslint-config-prettier --save-dev
```

然后在.eslintrc（或.eslintrc.json）里添加prettier扩展：

{
  "extends": [
    // 你原本的其他扩展，比如"eslint:recommended"
    "prettier"
  ]
}

最后在VS Code设置里把默认格式化工具指定为Prettier：
```
"editor.defaultFormatter": "esbenp.prettier-vscode"
```

4. 给JSX文件单独配置Format On Save

有时候全局设置会被局部规则覆盖，建议在工作区设置里单独给JSX文件锁定格式化规则：
打开项目的.vscode/settings.json，添加：

"editor.formatOnSave": true,
"[javascriptreact]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

5. 重启编辑器测试

完成上面的配置后，重启VS Code，然后修改一个.jsx文件保存试试，应该就能正常格式化了。如果还是有问题，可以暂时删除项目里的.vscode文件夹（备份好重要配置），重新配置一次，避免旧配置残留的冲突。

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