Lebih cantik dialihkan pendakap kerinting "{ }" dalam fail .jsx

Question

Saya mempunyai blok kod berikut dalam fail .jsx saya:

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

Tetapi lebih cantik akan mengeluarkan yang kedua {" "} seperti ini:

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

Ia juga akan mengalih keluar {" "} di bahagian lain kod. Jika sesiapa boleh membantu saya menyelesaikan masalah ini, saya amat berterima kasih.

Satu-satunya penyelesaian yang saya temui ialah dalam prettier的配置中使用prettier.bracketSpacing tetapi ia tidak membantu.

Answer 1

Cuba ini:

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