How do I stop prettier from formatting HTML files? - html

Question

So the problem is that prettier does not format html very well.
for instance if I have this angular template:
<some-component
some-attribute
[ang-binding1]='someExpr'
[ang-binding2]='someExpr'
(someEvent)='someFunc($event)'>
</some-component>
prettier will format it to something like this:
<some-component some-attribute [ang-binding1]='someExpr' [ang-binding2]='someExpr' (someEvent)='someFunc($event)'>
</some-component>
how do I disable prettier formating for html templates ?

Answer 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.

Answer 2

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

Answer 3

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"
}

Answer 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"
},

Answer 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

Answer 6

If you are using VSCode, click File > Preferences > Settings and add "html.format.enable": false,

Answer 7

html.format.enable will turn off the default VS Code formatter. To exclude all html files in a project from being formatted you can add a .prettierignore file to the project root and ignore all html files.
*.html

Answer 8

in addition to what was already written you can also disable formatting on save. then you would need to explicitly format the document via CMD/CTRL + P > Format document
"[html]": {
"editor.formatOnSave": true
},

Answer 9

Prettier's inline ignoring syntax
For HTML,
<!-- prettier-ignore -->
or for JSX,
{/* prettier-ignore */}
or for Javascript,
// prettier-ignore
or for CSS,
/* prettier-ignore */
Note: Not a direct answer to OP's question, but sometimes when one is looking to just ignore inline for specific lines, Prettier's comment syntax is quite helpful.

Answer 10

Adding more information to what above mentioned:
Press Ctrl + ,
Type "prettier"
Go to "Prettier: Disable Languages" option
Add "html" to it

Answer 11

You can try on your ./package.json:
"scripts": {
"format": "prettier --write .js src !**.html",
...
}

Answer 12

If you are using VSCode, click Command + P (for Mac) to open the command palette.
Then type:
> settings
The > lets you enter VSCode commands.
From the results you can select Preferences: Open Settings (JSON) and this will open the settings JSON file so you can configure the settings fully. The Settings UI offers limited options.
In the settings file, add:
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
That will use the VSCode formatter for html files instead of Prettier, without disabling Prettier for other files.