React Prettier括号间距配置咨询：是否存在JSX花括号换行对应属性

核心结论 #

不存在原生Prettier配置，可以直接自动实现你预期的这种JSX排版效果。

现有配置的实际作用边界 #

• Prettier 对JSX内嵌表达式的默认排版逻辑是：只要整行代码长度在printWidth设定的阈值范围内，就会保持单行排版——也就是你现在看到的、map表达式被花括号包裹后直接跟在JSX标签缩进位的样式，它不会主动把花括号拆成独立占行的格式。
• 所有和JSX排版相关的原生Prettier配置项，都触发不了你要的“花括号单独占行、内部表达式整体缩进”的排版规则：
  • jsxBracketSameLine（旧版）/ bracketSameLine（新版）：作用范围是JSX开闭标签的尖括号位置，控制尖括号是否跟在内容末尾同行，和内部表达式的花括号排版完全没关系
  • printWidth：就算把打印宽度阈值调得极低，让单行代码超长触发自动折行，Prettier的折行逻辑也只会把表达式内容按长度折断，不会把开头的{和结尾的}单独拆成独立行，最终排出来的格式和你预期的样式根本对不上
• 你截图里展示的这套常用Prettier配置，都是对原生默认逻辑的参数调整，没有扩展的自定义排版能力，本身也没藏着能实现这个效果的隐藏开关。

可行的替代实现方案 #

如果一定要匹配目标排版效果，得靠额外的规则补全：

• 安装支持JSX自定义排版的社区Prettier插件，配置强制表达式花括号独立占行的规则
• 搭配ESLint的JSX缩进、花括号排版规则，在Prettier完成基础排版后做二次格式修正

内容的提问来源于stack exchange，提问作者Gabriel Bencomo