VS Code beautify break tags in react html

Question

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)?

Answer 1

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.

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"
   }

Answer 2

I encountered the same issue. Below is my finding: JS-CSS-HTML Formatter extension wraps prettier but it cannot support js files mixed with HTML. The solution is to disable this extension and enable prettier formatOnSave option for javascript in settings.json as below:

"[javascript]": {
    "editor.formatOnSave": true
}