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

Question

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

https://stackoverflow.com/questions/7366344/do-we-still-need-forward-slashes-when-closing-void-elements-in-html5 — Hans Passant, Jul 13 '23 at 14:34

score 1 · Answer 1 · answered Jul 13 '23 at 15:22

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 <img>, <input>, and <br>, do not require a closing tag and should not have a trailing slash. For example, if you have code like this:

<img src="image.jpg" />

Prettier may format it as:

<img src="image.jpg">

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: '*.html',
      options: {
        ...
        // Add the rule you want to disable
        htmlVoidTags: false,
      },
    },
  ],
};

Thank you so much. i will try to get the prettier conf. – Juan pablo Rairan Jul 14 '23 at 22:11 — Juan pablo Rairan, Jul 14 '23 at 22:11

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

1 Answers1