In Prettier, how do I prevent HTML closing tag's ">" character being placed on a new line?

Question

I am running into a particular problem with Prettier alongwith Vue.js since a very long time. It seems like there's no solution to this so I am posting a question here as a last resort. This issue happens if your HTML code is nested deep and you have printWidth attribute is enabled in Prettier (which is enabled by default).

Prettier 2.1.2 Playground link

--parser vue

Input:

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

Output:

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

Expected behavior:

Any of these would be fine and neater in my opinion.

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

---

Am I missing some option here that I can disable/enable to prevent this? If so, please guide.

Answer 1

I've found a solution to this problem. Leaving it here for people who land here by search.

Set the option --html-whitespace-sensitivity to ignore and you will get this output:

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

---

Although this is not recommended as whitespace formatting can cause issues like extra spacing around text and stuff, which might affect your UI design's consistency.

More info about this here: https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting

---

Thanks to this reply on GitHub: https://github.com/prettier/prettier/issues/9381#issuecomment-707156908