Prettier removed curly brackets "{ }" in .jsx file

Question

I have the following code block in my .jsx file:

<div className="">
        <h1 className="">
          The Next <br className="sm:block hidden" /> {" "}
          <span className="text-gradient">Generation </span> {" "}
          Payment
        </h1>
      </div>

But prettier will remove the second {" "}, like this:

<div className="">
        <h1 className="">
          The Next <br className="sm:block hidden" /> {" "}
          <span className="text-gradient">Generation </span>
          Payment
        </h1>
      </div>

It will also remove {" "} in other parts of the code. If anyone can help me solve this problem I would be very grateful.

The only solution I found was to use prettier.bracketSpacing in the configuration of prettier, but that didn't help.

Answer 1

Try this:

const space = " ";
return ( ...
<div className="">
   <h1 className="">
       下一代<br className="sm:block hidden" /> {space}
       <span className="text-gradient">支付</span> {space}
       付款
   </h1>
</div>