title: prettier in vscode is wrapping content within an html tag, which causes it to ignore spaces
body: <p>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>
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;
    This type of cancer is also called
    &lt;Definition
      term=&quot;upper tract urothelial cancer&quot;
      id=&quot;upper_tract_urothelial_cancer&quot;
    /&gt;
    (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.
  &lt;/p&gt;
  ;
  </code></pre>
  <p>and turns it into this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;
    This type of cancer is also called{&quot; &quot;}
    &lt;Definition
      term=&quot;upper tract urothelial cancer&quot;
      id=&quot;upper_tract_urothelial_cancer&quot;
    /&gt;{&quot; &quot;} (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.
  &lt;/p&gt;
  </code></pre>
  <p>The problem with this is that the spaces around the definition component should be taken as literal spaces (i.e. <code>&amp;nbsp;</code>) or <code>{' '}</code>). But the prettier formatting strips that spacing, so my <code>&lt;Definition/&gt;</code> 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. <code>This type of cancer is also called upper tract urothelial cancer(UTUC)</code>).</p>
  <p>How do I keep the formatter from messing with these lines?</p>