VScode Prettier breaks cite tag - HTML5

Question

I've been searching far and wide and have not found a proper solution to configure Prettier to stop breaking certain tags into 2 lines... in my case it's the <cite> tag.

Here's an example:

I want it to be

<blockquote>
  <cite>Lorem Ipsum</cite>
</blockquote>

or

<blockquote>
  <cite>
    Lorem Ipsum
  </cite>
</blockquote>

But I get this after format

<blockquote>
  <p>    
    ...lorem ipsum paragraph words
  <cite
    ><img src="resources/img/customer-2.jpg " />Lorem Ipsum</cite
  >
  </p>
</blockquote>

I realize that it's probably longer than 80 hence the break, but I'd prefer if it kept the tag intact. Is there a way to fix this without modifying Print Width attribute?

Answer 1

according to the prettier docs, you should be able to fix this with "jsxBracketSameLine":true in your config or with this flag --jsx-bracket-same-line in the command line.

This answer to a similar question may also be able to help you

You can also use whitespace-sensitive formatting or magic comments, as explained here

We also allow magic comments (e.g., ) to tell Prettier how to format elements due to the fact that CSS display can be changed:

<!-- input -->
<!-- display: block -->
<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>

<!-- output -->
<!-- display: block -->
<span class="dolorum atque aspernatur">
  Est molestiae sunt facilis qui rem.
</span>