应将文件语言模式设为JavaScript React，并安装Prettier扩展、配置默认格式化器为esbenp.prettier-vscode，同时禁用ESLint自动修复重命名行为。
React JSX 中 ctrl+/ 注释失效或注释错位怎么办
VSCode 默认对 .js 文件使用 JavaScript 语言模式，而 JSX 不是标准 JS，直接用 ctrl+/ 会按纯 JS 规则注释（比如在 {} 内部加 //），导致语法错误或渲染异常。
根本原因是 VSCode 没识别出当前文件是 React JSX 上下文，没启用对应的注释规则。
- 确认右下角状态栏语言模式显示为
JavaScript React，不是JavaScript或Plain Text - 若显示不对，点击它 → 选择
Configure File Association for '.js'→ 设为javascriptreact - 对
.jsx文件同理，但默认通常已关联正确；.tsx则需确保装了ESLint+TypeScript React支持 - 如果用了 Vite / Next.js 等框架，建议在项目根目录加
.vscode/settings.json显式锁定："files.associations": { "*.js": "javascriptreact" }
格式化 JSX 时缩进错乱、属性换行不一致
这是 Prettier 和 VSCode 默认格式化器冲突的典型表现。JSX 的属性换行、括号位置、自闭合标签风格，Prettier 有强约定，但 VSCode 若没设对默认格式化器，就会用内置 JS 格式器“硬拗”，结果惨不忍睹。
- 必须安装
Prettier扩展（官方出品，ID：esbenp.prettier-vscode） - 在工作区设置中（
.vscode/settings.json）强制指定："editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true
- 禁用其他格式化扩展干扰，尤其是
JavaScript (ES6) code snippets类插件的自动格式行为 - 关键配置项：
prettier.jsxSingleQuote、prettier.bracketSameLine直接影响 JSX 可读性，建议显式设为true
为什么 Shift+Alt+F 格式化后组件名变小写、props 被重命名
这不是格式化问题，是 ESLint + TypeScript 类型检查在“顺手修代码”。比如你写了 myComponent，但类型定义里是 MyComponent，ESLint 的 @typescript-eslint/no-unused-vars 或 react/display-name 规则可能触发自动修复，把变量名改成首字母大写——这属于语义修正，不是格式化器干的。
- 检查是否启用了
editor.codeActionsOnSave中的source.fixAll（尤其source.fixAll.eslint） - 若不希望自动改名，在设置中关闭：
"editor.codeActionsOnSave": { "source.fixAll.eslint": false } - 更稳妥的做法：保留
fixAll，但在 ESLint 配置里关掉易误伤的规则，例如react/prop-types（现代 React 已不强制）、react/display-name（函数组件可省略）
多光标编辑 JSX 时注释快捷键失效或只注释第一行
VSCode 多光标下 ctrl+/ 默认只作用于第一个光标位置，JSX 中常需批量注释多行 props 或多个 <div> 块，这时原生快捷键不可靠。<ul>
<li>手动选中多行（<code>Ctrl+Shift+ArrowDown 或鼠标拖选），再按 ctrl+/ —— 这样能保证每行都加 {/* */} 或 //
<div>{/* cursor here */}）直接多光标，容易触发嵌套注释解析失败<li>推荐安装 <code>Toggle Comment 扩展（ID：geddski.toggle-comment），它支持真正多光标块注释，对 {/* */} 和 // 自动识别上下文JSX 的注释和格式化不是纯编辑器功能，而是语言模式、格式化器、Linter 三层协同的结果。漏掉任意一层（比如只配了 Prettier 却没切对语言模式），就容易出现“看着配好了，但就是不 work”的情况。最常被跳过的其实是右下角那个小小的状态栏语言标识——它才是整个链条的起点。
