如何阻止Prettier格式化时将标签内单行内容拆分为多行？

要让Prettier保持button标签与内部文本在同一行，你可以在现有配置中添加以下属性：

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "arrowParens": "avoid",
  "printWidth": 130,
  "bracketSameLine": true,
  "htmlWhitespaceSensitivity": "ignore"
}

配置说明 #

htmlWhitespaceSensitivity设为ignore后，Prettier会忽略HTML的空格语义限制，不会为了保留空格规则而强制换行。你的代码长度远低于设置的printWidth（130），添加该配置后即可实现button元素的单行格式需求。

如果仅需针对个别元素生效，也可以在目标元素前添加注释跳过格式化：

<!-- prettier-ignore -->
<button type="button" onClick={() => setsearchStr('Random')}>Text</button>

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