VScode Prettier 打破引用标签 - HTML5 [重复]

Question

我一直在广泛搜索，但没有找到合适的解决方案来配置 Prettier 以停止将某些标签分成 2 行......在我的情况下，它是 <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 长，因此中断，但我希望它保持标签完好无损。有没有办法在不修改 Print Width 属性的情况下解决这个问题？

Answer 1

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

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

您还可以使用 空格敏感格式 或 magic cmets，如 here

所述

我们还允许魔法 cmets（例如 ）告诉 更漂亮的如何格式化元素，因为 CSS 显示可以 改变：

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