你如何自动包装react-jsx源代码？

Question

我想在给定的右边缘处自我封装我的JSX代码，但JSX编译过程会占用空白。

解决此问题的一种方法是插入如下所示的空格文字。

<Modal.Body>
  <h4>You logged in as <b>{this.state.authState.email}</b>{" "}
    at {this.state.authState.issueDate.toLocaleString()}</h4>
  <h4>Your log in session expired at{" "}
    {this.state.authState.expiryDate.toLocaleString()}</h4>
</Modal.Body>

在编辑文本时阅读和重新包装线条有点难看，这将是一件痛苦的事。还有其他方法可以在JSX源代码中进行自动换行吗？