Breaking up HTML tags in JSX upon save

[CosmonautJones]

Hey guys, I've been using prettier for about 6 months now and never had an issue. but I recently updated VSCode and I ran into this problem today with it breaking out my HTML tags in my JSX and spacing it all wildly.
Example follows:
Before save:

return (
    <div className="input-group mb-3">
      <div className="input-group-prepend">
        <span className="input-group-text">
          <i className={icon} />
        </span>
    </div>
    <input
      className={classnames("form-control form-control-lg", {
        "is-invalid": error
      })}
      placeholder={placeholder}
      name={name}
      value={value}
      onChange={onChange}
    />
      {error && <div className="invalid-feedback">{error}</div>}
    </div>
  );
}; 

After save

return ( <
      div className = "input-group mb-3" >
      <
      div className = "input-group-prepend" >
      <
      span className = "input-group-text" >
      <
      i className = {
        icon
      }
      /> <
      /span> <
      /div> <
      input className = {
        classnames("form-control form-control-lg", {
          "is-invalid": error
        })
      }
      placeholder = {
        placeholder
      }
      name = {
        name
      }
      value = {
        value
      }
      onChange = {
        onChange
      }
      /> {
        error && < div className = "invalid-feedback" > {
            error
          } < /div>} <
          /div>
      );
    }; 

I can provide additional info if needed. Such as my settings, etc.

UPDATE 6/4/18: Resolved by disabling Beautify, which was causing issues with Prettier.

[CosmonautJones]

Images just for completeness sake

[sonbuiGFD]

I have the same issue after update VScode today.

[jtbandes]

I'm having a similar problem but sometimes it seems to format the document correctly. If I Format Document repeatedly, it seems to alternate between correctly and incorrectly formatted, as if it's sometimes using prettier + its config from my repo, and sometimes using a different formatter or prettier with the wrong configuration. Adding "javascript.format.enable": false in my settings doesn't help...

[jtbandes]

I narrowed this down to the clang-format extension. Adding this to my settings fixes the problem:

    "clang-format.language.javascript.enable": false

[Greenie10]

I was experiencing the same problem, even though I didn't have the clang-format extension installed. Installed it, and added the false setting suggested by @jtbandes above, and all is now well. Seems a bit mad though.

[jtbandes]

I'm not sure but I just updated to 1.23.1 and I think the issue has gone away.

[nielskrijger]

Having had the same issue yesterday, it does appears to work better with 1.23.1.

One issue remains though;

import objectMapper, { getKeyValue } from 'object-mapper';

is transformed into:

import objectMapper, {
  getKeyValue
} from 'object-mapper';

Where before it would keep the oneliner. Enabling/disabling prettier and reloading the editor fixed it for me (not sure if it lasts yet though [edit]no, it is back again[/edit])

[jlibman]

Updating to 1.23.1 did not work for me.

[jtbandes]

Yeah, I think I spoke too soon — still having issues in some cases, but with clang-format installed and "clang-format.language.javascript.enable": false it hasn't been a problem.

I kinda suspect this is a VSCode issue (not this extension's fault) since it seems like it involves multiple extensions interacting with each other. I would encourage someone to file an issue at https://github.com/Microsoft/vscode/issues if you can come up with exact steps to reproduce the problem, and link back here for context. (I'm not at the right computer to do this at the moment.) I suppose it might also be related to microsoft/vscode#49708

[ctrlplusb]

Oh, thank the heavens, the linked issue at jsbeautify solved it for me. Disabled the Beautify plugin on my vscode and all is well.

[sonbuiGFD]

@jtbandes Thank you so much 👍
FYI:
it conflicts with beautify so we add:

"beautify.ignore": [
        "**/*.js",
        "**/*.jsx"
    ]

and it fixed =))

[DevAbas]

After ignore beautify everything went ok.
"beautify.ignore": [ "**/*.js", "**/*.jsx" ]
This code fix the problem.

[noargs]

mandem works like a charm 👍
"beautify.ignore": [ "/*.js", "/*.jsx" ]

[shyamsha]

thanks man

[kajangid]

thank you man............ @lipis

[lipis]

@kajangid you are welcome, but what have I done to deserve the "thank you"?

[AMINEDGE]

I've suddenly encountered this weird problem, and the thing is that I did nothing with configs and extensions between the last time that it was okay and now, could it be a vscode bug? any suggestions

[Aarbel]

me too

[yukriss]

Thanks you I had the same problem. I disabled Beautify extension and all works flawlessly

[yukriss]

beautify seems to be the culprit disabled it =>reloaded and everything works flawlessly.
Thank you.

[bibek-magar]

Oh, thank the heavens, the linked issue at jsbeautify solved it for me. Disabled the Beautify plugin on my vscode and all is well.

JUst uninstall beautify extension still not work on mine

[Aarbel]

reload vs code and remove other beautifying extensions

[victorbf]

I uninstall beautifying and it works!

[largo87]

"files.associations": {
"*.js": "javascriptreact"
}
it works for me

[Rodrigoandfamily]

it worked thanks get back to coding

[soriasayer]

Put the following code in settings.json and as well as in .prettierrc files.
"beautify.ignore": [ "/.js", "/.jsx" ]
it works for me.

[Mecca757]

Resolved by disabling Beautify, which was causing issues with Prettier.

What if you don't have beautify installed?

[mdrizwanalam]

Thanks man,,its just worked for me after uninstalling Beautify and reloaded again