Auto-closed JSX tags are really annoying during development. I would like to propose a one-way option that could provide "development" and "commit" stages

Prettier 1.15.2

I started getting annoyed by this issue, and I found this discussion on Twitter:

@wesbos: Is there a prettier setting that will stop it from self-closing HTML elements? I’m too trigger happy with my saves and it converts <div></div> to <div/> before I put anything inside of it

@tvanantwerp: I hope someone knows. How many minutes (hours?) have I lost changing <div/> back to <div></div>…

@kiran_abburi: I need this one.

@vigzmv: Yes…! it’s super annoying. I have to save to see the changes but then I got to add children inside it.

@AndyWynyard: Omg this sooooo much this!!! I’ve started slowing down with the Cmd + S consciously now because of…

@NicklausRoach: This would be a wonderful thing to have. I hate having to go back and “reopen” tags. Let us know if you find a solution!

Scenario

1. Add a new div and get ready to add some content:

<div>
</div>

1. Switch to the browser to check something

2. Come back to VS Code and see that the div is now closed:

<div />

This happens because I use formatOnSave, and Auto Save with onFocusChange. (I know I can press ⌘+Z to undo the format, but it’s still really annoying.)

I’ve experimented with turning off formatOnSave and just using a keyboard shortcut and precommit hook. But now I really miss the auto-formatted code.

@wesbos: I love having it on every save - it saves me tons of time reformatting and indenting code. I don’t have to think about style anymore with it enabled

I would like to propose a new one-way boolean option called closeEmptyJsxElements. The default value would be true, which is the current behavior. Setting this to false would prevent any new empty JSX tags from being closed, but it would not re-open any self-closing tags. There are a lot of React components and HTML elements that should be self-closing, so re-opening these would also be annoying.

The idea is that a developer could set "closeEmptyJsxElements": false in their .prettierrc, which they use during development. Then they could pass a command-line argument in their git precommit hook: --close-empty-jsx-elements true. This would close any of the empty JSX tags where they don’t need to add any more content. (They could also set up a new keyboard shortcut to run prettier with this option. It might also be known as “commit mode”, versus “development mode”.)

I can think of a few other options that share a similar philosophy:

• trailingComma
  • It’s easier to add a new argument or property when you have trailing commas.
• arrowParens
  • It’s easier to add a new argument if the parentheses are already there.
• jsxBracketSameLine
  • It’s easier to add a new prop when the bracket is on a new line.

It might be interesting to have one-way versions of these options these during development, and then tidy up the code before you commit your changes. I’m actually not too excited about those, and I just wanted to come up with some more examples. But the self-closing JSX tags have been really annoying, so I think this could be a good solution.

Thanks!

[j-f1]

👍 for option 1, ❤️ for option 2 ⤵️

[ikatyang]

I think we should only touch whitespaces, quotes, etc. but not something like changing open-closing tags to self-closing tags.