Search code examples
reactjsprettier

The auto prettier in Reactjs breaks the line

This is the original code without auto-saving 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>
   </div>

After auto-saving with prettier in vscode, it works weird.
Could you recommend the solution?

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

Solution

  • Add this line to your .editorconfig 

     `jsxBracketSameLine: true`

    More info and examples about this PrettierConfig for jsxBracket

    if you don't have .editorconfig then open VSCode's settings.json set 

     prettier.jsxBracketSameLine: true

    more info about prettier VSCode settings for jsxBracket