VScode Prettier 打破了引用标签 - HTML5

Question

我一直在广泛搜索，但没有找到合适的解决方案来配置 Prettier 以停止将某些标签分成两行...在我的例子中是 <cite> 标签。

这是一个例子：

我希望它是

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

或

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

但是我在格式化后得到了这个

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

我意识到它可能比 80 长，因此中断了，但我希望它能保持标签完好无损。有没有办法在不修改 打印宽度 属性的情况下解决这个问题？

Answer 1

根据 the prettier docs，你应该可以用 "jsxBracketSameLine":true 解决这个问题在您的配置中或在命令行中使用此标志 --jsx-bracket-same-line。

类似的问题或许也能帮到你

您还可以使用空白敏感格式或魔法注释，如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>

VScode Prettier 打破了引用标签 - HTML5

VScode Prettier breaks cite tag - HTML5

html

formatting

prettier