更漂亮：在 HTML/JSX HTML 中保留分隔属性的空行

Question

So I've been trying to find a way to tell Prettier to keep line breaks between attributes in HTML, for keeping code clear, but I'm coming up empty. I'm working in TypeScript React with Styled Components, don't know if that makes a difference for the answer. I've been wondering if this is a job for Beautify, but since I'm using prettier to auto-format files on commit I'm worried using both might get very messy.

Here is what I'm talking about:

 <CustomInput value={whatever} width="100px" height="32px" background="#333" borderColor="sandybrown" onFocus={handleFocus} onBlur={handleBlur} onChange={evt => setWhatever(evt.target.value)} />

Notice the empty lines separating the different "categories" of attributes. Prettier automatically removes these. Is this possible to achieve?

Answer 1

Prettifiers aught to remove empty lines in my opinion

Perhaps you can use HTML comments

 <CustomInput value="{whatever}" <.-- formatting --> width="100px" height="32px" background="#333" borderColor="sandybrown" <.-- event handlers--> onFocus={handleFocus} onBlur={handleBlur} onChange={evt => setWhatever(evt.target.value)} />

Or just do what is recommended:

 const handleFocus = () => {} const handleBlur = () => {} window.addEventListener("load", function() { const inp = document.querySelector("CustomInput"); inp.addEventListener("focus", handleFocus); inp.addEventListener("blur", handleBlur); inp.addEventListener("change", evt => setWhatever(evt.target.value)); });

 CustomInput { display: block; width: 100px; height: 32px; background: #333; border-color: sandybrown; color: white; }

 <CustomInput value="{whatever}">Text</CustomInput>

Answer 2

It's indeed supposed to work the way you expect (just like it works in object literals). This is simply not implemented yet. There is an open pull request , but it seems to be abandoned.