title: The auto prettier in Reactjs breaks the line
body: <p>This is the original code without auto-saving prettier.</p>
  
  <pre><code>const Register = () =&gt; (
      &lt;div className="container-fluid"&gt;
        &lt;nav className="row bg-white border-bottom"&gt;
          &lt;div className="col text-secondary logotype"&gt;
            logo
          &lt;/div&gt;
          &lt;div className="col-6 text-secondary text-center menu"&gt;
            register
          &lt;/div&gt;
          &lt;div className="col text-right clock"&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>After auto-saving with prettier in vscode, it works weird.<br>
  Could you recommend the solution?</p>
  
  <pre><code>const Register = () =&gt; ( &lt;
    div className = "container-fluid" &gt;
    &lt;
    nav className = "row bg-white border-bottom" &gt;
    &lt;
    div className = "col text-secondary logotype" &gt;
    logo &lt;
    /div&gt; &lt;
    div className = "col-6 text-secondary text-center menu" &gt;
    register &lt;
    /div&gt; &lt;
    div className = "col text-right clock" &gt;
    &lt;
    /div&gt; &lt;
    /nav&gt; &lt;
  </code></pre>
  
  <blockquote>
    <p>I solved this problem by eliminating Buefy</p>
  </blockquote>