Option to retain multi-line props in JSX/HTML
Problem
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%20%3D%3E%20(%5Cn%20%20%3CFoo%5Cn%20%20%20%20hello%3D%7Bbaz%7D%5Cn%20%20%20%20how%3D%7Bare%7D%5Cn%20%20%20%20you%3D%7Ba%7D%5Cn%20%20%20%20hi%3D%7Bc%7D%5Cn%20%20%2F%3E%5Cn)%22%2C%22options%22%3A%7B%22ast%22%3Afalse%2C%22bracketSpacing%22%3Atrue%2C%22doc%22%3Afalse%2C%22jsxBracketSameLine%22%3Afalse%2C%22output2%22%3Afalse%2C%22parser%22%3A%22babylon%22%2C%22printWidth%22%3A80%2C%22semi%22%3Atrue%2C%22singleQuote%22%3Afalse%2C%22tabWidth%22%3A2%2C%22trailingComma%22%3A%22none%22%2C%22useTabs%22%3Afalse%7D%7D) Input: [code block] Output: [code block] 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 rega
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Implement Multi-Line JSX Attribute Retention in Prettier
Prettier automatically formats JSX attributes into a single line based on the specified print width, which can lead to reduced readability for multi-line props. This behavior is due to Prettier's design philosophy of enforcing a consistent style, which may not align with all developers' preferences for readability.
Awaiting Verification
Be the first to verify this fix
- 1
Review Prettier Configuration
Check the current Prettier configuration file (e.g., .prettierrc) to ensure it is set up correctly for your project. This includes verifying the printWidth setting.
bashcat .prettierrc - 2
Adjust Print Width
Consider increasing the print width in the Prettier configuration to allow more room for JSX attributes to remain on separate lines. For example, set printWidth to a higher value like 120.
json{ "printWidth": 120 } - 3
Use Prettier Ignore Comments
If certain components need to retain multi-line props, use Prettier ignore comments to prevent formatting on those specific lines. Add `// prettier-ignore` above the JSX element.
jsx// prettier-ignore <Foo hello={baz} how={are} you={a} hi={c} /> - 4
Test Formatting Changes
Run Prettier on your codebase to see if the changes have taken effect. Use the command line to format your files and check if multi-line props are preserved.
bashnpx prettier --write . - 5
Review Output
Examine the formatted output to ensure that multi-line props are retained as expected. If the output meets your readability standards, the fix is successful.
bashcat formattedFile.js
Validation
Confirm that the JSX attributes are now formatted across multiple lines instead of being collapsed into a single line. Review the output visually or by comparing it to previous versions.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep