本文详解如何在 vs code 中正确配置 prettier，解决 react（.jsx/.tsx）文件保存后 jsx 被错误转义、缩进丢失、标签被破坏等格式化异常问题，确保代码可读性与团队协作一致性。
本文详解如何在 vs code 中正确配置 prettier，解决 react（.jsx/.tsx）文件保存后 jsx 被错误转义、缩进丢失、标签被破坏等格式化异常问题，确保代码可读性与团队协作一致性。
在 React 开发中，VS Code 默认的 JavaScript 格式化器（如内置的 TypeScript 语言特性）不支持 JSX 语法的语义化格式化，导致保存时将
等 JSX 元素错误解析为纯字符串或 HTML 片段，进而产生 <div className="App"> 类似转义内容，或直接压平缩进、破坏换行与嵌套结构——正如你所见的“ distorted difficult to read”现象。这并非 Prettier 失效，而是它未被正确注册为 .jsx/.tsx 文件类型的默认格式化器。
✅ 正确配置步骤（推荐方式：通过 settings.json）
- 打开 VS Code 设置：Ctrl + ,（Windows/Linux）或 Cmd + ,（macOS）
- 切换到「Settings」→ 「Text Editor」→ 「Formatting」，点击右上角「Open Settings (JSON)」图标（{}）
- 粘贴以下经过验证的配置片段（已适配 React 项目常见场景）：
{
"editor.defaultFormatter": null,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"prettier.jsxSingleQuote": true,
"prettier.semi": false,
"prettier.tabWidth": 2,
"prettier.useTabs": false,
"prettier.bracketSameLine": true,
"prettier.arrowParens": "avoid"
}
? 关键说明：
- 必须为 [javascriptreact]（对应 .jsx）和 [typescriptreact]（对应 .tsx）单独声明 editor.defaultFormatter，否则 Prettier 不会处理 React 文件；
- editor.formatOnSave: true 启用保存即格式化；
- editor.defaultFormatter: null 全局置空，避免与其他格式化器冲突；
- 推荐搭配 "prettier.bracketSameLine": true（Prettier v2.8+），使 JSX 关闭标签与开始标签同行，提升 JSX 可读性。
⚠️ 常见陷阱与排查建议
- 插件未安装或禁用：确认已安装 Prettier – Code formatter 并启用（检查左侧扩展面板状态）；
- 工作区设置覆盖用户设置：检查项目根目录是否存在 .vscode/settings.json，若存在，请同步添加上述 [javascriptreact] 配置；
- 格式化快捷键冲突：避免使用 Shift + Alt + F（可能触发其他格式化器），优先依赖 Ctrl + S 自动格式化；
- ESLint 与 Prettier 冲突：如同时使用 ESLint，建议安装 eslint-config-prettier 并禁用所有与 Prettier 重叠的规则，防止格式化反复拉锯。
✅ 验证效果
配置完成后，新建或重新打开一个 App.jsx 文件，输入如下 JSX：
function App() {
return (<div>
<h1>Hello</h1>
<p>World</p>
</div>);
}
按下 Ctrl + S —— 正确输出应为：
function App() {
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);
}
缩进规范、换行合理、JSX 结构清晰可见，彻底告别转义与扁平化乱码。
? 进阶提示：在项目根目录添加 .prettierrc 文件可实现跨编辑器统一风格，例如：
{ "semi": false, "singleQuote": true, "bracketSameLine": true }
遵循以上配置，即可一劳永逸解决 React 项目在 VS Code 中的格式化失能问题，让开发体验回归清爽、专业与高效。
