小编Pre*_*esh的帖子

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

Prettier 2.1.2 Playground 链接

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