JSX {" "} spaces

[Kosai106]

Is there any way at all to stop Prettier adding these horribly ugly spaces?
Perhaps just not format strings like this if it needs to add spaces like this.

Prettier 1.11.1
Playground link

Input:

<p>hello <a href="#" target="_blank">LINK</a> world</p>

Output:

<p>
  hello{" "}
  <a href="#" target="_blank">
    LINK
  </a>{" "}
  world
</p>;

[timothykang]

An alternative might be to use the HTML entity representation of the breaking space,  :

<p>
  hello&#32;
  <a href="#" target="_blank">
    LINK
  </a>&#32;
  world
</p>;

[lydell]

@timothykang That’s not better, is it? {" "} – obviously a space.   – could be anything. Both have the same length.

[timothykang]

@lydell The length is the same, but I disagree that the entity "could be anything". While the ASCII code might be a bit cryptic, the entity canonically represents the normal space as a single unit.

That being said, I'm just pointing out an alternative. Do as you see fit. 😀

[josephfrazier]

While the ASCII code might be a bit cryptic

Yeah, it's not so much that it actually "could be anything", but that the developer might think it "could be anything" before researching it.

[Kosai106]

How about a boolean value in the config to allow||disallow formatting a string if it means adding spaces in this manner?

Something like:

DEFAULT	CLI OVERRIDE	API OVERRIDE
false	--jsx-ignore-line-break	jsxIgnoreLineBreak: <bool>

Yes, the wording might need some changes - I'm no good at naming things.

[j-f1]

@Kosai106 See https://prettier.io/docs/en/option-philosophy.html.

[hawkrives]

@Kosai106 Just to be clear, Prettier has to add those spaces when it breaks over multiple lines.

With HTML, whitespace between two tags is collapsed to a single space -

<span>
    a
        <strong>tag</strong>
</span

will produce "a tag".

With jsx, though, trailing and leading whitespace on a line is removed:

<span>
    a
        <strong>tag</strong>
</span

becomes "atag".

You have to add {" "} if you want the space to show up, if the space is at the end or beginning of the line.

The only way to avoid the explicit space is to not have leading/trailing whitespace, and instead keep all of the whitespace that needs to be kept between the tags on any given line:

<span>
    a <strong>tag</strong>
</span

That will produce "a tag", just like the HTML one.

---

I think everything I wrote here is correct. Anyway, I just wanted to clarify that the ugly spaces are actually semantically important to JSX, unlike HTML, so Prettier really can't add an option to not print them.

[Kosai106]

@hawkrives What you wrote is correct, yes.

But an option to ensure it doesn't break the code onto multiple lines if there's a need to add those types of spaces, would be ideal I believe - Otherwise Prettier is useless in JSX for me and the people I work with.

[mrchief]

@Kosai106 Prettier's output here is the right thing. JSX's space handling is different. It is important to draw out attention to this fact in your code so that subsequent developers do not glance over this subtle difference.

P.S. And yes, I also had the same WTF reaction the first time I saw prettier doing this. 😄

[suchipi]

Maybe the empty spaces should get broken across lines like the other JSX children are?

<p>
  hello
  {" "}
  <a href="#" target="_blank">
    LINK
  </a>
  {" "}
  world
</p>;

cc @karl @vjeux

[vjeux]

If it did fit in one line, then I can see how we would want to keep it in one line. I guess that if we don’t today is because it’s not trivial to do so.

When we break, I’m happy with the current way it is printed. I don’t think that we should change it now as it would be a pretty invasive change for little rewards

[lydell]

Don't forget Facebook's own JSX space rules. See #1671 and #1581 (comment)

[karl]

When I first worked on the JSX formatting I did have it always put {“ “} on a line by itself, but decided to put it at the end of the previous line after some discussion:

#1582

My gut feeling on this is that either way we print this (end of line or line by itself) there will be some pros and cons. So I’d only suggest changing this if we can show that the pros of having it on a line by itself heavily outway any cons.

[Pyrolistical]

How about if we change prettier to break only when it doesn't need to introduce {" "}

Isn't this easier to read?

<p>
  hello <a href="#" target="_blank">
    LINK
  </a> world
</p>;

[Kosai106]

@Pyrolistical That's pretty much what I'm suggesting - At the very least as a setting, although at this point I've just stopped using Prettier for my React code.

[Pyrolistical]

I'm in the "no settings" camp, which is why I'm trying to just change this rule for everybody. I really don't understand how more people would prefer their code littered with {" "}

[karl]

I personally do prefer my code formatted with {" "} as I like that it keeps tags on separate lines to text, making it easier to find opening tags.

Because it was a simple change to make I've created a PR that shows how Prettier would behave if we never introduced {" "}. Look at the updated test snapshots here:

#4669

If anyone wants to add this as an option to prettier-miscellaneous (https://github.com/arijs/prettier-miscellaneous) then it should be easy to do!

[vjeux]

@panlina do you have a specific example where you add // prettier-ignore related to this issue that you’d be willing to share?

[panlina]

@panlina do you have a specific example where you add // prettier-ignore related to this issue that you’d be willing to share?

We're doing i18n using our own babel plugin and we are meeting the same situation of i18next/react-i18next#575.

Currently we've managed to solve this by adjusting our matching algorithm to treat {' '}, which is a JSXContainer node, as if it's a JSXText node.

But I still think it valuable to provide an option to disable this formatting.

[SeyyedKhandon]

Is there any solution to remove useless {" "} from code?example

[Kosai106]

Is there any solution to remove useless {" "} from code?example

Yes

[SeyyedKhandon]

Is there any solution to remove useless {" "} from code?example

Yes

It will ignore the prettier... So it is not the solution...

[JadeHayes]

Hi All! Any update on this? Would love the option to disable {" "} as well.

[MikeAlvarado]

Looking forward a way to disable this as well. 👀

[Brysonmk1984]

If this isn't getting addressed, I'd like to know if there are any other formatters out there that aren't religiously opinionated about silly things like this?

[potatosenior]

helloo, how can i disable this within one file only?

[ajnozari]

I'm closing the issue as I honestly don't believe it to be a problem anymore.

For those of you who have issues with Prettier formatting things you don't want, you can always throw a // prettier-ignore comment in your code and carry on. You can read more about it here: https://prettier.io/docs/en/ignore.html

This is NOT the solution, this should be able to be disabled project wide.

[aistrike01]

Has anyone found an answer on how to solve this problem?

[Kosai106]

This is NOT the solution, this should be able to be disabled project wide.

Then don't use Prettier.

[simpsonphile]

prettier staff is so annoying. This formating breaks my tests, what's the problem to add a setting to disable it...
I like prettier but some rules are annoying, why not give some options to adjust it to needs instead of forcing ppl to not use prettier at all

[dbersan]

So annoying, I was getting a mf error because of this for like 30 min, jesus stop adding useless characters.

STOP ADDING CHARACTERS JUST FORMAT THE TEXT, ADDING CHARACTERS ISN'T FORMATTING

[ivan-mosayc]

Hi everyone!

Someone found a solution?

I found that if you delete the {' '} and the breakline after it and reformat again, the {' '} doesn't appears again in that reformat, at least in webstorm.

[simurgh9]

If I have something strangely formatted like this,

<React.StrictMode>
  <Router> <Frame control={control} />
  </Router>
</React.StrictMode>

I think it should instead be formatted like this,

<React.StrictMode>
  <Router>
    <Frame control={control} />
  </Router>
</React.StrictMode>

Than this,

<React.StrictMode>
  <Router>
    {" "}
    <Frame control={control} />
  </Router>
</React.StrictMode>;

If this is not possible with prettier, is there a formatter that allows this?

[akhilalekha]

Hi currently I'm facing a problem with prettier deleting this space inside a jsx element but i actually need this space. Can anyone tell me how to get this space back?!

[oncet]

Hi currently I'm facing a problem with prettier deleting this space inside a jsx element but i actually need this space. Can anyone tell me how to get this space back?!

You could replace the empty space with {" "} or with &#32.

[Justin99b]

@dhiegomaga is completly right, Prettier should not add any characters but should just format. I think there should really be an option to Disable adding characters like this since i only want to format something and not add Characters while doing so.

[cheshrkat]

While this has been closed I'll add a comment in case it's ever resurrected...

We use JSX for a documentation site, meaning we have prose in JSX. Maintaining prose quickly becomes annoying when Prettier stuffs it full of {" "} as you have to remove them before making your edits. This is not application code, it's documentation - and no we can't and don't produce these pages with markdown so that's not an option.

We are left having to ignore that whole section of the repo, or inject ignore comments in a large number of files (and then try to ensure everyone remembers to preserve those comments etc etc). A setting similar to the markdown prose settings might make sense here instead; or even just a way to configure "preserve" for line length.

I realise Prettier doesn't want to add lots of options, but in this case it's altering the code in a really unhelpful/unproductive way; and being able to control that would make Prettier more useful to us.

[vietanh68]

Thats beacause file .js is not compatible with HTML inside it. Changing your file extension to .jsx will FIX IT

[landsman]

This is crazy

[tanchu]

This line
</TableRow> <TableRow>
converts to

<TableRow>{' '}
<TableRow>

But the same code (below) with trailing space works fine. Trailing space just removed after formatting.

</TableRow> // here is trailing space
<TableRow>

What's the difference between those two examples? Why the fist works "incorrect"?