Prettier哪个规则会在TSX标签之间插入{' '}？

原始TSX代码：

<div className='mb-2'>
  Start an <strong className='text-textblack'>Open Session</strong> by tapping "Begin Session", or choose a specific <strong className='text-textblack'>Session Topic</strong> below.
</div>

格式化后生成的代码：

<div className="mb-2">
  Start an <strong className="text-textblack">Open Session</strong>{' '}
  by tapping "Begin Session", or choose a specific{' '}
  <strong className="text-textblack">Session Topic</strong> below.
</div>

这是格式化工具（比如Prettier）的默认规则 #

核心目的是保证渲染后的文本空格符合预期：

• 在JSX里，当你把<strong>这类标签和相邻文本拆分成不同行时，浏览器渲染时会把换行、缩进合并成单个空格，但格式化工具会主动插入{' '}来明确这个空格的存在，避免出现文本粘连（比如Start anOpen Session）的问题。
• 同时你看到单引号转双引号，也是格式化工具的默认引号风格统一规则。

调整方式 #

如果不想让工具自动插入{' '}：

• 可以把标签和相邻文本保持在同一行，但这会让长代码可读性下降；
• 要是用Prettier，也可以在配置文件里加规则：比如jsxSingleQuote: true保留单引号，或者通过printWidth调大换行阈值，减少自动换行触发的空格插入。

内容的提问来源于stack exchange，提问作者Kevin H.