prettier in vscode is wrapping content within an html tag, which causes it to ignore spaces

Question

I am using vscode. My current extension is prettier, and my files are JavascriptReact (JSX). When I manually choose to format the code or activate format on saving, it takes content like this:

<p>
  This type of cancer is also called
  <Definition
    term="upper tract urothelial cancer"
    id="upper_tract_urothelial_cancer"
  />
  (UTUC). Get to know more about the urinary tract, your cancer, and the
  different types of treatment options available. And be sure to talk to your
  doctor about what's right for you.
</p>
;

and turns it into this:

<p>
  This type of cancer is also called{" "}
  <Definition
    term="upper tract urothelial cancer"
    id="upper_tract_urothelial_cancer"
  />{" "} (UTUC). Get to know more about the urinary tract, your cancer, and the
  different types of treatment options available. And be sure to talk to your
  doctor about what's right for you.
</p>

The problem with this is that the spaces around the definition component should be taken as literal spaces (i.e.  ) or {' '}). But the prettier formatting strips that spacing, so my <Definition/> component, which wraps its children in a special span tag with some tooltip functionality, no longer has spacing around it, so the words all look run together (e.g. This type of cancer is also called upper tract urothelial cancer(UTUC)).

How do I keep the formatter from messing with these lines?

Have you tried using [`prettier-ignore`](https://prettier.io/docs/en/ignore.html)? — Arman Charan, Jul 30 '20 at 04:32

score 0 · Answer 1 · answered Jul 30 '20 at 07:25

Prettier is opionate, if you can't find any solution with tweaking prettier config file, so just ignore lines that you don't want to be formatted

const x = (
  <>
    {/* prettier-ignore */}
    <p>
      This type of cancer is also called <Definition term="upper tract urothelial cancer" id="upper_tract_urothelial_cancer" /> (UTUC). Get to know more about the urinary tract, your cancer, and the different types of treatment options available. And be sure to talk to your doctor about what's right for you.
    </p>
  </>
)

prettier in vscode is wrapping content within an html tag, which causes it to ignore spaces

1 Answers1