Prettier is removing space between two jsx elements

how i should configure prettier to have a space between two jsx elements:

 Output while saving with prettier
   <h1>Lorem Ispum</h1>
   <h1>Lorem Ispum</h1>

 Output while saving with prettier
   <h1>Lorem Ispum</h1>
   <h1>Lorem Ispum</h1>

 Expected Output while saving with prettier
  <h1>Lorem Ispum</h1>

  // space
  <h1>Lorem Ispum</h1>

 Expected Output while saving with prettier
  <h1>Lorem Ispum</h1>

  // space
  <h1>Lorem Ispum</h1>

6 Replies

dys 🐙•17mo ago

Prettier is "intentionally opinionated" & "minimally configurable". https://prettier.io/docs/en/options.html is what you can change. You're not going to get the fine-grained control you seek. (The space is ignored when the HTML is parsed, so there's no problems with removing it other than the appearance of your text.)

Options · Prettier

Prettier ships with a handful of format options.

Pratik chauhanOP•17mo ago

is there any another way?? i have seen some open source project where prettier is configured and there is space between two jsx element

dys 🐙•17mo ago

https://prettier.io/docs/en/options.html#html-whitespace-sensitivity htmlWhitespaceSensitivity: strict?

dys 🐙•17mo ago

https://prettier.io/docs/en/configuration.html tells you where you can put the config.

Configuration File · Prettier

Prettier uses cosmiconfig for configuration file support. This means you can configure Prettier via (in order of precedence):

Pratik chauhanOP•17mo ago

I have added this configuration still not working

Kuba•17mo ago

If you can find one of these projects then surely post a link. If they're using prettier then we can look at the config and figure out how they've done it

Gaming

Programming

Prettier is removing space between two jsx elements