如何在 VSCode 中使用 Prettier 修复 JSX/React 格式问题答案

【问题标题】：How to fix JSX/React formatting issue with Prettier in VSCode如何在 VSCode 中使用 Prettier 修复 JSX/React 格式问题
【发布时间】：2021-01-08 16:05:37
【问题描述】：

这就是我希望我的代码的格式

render() {
  return (
    <div>
      {this.state}
    </div>
  )
}

但是当我 alt+shift+F 以更漂亮的格式格式化时，我得到了这个（这令人难以置信的沮丧！！）

render() {
  return <div>{this.state}</div>;
}

在这种特殊情况下并不算太糟糕，但我宁愿现在解决它，以免遇到任何太复杂的事情。

有谁知道我可以更改哪些设置来解决这个问题？我已经四处寻找了一段时间，找不到任何有用的东西。

【问题讨论】：

现在的格式有什么问题？因为它是一行，所以它会将其格式化为一行，随着文件的进行，只需确保您的返回括号包含您的 jsx....
我宁愿用括号和多行设置它...如果我开始放入多层html，我宁愿它不在一行上。我也刚从 beautify 切换到更漂亮，因为这让事情变得非常不稳定，所以我不确定这会如何影响实际的 HTML 文件，但为了我自己的可读性，我更喜欢像这样分解我的标签。
如果你去另一行就不是一行
如果您的退货超过一行，它会将它们分成多行......

标签： reactjs visual-studio-code jsx prettier

【解决方案1】：

Prettier 是一个固执己见的格式化程序，因此在 these configuration settings 之外没有太多灵活性。

不过我不担心，其格式设置为这样的原因是，如果您尝试添加另一个 div 或您会注意到的其他内容，它可以将所有内容放在一行中而不会超出 100 的列范围它不会这样做，因此更复杂的场景不会有问题。

【讨论】：