title: How to prevent visual studio code from putting line breaks in my JSX?
body: <p>I'm trying to set up my visual studio code to clean up or beautify my JSX/JS when coding in React. </p>
  
  <p>I have several prettier formatting plugins installed. When I do 'Format Document', it makes my code look horrible. 
  <a href="https://i.stack.imgur.com/ioXId.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ioXId.png" alt="enter image description here"></a></p>
  
  <p>Something nice like this:</p>
  
  <pre><code>  &lt;Map
      style={{
        height: "100%",
        width: "100%",
        margin: "0 auto"
      }}
      center={position}
      zoom={10}&gt;
  </code></pre>
  
  <p>turns into junk like this...</p>
  
  <pre><code>return ( &lt;
              Map style = {
                  {
                      height: "100%",
                      width: "100%",
                      margin: "0 auto"
                  }
              }
              center = {
                  position
              }
              zoom = {
                  10
              } &gt;
              &lt;
  </code></pre>
  
  <p>I've searched through many settings files...what is controlling this? I turned on <code>Prettier: Jsx Bracket Same Line</code> to be true. I set the character width to be wide. I turned off any line break things. I honestly have no idea why it's making my jsx look horribly unreadable. When I drop this same code into <a href="https://prettier.io/playground" rel="nofollow noreferrer">https://prettier.io/playground</a>, it looks fine coming out. </p>
  
  <p>What setting is putting my code onto separate lines?</p>