title: Why does jsx code formatting not correctly
body: <p><code>vscode</code> is my favorite editor, I have a code formatting problem with it. Here is my <code>jsx</code> code: </p>
  
  <pre class="lang-js prettyprint-override"><code>return &lt;div className={panelHeadingClassName}&gt;
      &lt;h3 className={style.panelTitle}&gt;
          &lt;i className={iconStyle[iconClass]}&gt;&lt;/i&gt;
          {title}
          &lt;small className={style.panelSubTitle}&gt;{subTitle}&lt;/small&gt;
      &lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>when I use <kbd>option</kbd> + <kbd>shift</kbd> + <kbd>F</kbd> to format it, it gives me this: </p>
  
  <pre><code>return &lt;div className = {
    panelHeadingClassName
  } &gt;
  &lt;
  h3 className = {
    style.panelTitle
  } &gt;
  &lt;
  i className = {
    iconStyle[iconClass]
  } &gt; &lt; /i&gt; {
    title
  } &lt;
  small className = {
    style.panelSubTitle
  } &gt; {
    subTitle
  } &lt; /small&gt; &lt;
  /h3&gt; &lt;
  /div&gt;
  </code></pre>
  
  <p>Obviously, it's not correct.</p>
  
  <p><code>vscode</code> version - <code>v1.10.2</code>, and not install any code formatting extension. </p>
  
  <p>So, <strong>I don't want to install any code formatting extension, is there any config for <code>vscode</code> to doing this correctly?</strong></p>
  
  <p>-- update --</p>
  
  <p>Sorry about that. I check my extensions installed, found <code>Beautify</code> extension. But why the i use vscode code formatting, it use <code>Beautify</code>?</p>