title: JSX auto-wrapping always
body: <p>This is doing my head in! Spent 2 hours trying to figure out what is causing the below behaviour and keep coming up blank.</p>
  
  <p>I'm migrating to VSCode and my React JSX components auto wrap into multiple lines. This is fine (and good) when a component has multiple attributes, but makes some files extremely long and very unreadable.</p>
  
  <p>Case in point - the file where react router routes are defined. They are all small, and ideally, having one per line makes your app's routes very readable, rather than having each route defined every 7 or so lines.</p>
  
  <p>Example of what VS Code auto formats the file to:</p>
  
  <pre><code>&lt;Authenticated
      path="/new"
      component={NewCorrespondence}
      {...this.props}
  /&gt;
  &lt;Authenticated
      path="/inbox"
      component={Inbox}
      {...this.props}
  /&gt;
  &lt;Authenticated
      path="/sent"
      component={Sent}
      {...this.props}
  /&gt;
  </code></pre>
  
  <p>What it should look like</p>
  
  <pre><code>&lt;Authenticated path="/new" component={NewCorrespondence} {...this.props} /&gt;
  &lt;Authenticated path="/inbox" component={Inbox} {...this.props} /&gt;
  &lt;Authenticated path="/sent" component={Sent} {...this.props} /&gt;
  </code></pre>
  
  <p><strong>What is the setting within VSCode that handles this? Is there a way to configure it to wrap these lines only if longer than x characters?</strong></p>