Breaking up HTML tags in JSX upon save

CosmonautJones commented 6 years ago

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 commented 6 years ago

Images just for completeness sake beforesave aftersave

sonbuiGFD commented 6 years ago

I have the same issue after update VScode today.

jtbandes commented 6 years ago

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 commented 6 years ago

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

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

Greenie10 commented 6 years ago

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 commented 6 years ago

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

nielskrijger commented 6 years ago

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 commented 6 years ago

Updating to 1.23.1 did not work for me.

jtbandes commented 6 years ago

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 https://github.com/Microsoft/vscode/issues/49708

ctrlplusb commented 6 years ago

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 commented 6 years ago

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

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

and it fixed =))

DevAbas commented 5 years ago

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

noargs commented 5 years ago

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

shyamsha commented 5 years ago

thanks man

kajangid commented 5 years ago

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

lipis commented 5 years ago

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

AMINEDGE commented 5 years ago

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