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

问题描述

很长一段时间以来，我与Vue.js一起遇到Prettier的一个特殊问题。似乎没有解决办法，因此我在这里最后提出了一个问题。如果您的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>

OR

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

---

我在这里缺少一些可以禁用/启用以防止这种情况的选项吗？如果是这样，请指导。

解决方法

我找到了解决此问题的方法。通过搜索将其留在这里。

将选项--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