Prettier:在HTML/JSXHTML中保留分隔属性的空行

Question

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

以下是我所说的：

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

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

Answer 1

在我看来，Pretifiers没有删除中的空行

也许你可以使用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

它确实应该按照您期望的方式工作(就像它在对象文字中工作一样(。这根本还没有实现。有一个开放的拉取请求，但似乎已被放弃。