reactjsvisual-studio-codejs-beautify

VS Code beautify break tags in react html

I have beautify in VS code, so when I apply it to

<div className="chatApp" style={style}>
    <Navigation />
    <ChatField />
</div>

I get

  <
  div className = "chatApp"
  style = {
    style
  } >
  <
  Navigation / >
  <
  ChatField / >
  <
  /div>

but i want somethig like that

<div className = "chatApp"
 style = {
     style
 }>
     <Navigation />
     <ChatField />
 </div>

Question is how can i change beautify settings to not transfer tags to a new line(div, p, span and etc)?

Solution

  • It happened to me as well. You need to set the language syntax from "plain" javascript to "javascript react".

    Look at the images below, you will need to click at the bottom status bar and change the syntax.

    enter image description here

    enter image description here

    To update all your files in the project go to "user settings" or "workspace settings" depends if you want it to be set for the project or for your user.

    Now look up:

      "files.associations": {},

    and overide it and set something like this:

       "files.associations": {
       "*.js": "javascriptreact"
   }