CODEWITHSUNDEEP
jsxphpstormwebstorm
henk
henk

Reputation: 2848

How to prevent WebStorm/prettier from inserting randomly a space string in curly braces {" "} in .jsx?

When autoformatting .jsx with prettier, I get random {" "} inserted. As far as I can track this down, it happens when there is some empty space between jsx elements, and the trailing element is moved to a new line by the autoformatter.

e.g. this:

enter image description here

is autoformatted to this:

enter image description here

But if the trailing element is already on the next line, then the space between the elements gets removed. Which is the right behavior in my opinion.

Is it possible to turn the {" "} - insertion off?

Upvotes: 0

Views: 506

Answers (1)

lena
lena

Reputation: 93898

You will face the same issue when formatting your code with Prettier in command line. this is by design, please see https://github.com/prettier/prettier/issues/4223#issuecomment-380093772 for explanation:

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

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

Upvotes: 1

Related Questions