Same for me, I managed to solve it with:
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
}
This allowed me to use prettier globally and use built in html formatter for html. Also allowed the formatting to happen on save and while typing.
The part responsible for Prettier formatting html:
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
To open type
Ctrl+Shift+P, then type open user/workspace settings JSON in the command line.
Same for me, I managed to solve it with:
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
}
This allowed me to use prettier globally and use built in html formatter for html. Also allowed the formatting to happen on save and while typing.
The part responsible for Prettier formatting html:
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
To open type
Ctrl+Shift+P, then type open user/workspace settings JSON in the command line.
I got the same issue, the cause can be updating the VS Code. fixed it by setting the Default Formatter of Text Editor
Go to Settings (Ctrl+, for windows), search for 'Default Formatter'
Set the formatter in dropdown (esbenp.prettier-vscode) for prettier. this can change if you are using any other formatter.
I have Prettier setup as the default formatter already and it's working fine for JSX and JS files.
The weird thing is that it works on save, so when I save it formats HTML correctly, but if I try to do it manually I get: "Extension 'Prettier - Code formatter' is configured as formatter but it cannot format 'HTML'-files".
Videos
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
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"
}
Hey everyone, for the life of me I can't figure out why prettier won't format css. I have gone over all of my setting, format on save, setting prettier as the default format, and checked the setting.json file. Still can't figure out what is going on. Any help would be appreciated!
So, I'm starting to learn web dev, I'm at HTML right now, and using Linux.
The problem I'm having, is no matter what I tinker with in Prettier's settings, the formatting does behaviors I don't like, that mess with my ability to check visually and compare with the video tutorial (2022) I'm using, just a single line break being added or deleted makes it look like everything and anything could be different from the source video.
These behaviors include:
Deleting line break before <head> and after </body> tags.
Indenting head and body tags, instead of just their contents.
Adding a line break inside a <li> element and indenting it because it contains a phrase having <a> and <abbr> tags, the closing </abbr> also gets a line break right before the '>' (apparently abbr tag is "breaking" because it has a period right after). 🤦🤦🤦
I have set set the Print Width to 600 but it doesn't fix the 3rd problem.
Is there a VS Code feature that's just limited to adding indentation on format without messing with anything else? I'd like to know if there are fixes without having to disable Prettier if possible, but this is so ridiculous I may as well stop using it.
- Select
File -> Preferences -> Settings(Ctrl+comma) and search formformatter - Set Prettiers as Default formatter.
If above does not work:
ctrl+shift+p > Format Document With... > Configure Default Formatter... > Prettier - Code formatter
This also work with ctrl+shift+I
If doing what @Simin Maleki mentioned does not solve it for you, there is a chance that your default formatter is not set:
File > Preferences > Settings > Search for "default formatter"
Make sure your Editor: Default Formatter field is not null but rather Prettier - Code formatter (esbenp.prettier-vscode) and that all the languages below are ticked. This fixed my issue.
STEP BY STEP WALKTHROUGH
Also make sure that your format on save is enabled:
