How do I stop prettier from formatting HTML files?

Solution 1:

If you are using VS Code, you can prevent Prettier from running on HTML (or other specific languages) by adding the following to your settings:

"prettier.disableLanguages": ["html"]

You can find other VS Code specific options at the prettier/prettier-vscode GitHub page.

Solution 2:

If you would like to retain vscodes html formatter for html files, but leverage prettier for other files you can set the following in settings.json.

"editor.formatOnSave": true,
"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
}

Solution 3:

If you use prettier with pre-commit hook (for example, with husky), changing the editor settings will not help you.
You need to add file .prettierignore with the following content:

*.html

File format is similar to .gitignore. You can read more here: https://prettier.io/docs/en/ignore.html

Solution 4:

As of March 2021, you can no longer disable HTML in the Prettier extension settings.

Now, you can either use a .prettierignore file or use VS Code's editor.defaultFormatter settings, as detailed in the Default Formatter section of the Prettier docs.

I was able to disable Prettier (and any formatter) in HTML files by going into settings.json and changing this:

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

to this:

"[html]": {
    "editor.defaultFormatter": null
  },

Or, you can use VS Code's default HTML formatting with this (my preferred option because forward slashes aren't added at the end of self-closing/void tags):

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },

Solution 5:

And in case you want to ignore a specific line to be formatted inside file you can do that via adding prettier-ignore before the code.

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

Complete documentation: https://prettier.io/docs/en/ignore.html