Change HTML/JSX formatting to have one attribute/prop per line
Problem
Similar to what was done for #3847 I think it best to break some of the discussion from #3101 into a new issue that people can 👍 or 👎. I'm proposing that for HTML and JSX to have Prettier always have one attribute/prop per line (and thus not respect the developer's original preference). Code would then be formatted as shown below. This is in contrast to the current behaviour where we fit as much as possible with the print-width. Expected behavior: [code block] This suggestion for one attribute/prop per line was proposed several times in the discussion of #3101 but I think it is clearer if this is pulled into it's own proposal. The original proposal in #3101 is that Prettier would add an option to preserve original formatting which, while I agree with the author with the style that they want, I don't think a) an option, nor b) preserving original formatting follows the aims for Prettier (see also #2068). Instead I think the aims of #3101 are better served by this proposal to ignore the print-width and always place attributes/props on new lines (assuming that there is more than one). This style appears to be the most common formatting for Angular, Vue and React from what I can tell. It style appears to be the style enforced by the rules: React: jsx-max-props-per-line which Airbnb set to to 1 in their style guide Vue: max-attributes-per-line which has a default to 1.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: Change HTML/JSX formatting to have one attribute/prop per line
> The point I am trying to make is that the vertical space matters. Wasting it (too much) has negative impact on code manageability. On the other hand, many diff tools are line-based. So by putting each attribute on it's own line, we reduce the number of conflicts a team has to solve. From the example above consider [code block] vs. [code block]
Trust Score
10 verifications
- 1
> The point I am trying to make is that the vertical space matters. Wasting it (
> The point I am trying to make is that the vertical space matters. Wasting it (too much) has negative impact on code manageability.
- 2
On the other hand, many diff tools are line-based. So by putting each attribute
On the other hand, many diff tools are line-based. So by putting each attribute on it's own line, we reduce the number of conflicts a team has to solve.
- 3
From the example above consider
From the example above consider
Validation
Resolved in prettier/prettier GitHub issue #5501. Community reactions: 155 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep