Shift+Alt+F（Windows/Linux）或Shift+Option+F（macOS）无响应，根本原因是VS Code未识别文件语言模式（如.jsx/.tsx需设为JavaScript React/TypeScript React）、未安装或未正确配置格式化器（如esbenp.prettier-vscode）、缺少配置文件（如.prettierrc）或存在插件冲突。

Shift+Alt+F（Windows/Linux）或 Shift+Option+F（macOS）是 VSCode 格式化 React 组件的默认快捷键，但仅当文件被识别为 JavaScript React 或 TypeScript React 且已配置有效格式化器时才真正生效。

为什么按了 Shift+Alt+F 没反应？

不是快捷键错了，而是 VSCode 不知道该用谁来格式化你的 .jsx 或 .tsx 文件。

• 右下角状态栏显示的是 Plain Text 或 JavaScript（非 JavaScript React），说明语言模式没识别对
• 没装 Prettier 或 ESLint 插件，或者装了但没在 settings.json 中指定为默认格式化器
• 同时装了多个格式化器（如 Prettier + ESLint + Beautify），VSCode 无法自动决定用哪一个，会静默跳过
• 项目里没有 .prettierrc 或 eslint.config.js，而插件又启用了 prettier.requireConfig: true，导致直接放弃格式化

editor.defaultFormatter 必须填对 ID

填错 ID 就等于没配——VSCode 不报错，只是不干活。

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

• 对于 Prettier，ID 是 esbenp.prettier-vscode（不是 prettier、prettier-vscode 或其他变体）
• React 项目建议按语言单独配置，避免全局 fallback 失效：

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

• 如果用了 ESLint 做格式化（比如配合 eslint-plugin-prettier），ID 是 dbaeumer.vscode-eslint，但需确保 eslint.format.enable 为 true

React 特有格式化陷阱：JSX 和缩进

JSX 的嵌套结构容易让格式化器“犹豫”，尤其当组件含多层条件渲染或 Fragment 时。

• Prettier 默认用 2 空格缩进，但如果你的团队用 4 空格，必须在 .prettierrc 显式写 "tabWidth": 4，只改 VSCode 设置无效
• React.Fragment（即 <></>）在某些旧版 Prettier 中格式化后可能换行异常，升级到 v3.0+ 可解决
• 使用 useMemo 或 useCallback 时，函数体若含 JSX，Prettier 可能意外折行；可加 // prettier-ignore 注释临时跳过
• 别依赖 editor.formatOnType 对 JSX 实时生效——它只处理简单语句，复杂 JSX 结构仍得靠 Shift+Alt+F 或保存触发

最常被忽略的一点：格式化行为最终由插件版本 + 配置文件 + 语言模式三者共同锁定。删掉一个 .prettierrc，换台电脑重装插件，甚至升级 VSCode 主版本，都可能导致同一份代码格式化结果突变。