Skip to content

Option to retain multi-line props in JSX/HTML #3101

@damassi

Description

@damassi

Right now I'm finding that Prettier collapses JSX attributes onto a single line, up until the column width. This (in my opinion) feels much harder to read as it requires the eyes to constantly scan left to right rather than "glance" at a single block.

Would you be open to an option that disables this forced single-line output?

Prettier 1.7.4
Playground link

Input:

const f = () => (
  <Foo
    hello={baz}
    how={are}
    you={a}
    hi={c}
  />
)

Output:

const f = () => <Foo hello={baz} how={are} you={a} hi={c} />;

Expected behavior:
Retain line breaks.

Update:

I opened this a long while back but after two years of using Prettier I absolutely, without question, and without hestitation, support the settings currently in Prettier and further -- believe that all of these personal preferences simply vanish from sight after using Prettier for more than a few days, as if one never even had them. They vanish into the delight of not having to worry about preferences anymore, and all of the energy / time savings that come from that. I am a 👎 on adding additional configuration in this regard.

Metadata

Metadata

Assignees

No one assigned

    Labels

    lang:htmlIssues affecting HTML (and SVG but not JSX)lang:jsxIssues affecting JSX (not general JS issues)locked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.status:needs discussionIssues needing discussion and a decision to be made before action can be taken

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions