Breaking up HTML tags in JSX upon save

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.

[sonbuiGFD]

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

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

and it fixed =))

[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.