更漂亮：保持空行分隔 HTML/JSX HTML 中的属性答案

【问题标题】：Prettier: Keeping empty lines separating attributes in HTML/JSX HTML更漂亮：保持空行分隔 HTML/JSX HTML 中的属性
【发布时间】：2020-07-28 07:23:31
【问题描述】：

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

这就是我要说的：

<CustomInput
  value={whatever}

  width="100px"
  height="32px"
  background="#333"
  borderColor="sandybrown"

  onFocus={handleFocus}
  onBlur={handleBlur}
  onChange={evt => setWhatever(evt.target.value)}
/>

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

【问题讨论】：

标签： html jsx styled-components prettier tsx

【解决方案1】：

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

也许你可以使用 HTML cmets

<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;
}

&lt;CustomInput value="{whatever}"&gt;Text&lt;/CustomInput&gt;

【讨论】：

cmets 建议是一种可能的解决方法。我不知道为什么我应该做另一件事；虽然这可能是纯 JS 和其他一些框架中推荐的方法，但我很确定使用属性事件是 React 中的推荐方法。无论如何，所有 React 文档都会这样做，并且使用您的方法，我将不得不手动清理事件侦听器。
"美化师可以删除空行。"我也不太确定为什么会这样，因为 Prettier 不会删除 JavaScript、CSS 等中的空行（因为它会使代码非常混乱，毕竟它不是一个缩小器）。
我的 linter 肯定不允许空行
甚至在 JS 中都没有？比如，文件中的任何地方都没有空行？
啊，是的，好的。我希望在属性之间使用它，因为当您在一个组件上有 15 个属性时它会更清晰，这可能发生在样式化组件中。

【解决方案2】：

它确实应该按照您期望的方式工作（就像它在对象文字中工作一样）。这根本还没有实现。有an open pull request，不过好像废弃了。

【讨论】：

哦，很高兴看到他们至少意识到了这个问题。希望他们能尽快得到那个 PR。感谢您的链接。
他们只是一小群志愿者，无法及时解决所有问题。感谢您的帮助。