Search code examples
htmlprettier

Prettier 2.6.2 makes strange changes to the html code

I am new to prettier. I have this strange phenomena in this HTML, after running prettier:

<!DOCTYPE html>
<html>
  <head>
    <title>X</title>
  </head><!-- ddd --->
  <body></body>
</html>

Then i run this command:

prettier --write "./src/**/*.{ts,html,scss}"

And the result is this:

<!DOCTYPE html>
<html>
  <head>
    <title>X</title></head
  ><!-- ddd --->
  <body></body>
</html>

I have this .prettierrc.json file

{
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "auto",
"bracketSpacing": true,
"printWidth": 120
}

Any suggestions why this behavior occurs? Thank you.

Solution

  • Add this option

    In command line :

    --html-whitespace-sensitivity ignore

    Or in your .prettierrc.json :

    htmlWhitespaceSensitivity: "ignore"