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

Question

所以我一直在试图找到一种方法来告诉 Prettier 在 HTML 中的属性之间保留换行符，以保持代码清晰，但我的结果是空的。 我在 TypeScript React with Styled Components 工作，不知道这是否对答案有影响。 我一直想知道这是否是 Beautify 的工作，但由于我在提交时使用 prettier 来自动格式化文件，我担心同时使用两者可能会变得非常混乱。

这就是我所说的：

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

注意分隔不同“类别”属性的空行。 Prettier 会自动删除这些。 这有可能实现吗？

Answer 1

在我看来，美化者可以删除空行

也许您可以使用 HTML 注释

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

或者只是做推荐的事情：

 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

它确实应该按照您期望的方式工作（就像它在 object 文字中工作一样）。 这根本还没有实现。 有一个 open pull request ，但它似乎被放弃了。