更漂亮的格式化配置

Posted 2023-02-22

【中文标题】更漂亮的格式化配置

【英文标题】：Prettier formatting configuration

【发布时间】：2020-04-28 18:25:41

【问题描述】：

我正在努力为 Angular html 组件配置 Prettier 格式。我尝试了不同的配置覆盖，但我无法得到我想要的。

默认情况下，在 VS Code + Prettier 上，以下标记：

<ng-container *ngIf="emailRef.hasError('email')">A valid email address must be used</ng-container>

被格式化为（因为行长）：

<ng-container *ngIf="emailRef.hasError('email')"
  >A valid email address must be used</ng-container
>

我一点也不喜欢。我不希望 Prettier 像那样拆分标签。我更喜欢：

<ng-container *ngIf="emailRef.hasError('email')">
  A valid email address must be used
</ng-container>

有谁知道如何覆盖其默认行为？当使用多个属性时，我可以使用默认格式，例如：

<input
  id="email"
  name="email"
  type="email"
  email
  required
  [(ngModel)]="email"
  #emailRef="ngModel"
/>

【问题讨论】：

有一个功能请求正在开发中：github.com/prettier/prettier/issues/5377

谢谢罗伊，我会赞成的。所以目前没有解决方案，除非下面 C_Ogoo 指定的解决方案？

正确，暂时不行。

【参考方案1】：

对我有用的是在内容和开始和结束标签之间添加一个空格：

<ng-container *ngIf="emailRef.hasError('email')"> A valid email address must be used </ng-container>

使用空格，更漂亮的格式正确

【讨论】：

这是一个不错的技巧。似乎也可以，但我更喜欢 Prettier 处理的解决方案。

我辛辛苦苦找了几天的解决方案，目前还没有更漂亮的解决方案。

Preetesh's answer 解释了这种行为。如果你有一个块元素，末尾的空格无关紧要，更漂亮的东西……嗯，更漂亮。如果你有一个内联元素，比如span，或者在这里假设为ng-container，空格很重要 -- can<span>not</span>! 的显示与can<span> not </span>! 大不相同但是如果你在两者上都输入空格结束，现在任何数量的空白都是等效的显示方式和更漂亮的可以默认为其首选的漂亮。因为在这个 kludge 不会“愚弄” Prettier。这是设计使然。

【参考方案2】：

我知道这个问题已经存在几个月了，但我在 Prettier 的问题上发布了类似的内容并找到了更好的解决方案。将其留给通过搜索到达这里的人。

将选项--html-whitespace-sensitivity 设置为ignore，您将获得所需的输出：

<ng-container *ngIf="emailRef.hasError('email')">
  A valid email address must be used
</ng-container>

---

虽然不建议这样做，因为空白格式会导致文本和内容周围的额外间距等问题，这可能会影响您的 UI 设计的一致性。

在此处了解更多信息：https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting

---

感谢 GitHub 上的回复：https://github.com/prettier/prettier/issues/9381#issuecomment-707156908

【讨论】：

现在这是有趣的。默认情况下，它包装div 的方式与span 不同，例如，因为空格不会改变块元素的显示方式，但会像span 那样内联，所以span 得到gt & lt 触摸文本处理。 "我们没有破坏您的代码或什么都不做，而是引入了空格敏感格式，它遵循每个元素的默认 CSS 显示值，以识别其中的空格是否重要，并以如下方式包装标签以避免添加或删除重要的空格。“整洁！