在 Prettier 中，如何防止 HTML 结束标记的“>”字符被放置在新行上？

Posted 2023-02-22

【中文标题】在 Prettier 中，如何防止 HTML 结束标记的“>”字符被放置在新行上？

【英文标题】：In Prettier, how do I prevent HTML closing tag's ">" character being placed on a new line?

【发布时间】：2021-01-26 20:29:25

【问题描述】：

很长一段时间以来，我在使用 Prettier 和 Vue.js 时遇到了一个特殊问题。似乎没有解决方案，所以我在这里发布一个问题作为最后的手段。如果您的 html 代码嵌套较深，并且您在 Prettier 中启用了 printWidth 属性（默认情况下已启用），则会出现此问题。

更漂亮的 2.1.2 Playground link

--parser vue

输入：

<template>
  <div>
    <div>
      <div>
        <div>
          <div>
            <ol>
              <li>
                <router-link class="xyz-class abc-class" to="/home">Home</router-link>
              </li>
              <li>
                <router-link class="xyz-class abc-class" to="/posts">Posts</router-link>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

输出：

<template>
  <div>
    <div>
      <div>
        <div>
          <div>
            <ol>
              <li>
                <router-link class="xyz-class abc-class" to="/home"
                  >Home</router-link
                >
              </li>
              <li>
                <router-link class="xyz-class abc-class" to="/posts"
                  >Posts</router-link
                >
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

预期行为：

在我看来，这些中的任何一个都会更好更整洁。

<template>
  <div>
    <div>
      <div>
        <div>
          <div>
            <ol>
              <li>
                <router-link class="xyz-class abc-class" to="/home">
                  Home
                </router-link>
              </li>
              <li>
                <router-link class="xyz-class abc-class" to="/posts">
                  Posts
                </router-link>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

或

<template>
  <div>
    <div>
      <div>
        <div>
          <div>
            <ol>
              <li>
                <router-link
                  class="xyz-class abc-class"
                  to="/home"
                >Home</router-link>
              </li>
              <li>
                <router-link
                  class="xyz-class abc-class"
                  to="/posts"
                >Posts</router-link>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

---

我是否在这里遗漏了一些可以禁用/启用以防止这种情况发生的选项？如果有，请指导。

【问题讨论】：

这能回答你的问题吗？ Prettier formatting configuration

@RobNapier 谢谢，问题大致相同，但解决方案仍然没有关闭。

【参考方案1】：

我找到了解决这个问题的方法。将其留给通过搜索到达这里的人。

将选项--html-whitespace-sensitivity 设置为ignore，您将获得以下输出：

<template>
  <div>
    <div>
      <div>
        <div>
          <div>
            <ol>
              <li>
                <router-link class="xyz-class abc-class" to="/home">
                  Home
                </router-link>
              </li>
              <li>
                <router-link class="xyz-class abc-class" to="/posts">
                  Posts
                </router-link>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

---

虽然不建议这样做，因为空白格式会导致文本和内容周围的额外间距等问题，这可能会影响您的 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