How to stop line breaks appearing inside <p> tags in JSX

I've been trying to figure out what setting I need to change to disable a rather annoying PhpStorm formatting behaviour, but without any luck. I'm hoping someone here can advise, and that the following example makes sense!

If I paste a line of JSX code which consists of a paragraph element containing some text and at least one other HTML element, and the total line length exceeds the hard wrap limit, then PhpStorm insists on putting a line break before the closing </p> tag.

Here's an example:

function MyComponent() {
    return (
        <div>
            <p>A short paragraph that is unaffected.</p>
            <p>Pasting code anywhere in this block causes a line break before the closing tag on this line, because of the <a href='/'>child element</a> that exists in this paragraph.
            </p>
            <p>A short paragraph with a <b>child</b> that is unaffected.</p>
        </div>
    );
}

As you can hopefully see in the example above, the closing tag of the second paragraph is forced down onto its own line on paste (or when I reformat the file in the Code menu.

Please can someone put me out of my misery and tell me how I can disable this behaviour? I feel like I've tried all of the formatting settings in Editor > Code Style > HTML but nothing seems to be affecting this!

I'm running PhpStorm 2024.1.1.

0
1 comment

Will it help if you add p to “Don't break if inline content” in `Settings | Editor | Code Style | HTML > Other`?

0

Please sign in to leave a comment.