Skip to content

formatter: JSX && chain collapsed past printWidth when ( has trailing inline comment #21991

@jsmecham

Description

@jsmecham

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

{
  "printWidth": 120
}

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Priority

    None yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions