CODEWITHSUNDEEP
reactjsvisual-studioformattingjsx
Kyle Pennell
Kyle Pennell

Reputation: 6097

How to prevent visual studio code from putting line breaks in my JSX?

I'm trying to set up my visual studio code to clean up or beautify my JSX/JS when coding in React.

I have several prettier formatting plugins installed. When I do 'Format Document', it makes my code look horrible. enter image description here

Something nice like this:

  <Map
    style={{
      height: "100%",
      width: "100%",
      margin: "0 auto"
    }}
    center={position}
    zoom={10}>

turns into junk like this...

return ( <
            Map style = {
                {
                    height: "100%",
                    width: "100%",
                    margin: "0 auto"
                }
            }
            center = {
                position
            }
            zoom = {
                10
            } >
            <

I've searched through many settings files...what is controlling this? I turned on Prettier: Jsx Bracket Same Line 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 https://prettier.io/playground, it looks fine coming out.

What setting is putting my code onto separate lines?

Upvotes: 1

Views: 3719

Answers (1)

Vuyisanani
Vuyisanani

Reputation: 151

This can be solved by changing the Select Language Mode from JavaScript to Javascript React in your Visual Studio code editor

Upvotes: 2

Related Questions