Input
export const A = () => (
<div>
{someLongConditionA &&
someLongConditionB && ( // a much longer explanatory comment that clearly pushes the collapsed line beyond the 120 character print width
<span>content</span>
)}
</div>
);
Config
Oxfmt output
export const A = () => (
<div>
{someLongConditionA && someLongConditionB && ( // a much longer explanatory comment that clearly pushes the collapsed line beyond the 120 character print width
<span>content</span>
)}
</div>
);
The {...} line is 163 characters with printWidth: 120.
Oxfmt playground link
https://playground.oxc.rs/?t=formatter&formatterPanels=output,prettier&code=export%20const%20A%20%3D%20()%20%3D%3E%20(%0A%20%20%3Cdiv%3E%0A%20%20%20%20%7BsomeLongConditionA%20%26%26%0A%20%20%20%20%20%20someLongConditionB%20%26%26%20(%20%2F%2F%20a%20much%20longer%20explanatory%20comment%20that%20clearly%20pushes%20the%20collapsed%20line%20beyond%20the%20120%20character%20print%20width%0A%20%20%20%20%20%20%20%20%3Cspan%3Econtent%3C%2Fspan%3E%0A%20%20%20%20%20%20)%7D%0A%20%20%3C%2Fdiv%3E%0A)%3B
(Note: set printWidth to 120 in the playground's Configure Options panel to reproduce)
Prettier output
export const A = () => (
<div>
{someLongConditionA &&
someLongConditionB && ( // a much longer explanatory comment that clearly pushes the collapsed line beyond the 120 character print width
<span>content</span>
)}
</div>
);
Additional notes
When a JSX expression uses an && chain whose final operand is a parenthesized JSX element, and the ( carries a trailing inline // comment, oxfmt collapses the entire && chain onto a single line — even when the resulting line clearly exceeds printWidth. Prettier breaks the chain before the && so the line fits. The trailing inline comment after ( appears to not be counted toward the line-length budget.
Tested against oxfmt 0.47.0 and prettier 3.8.3.
Input
Config
{ "printWidth": 120 }Oxfmt output
The
{...}line is 163 characters withprintWidth: 120.Oxfmt playground link
https://playground.oxc.rs/?t=formatter&formatterPanels=output,prettier&code=export%20const%20A%20%3D%20()%20%3D%3E%20(%0A%20%20%3Cdiv%3E%0A%20%20%20%20%7BsomeLongConditionA%20%26%26%0A%20%20%20%20%20%20someLongConditionB%20%26%26%20(%20%2F%2F%20a%20much%20longer%20explanatory%20comment%20that%20clearly%20pushes%20the%20collapsed%20line%20beyond%20the%20120%20character%20print%20width%0A%20%20%20%20%20%20%20%20%3Cspan%3Econtent%3C%2Fspan%3E%0A%20%20%20%20%20%20)%7D%0A%20%20%3C%2Fdiv%3E%0A)%3B
(Note: set
printWidthto120in the playground's Configure Options panel to reproduce)Prettier output
Additional notes
When a JSX expression uses an
&&chain whose final operand is a parenthesized JSX element, and the(carries a trailing inline//comment, oxfmt collapses the entire&&chain onto a single line — even when the resulting line clearly exceedsprintWidth. Prettier breaks the chain before the&&so the line fits. The trailing inline comment after(appears to not be counted toward the line-length budget.//comment after(makes oxfmt produce the expected (broken) output, so the comment is the trigger.//comment with a block/* */comment behaves the same way (collapsed pastprintWidth).{" "}instead of breaking at operator).Tested against oxfmt 0.47.0 and prettier 3.8.3.