英文:
Prettier force white space before and after every balise in HTML
问题
I work on a project using Prettier, the project use Nuxt(Vuejs framework).
我在一个项目中使用Prettier，该项目使用Nuxt（Vue.js框架）。
If i have a balise (h1,h2,div...) like this:
如果我有一个标签（h1，h2，div...）像这样：
<h2>I am a too long title and i proc a error</h2>
Prettier want to format them like this:
Prettier希望将它们格式化成这样：
<h2>
I am a too long title and i proc a error
</h2>
There is no problem and i like to have this format, but when i inspect the element inside the browser inspector i can see a white space before and after the text.
这种格式没有问题，我喜欢这种格式，但当我在浏览器检查器内检查元素时，我可以看到文本前后有一个空格。
<h2> I am a too long title and i proc a error </h2>
This is really unexpected, and really bad too, the only way to solve this i have fund is to not format it with prettier.
这真的出乎意料，而且非常糟糕，我找到的唯一解决办法是不使用Prettier进行格式化。
But i can't believe this problem is on every project in all world who use Prettier.
但我无法相信这个问题存在于所有使用Prettier的项目中。
https://codepen.io/deeluxe/pen/dyqXZMj -> example with space before and after on the second element.
https://codepen.io/deeluxe/pen/dyqXZMj -> 示例，第二个元素前后有空格。
英文:
I work on a project using Prettier, the project use Nuxt(Vuejs framework).
I see a really weird behaviour about Prettier and the HTML rendered.
If i have a balise (h1,h2,div...) like this:
<h2>I am a too long title and i proc a error</h2>
Prettier want to format them like this:
<h2>
I am a too long title and i proc a error
</h2>
There is no problem and i like to have this format, but when i inspect the element inside the browser inspector i can see a white space before and after the text.
<h2> I am a too long title and i proc a error </h2>
This is really unexepected, and really bad too, the only way to solve this i have fund is to not format it with prettier.
But i can't believe this problem is on every project in all world who use Prettier.
https://codepen.io/deeluxe/pen/dyqXZMj -> example with space before and after on the second element.
答案1
得分: 0
我已经添加了一条评论，但我也想在这里发布它作为答案，因为以后可能还会有其他人有同样的问题。
在prettier选项中，您可以配置htmlWhitespaceSensitivity，它可以具有不同的值。这个设置也用于格式化Vue模板中的HTML。
htmlWhitespaceSensitivity选项可以有三个值：
strict
严格敏感性确保元素内部的空白字符不会被更改。（这是否看起来好，是另一个问题）
<h2
>我是一个标题太长的错误</h2
>
ignore
如果需要进行格式化，Prettier将添加空白字符。
<h2>
我是一个标题太长的错误
</h2>
css
尊重HTML元素的默认空白字符处理。
<h2>
我是一个标题太长的错误
</h2>
<!-- 在pre元素内部： -->
<pre>
我是一个标题太长的错误</pre
>
英文:
I added already a comment, but I want to also post it as an answer here, because someone else might also have the same question at some point.
In the prettier options you can configure the htmlWhitespaceSensitivity which can have different values. This setting is also used in Vue templates to format the HTML.
The htmlWhitespaceSensitivity option can have three values:
strict
Strict sensitivity makes sure, that the whitespace characters within the element are not changed. (If this looks good, is another question)
<h2
>I am a too long title and i proc a error</h2
>
ignore
Prettier would add whitespace if it is needed for the formatting.
<h2>
I am a too long title and i proc a error
</h2>
css
Respect the default whitespace character handling of html elements.
<h2>
I am a too long title and i proc a error
</h2>
<!-- inside a pre element: -->
<pre>
I am a too long title and i proc a error</pre
>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论