reactjs - Reactjs 中的 auto prettier 打破了界限

Question

这是没有自动保存更漂亮的原始代码。

const Register = () => (
    <div className="container-fluid">
      <nav className="row bg-white border-bottom">
        <div className="col text-secondary logotype">
          logo
        </div>
        <div className="col-6 text-secondary text-center menu">
          register
        </div>
        <div className="col text-right clock">
        </div>
      </nav>
   </div>

在 vscode 中使用 prettier 自动保存后，效果很奇怪。
您能推荐一下解决方案吗？

const Register = () => ( <
  div className = "container-fluid" >
  <
  nav className = "row bg-white border-bottom" >
  <
  div className = "col text-secondary logotype" >
  logo <
  /div> <
  div className = "col-6 text-secondary text-center menu" >
  register <
  /div> <
  div className = "col text-right clock" >
  <
  /div> <
  /nav> <

I solved this problem by eliminating Buefy

Answer 1

将此行添加到您的 .editorconfig

 `jsxBracketSameLine: true`

有关此的更多信息和示例 PrettierConfig对于jsxBracket

如果你没有.editorconfig，那么打开VSCode的settings.json设置

 prettier.jsxBracketSameLine: true

有关更漂亮的更多信息 VSCode settings对于jsxBracket