Vue.js 在Prettier中，如何防止HTML结束标记'；s"&燃气轮机&引用；角色被放置在新行上？

很长一段时间以来，我在使用Vue.js时遇到了一个特殊的问题。似乎没有解决办法，所以我在这里发布了一个问题，作为最后的手段。如果HTML代码嵌套得很深，并且在Prettier中启用了

printWidth

属性（默认情况下已启用），则会发生此问题

更漂亮的2.1.2

——解析器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>

家


帖子

预期行为：

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

家


帖子

或

家


帖子

---

---

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

我找到了解决这个问题的方法。把它留给在这里搜寻的人

将选项

--html空白敏感度

设置为

忽略

，您将得到以下输出：

<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设计的一致性

更多信息请点击此处：

---

---

感谢GitHub上的回复：

这是否回答了您的问题@谢谢，问题是一样的，但解决方案仍然不接近。