Search code examples
javascriptreactjsvisual-studio-codejsxprettier

How to disable prettier adding {" "} in jsx?

I have got a problem with prettier's formatting, which when I'm saving the code, it will add annoying {" "} to some parts of the jsx code e.g.:

enter image description here

I've searched about how to fix this issue, but couldn't find any solution, can anybody help on this?

Here is the reprex: prettier playground and here is the related issue on github

Solution

  • Since there is an issue about this on prettier's GitHub , and it has been closed without any practical solution, So this question does not have any practical answer. The only answer which has been mentioned in that github issue is just use //prettier-ignore that will disable it:

    Default version:

    /*source*/
<p>hello <a href="#" target="_blank">LINK</a> world</p>


/*output*/
<p>
  hello{" "}
  <a href="#" target="_blank">
    LINK
  </a>{" "}
  world
</p>;

    Using //prettier-ignore to disable it:

    /*source*/

//prettier-ignore
<p>hello <a href="#" target="_blank">LINK</a> world</p>


/*output:*/

//prettier-ignore
<p>hello <a href="#" target="_blank">LINK</a> world</p>

    Here is the playground