“Trailing slash on void elements has no effect” 是什么意思?

huangapple go评论64阅读模式
英文:

What is “Trailing slash on void elements has no effect”?

问题

我已经使用prettier一个月了,一切都很顺利。然而,我有一段代码,当我写它时,Prettier以不同的方式格式化它,当我尝试验证代码时,它会抛出一个“slash and tray”错误,有什么建议吗?

截图

我尝试了一些YouTube教程来设置prettier,但没有成功。

英文:

enter image description hereI've been using prettier for 1 month and everything is fine. However, I have a code that when I write it, Prettier formats it in a different way and when I go to validate the code, it throws me a "slash and tray" error, any suggestions?

Screenshot

i try some youtube tutorials on setting up prettier, but that didnt work

答案1

得分: 1

错误消息“空元素的尾部斜杠没有效果”通常在使用带有尾部斜杠("/")的HTML自闭合空元素时发生。HTML中的空元素,如<img>、<input>和<br>,不需要闭合标签,也不应该有尾部斜杠。
例如,如果你的代码如下所示:

&lt;img src=&quot;image.jpg&quot; /&gt;

Prettier可能会格式化为:

&lt;img src=&quot;image.jpg&quot;&gt;

要解决这个问题,你可以简单地删除空元素的尾部斜杠(就像上面第二个示例中的源代码一样)。

另外,如果你不需要这个特定的检查,你可以在你的**.prettierrcprettier.config.js**文件中覆盖它。

例如:

module.exports = {
  overrides: [
    {
      files: '*.html',
      options: {
        ...
        // 添加你想要禁用的规则
        htmlVoidTags: false,
      },
    },
  ],
};
英文:

The error message "Trailing slash on void elements has no effect" typically occurs when using HTML self-closing void elements with a trailing slash ("/") at the end. Void elements in HTML, such as &lt;img>, &lt;input>, and &lt;br>, do not require a closing tag and should not have a trailing slash.
For example, if you have code like this:

&lt;img src=&quot;image.jpg&quot; /&gt;

Prettier may format it as:

&lt;img src=&quot;image.jpg&quot;&gt;

To resolve this issue, you can simply remove the trailing slash on void element (like in the second source sample above)

Btw if you don't need that specific check you can overwrite it in your .prettierrc or prettier.config.js file.

e.g.

module.exports = {
  overrides: [
    {
      files: &#39;*.html&#39;,
      options: {
        ...
        // Add the rule you want to disable
        htmlVoidTags: false,
      },
    },
  ],
};

huangapple
  • 本文由 发表于 2023年7月13日 21:33:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/76679953.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定