必须将文件语言模式设为javascriptreact，并配置默认格式化器为esbenp.prettier-vscode，否则VSCode内置JS格式器无法理解JSX语义，导致格式化错乱、注释失效或组件名被误改。
VSCode 默认不识别 JSX 语法，直接格式化会出错或无效 —— 必须显式指定语言模式 + 指定 Prettier 为格式化器，否则 Shift+Alt+F 或 editor.formatOnSave 都只是在“假装工作”。
确认文件语言模式是 javascriptreact
右下角状态栏显示的不是 JavaScript 或 Plain Text，而是 JavaScript React。这是所有配置生效的前提：
- 点击右下角语言标识 → 选
Configure File Association for '.js'→ 设为javascriptreact - 对
.jsx文件通常默认正确，但若异常，同样手动设一次 - 项目级锁定更稳妥：在项目根目录建
.vscode/settings.json，加这一行："files.associations": { "*.js": "javascriptreact" } - 改完不重启 VSCode 也生效，但建议重开编辑器避免缓存干扰
editor.defaultFormatter 必须指向 esbenp.prettier-vscode
VSCode 内置的 JS 格式器完全不理解 JSX 语义（比如 {} 插值、自闭合标签、属性换行逻辑），强行用它格式化会导致：
- JSX 属性被挤在一行，或错误换行（如
className和onClick分开两行但缩进错位） -
<div></div>被改成<div></div>（或反之），破坏语义 - 组件名首字母被自动转小写（其实是 ESLint 在“越界修复”，见下一条）
- 必须在
settings.json中明确设置："editor.defaultFormatter": "esbenp.prettier-vscode",<br>"[javascriptreact]": {<br> "editor.defaultFormatter": "esbenp.prettier-vscode"<br>}
关闭 source.fixAll.eslint 防止误改代码语义
格式化后发现 MyComponent 变成 myComponent，或 onSubmit 被改成 onsubmit —— 这不是 Prettier 干的，是 ESLint 的 source.fixAll.eslint 在保存时自动执行了类型/规则修正。
- 检查设置中是否启用了：
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 若不想让 ESLint “顺手改名”，直接关掉：
"editor.codeActionsOnSave": { "source.fixAll.eslint": false } - 更精细的做法：保留自动修复，但在项目
.eslintrc.js中禁用易冲突规则，例如：react/display-name、react/prop-types
prettier.bracketSameLine 和 prettier.jsxSingleQuote 是 JSX 可读性关键
默认 Prettier 对 JSX 的括号位置和引号风格可能不符合团队习惯，尤其在嵌套较深的组件里：
-
prettier.bracketSameLine: true让>跟在最后一行属性后，而不是独占一行，减少垂直滚动 -
prettier.jsxSingleQuote: true统一用单引号，避免 JSX 属性里双引号嵌套 HTML 字符串时的转义麻烦 - 这些要写进
settings.json或项目级.prettierrc，仅靠插件默认值不够稳定 - 注意：如果同时用了 Vetur（Vue 项目混 React），它的
vetur.format.defaultFormatter.js会覆盖 Prettier，需禁用或设为prettier
最常被忽略的一点：VSCode 的格式化行为是分层叠加的 —— 文件关联决定语言模式，语言模式触发对应配置块，配置块再调用指定格式化器。任一环节断链，Shift+Alt+F 就只是在格式化“假 JSX”。
