Prettier not formatting HTML files in VS Code

Question

Prettier extension on my VS code is unable to format HTML.

On load of VS code I am getting this error in my console -

On trying to format, I see this message in the bottom -

Note - TS files and SCSS files are being formatted properly. It is breaking only for HTML files.

Below is my HTML language based settings -

{
  "tslint.rulesDirectory": "./node_modules/codelyzer",
  "typescript.tsdk": "node_modules/typescript/lib",
  "window.zoomLevel": 0,
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.html": "html"
  }
}

These are the extensions installed and enabled -

Prettier version - 2.2.2

VS Code version (from About VS code section) :

Version: 1.38.1
Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0
Date: 2019-09-11T13:31:32.854Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 17.7.0

Please let me know how to get this issue fixed. Please leave a comment if any more info is needed. Thanks.

Do you have any error traces for when you run the formatter? Perhaps you can start with using a minimal amount of HTML in the file until you get the problem? — Enthus3d, Sep 16 '19 at 00:59
Tried with only `

`. Getting the same error. How do I get the error trace? I suspect that prettier is not being run for HTML files. — Nithin Kumar Biliya, Sep 16 '19 at 01:02
I checked on how to debug extensions, your best bet is probably enabling [developer tools](https://i.stack.imgur.com/6phws.png) so you can take a look at what issue is causing the error. Referenced from [here](https://stackoverflow.com/questions/44188262/where-are-the-vscode-error-logs-for-extensions). — Enthus3d, Sep 16 '19 at 13:40
There's also cmd-shift-p -> Search Show Logs -> Extension Host (from the same question) — Enthus3d, Sep 16 '19 at 13:45
@Enthus3d I already check the developer tools console. There are no errors here when I format a HTML file, but on startup there was one error whose screenshot I have already attached in the question. Now I checked the Show Logs > Extension Host. No errors here while formatting HTML files — Nithin Kumar Biliya, Sep 17 '19 at 02:38
Hmm, I suspect that that error is causing an issue for your extension service, which results in the side effects. Perhaps you could try fixing that particular issue first to see if it helps. Other than that, it's difficult for me to say what could be going wrong. You could attempt to post your problem on the vscode [issues thread](https://github.com/microsoft/vscode/wiki/Submitting-Bugs-and-Suggestions) if you're not able to get the help here. Best of luck! — Enthus3d, Sep 17 '19 at 02:54
"Prettier version - 2.2.2" looks rather old to me. My current version is 5.1.3. — Henke, Jul 07 '20 at 12:22
**Check out this answer on StackOverflow:** https://stackoverflow.com/questions/52586965/why-does-not-prettier-format-code-in-vs-code/67017050#67017050 — Srishti Gupta, Apr 09 '21 at 07:50
@Henke has the best answer. It's a vs code issue. Just re-install extension before do anything more. — contributorpw, Jul 07 '21 at 03:51
Does this answer your question? [Why does Prettier not format code in VS Code?](https://stackoverflow.com/questions/52586965/why-does-prettier-not-format-code-in-vs-code) — Henke, Jul 08 '21 at 15:03

score 147 · Answer 1 · edited Jun 28 '20 at 09:46

147

Same for me. I managed to solve it as follow:

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

edited Jun 28 '20 at 09:46

Moaz Mabrok

697
10
32

answered Dec 01 '19 at 18:13

Eslam Sameh Ahmed

3,792
2
24
40

4

Thanks for the workaround ! Just to be clear, that's solving HTML file not getting proper formatting but it's not Prettier that will format. We default to VSCode formatter. On Prettier v5.6 and enable globally. – Poutrathor Sep 17 '20 at 11:33
2

Worked for me. I had the prettier and eslint config files set up and my config.json had js and other stuff but not html – Justin Aug 29 '21 at 21:28

score 36 · Answer 2 · edited May 23 '22 at 16:30

36

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.

edited May 23 '22 at 16:30

Mycah

4,602
5
24
32

answered Oct 27 '20 at 11:18

Rahul Sonone

2,685
1
27
38

1

Fixed my problem. I also needed to restart my VS Code. Hope it helps. – Aleksandar Belic Jul 30 '21 at 08:23

score 14 · Answer 3 · answered Feb 10 '21 at 21:24

14

Short Answer:

open Prettier from the button on right bottom corner
scroll up to see error list.
fix the wrong semantic you wrote. ex: photo for error example

Long Answer: Most of the times the reason why Prettier doesn't work is that you have a markup error.

ex: you haven't close the angle braces or you close the tag more that one time to know the error and fix it : look at short answer.

answered Feb 10 '21 at 21:24

Mohamed S.Shelf

317
2
8

it works for me. I have fixed the wrong simantic of tag. – Chetan Nada Dec 06 '21 at 06:33
It worked for me. thanks. i was searching for about 3 hours and after your answer i just tried to find an semantic error. I found it and now prettier works again – amir_70 May 14 '22 at 09:41

score 10 · Answer 4 · edited Jun 01 '23 at 23:19

10

Firstly, you may want to solve the compilation error you have in regards to Vue.js. You may need to grab some extensions for VS-code as detailed here.

I have heard that Prettier has some issues formatting HTML at times, and VS Code itself already has HTML formatting support. You can stop prettier from formatting HTML specifically using the following command:

"prettier.disableLanguages": ["html"]

You could also change this line in your configs to enable VS code html language support instead.

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

edited Jun 01 '23 at 23:19

ggorlen

44,755
7
76
106

answered Sep 12 '19 at 18:17

Enthus3d

1,727
12
26

I did check out the [issue](https://github.com/xabikos/vscode-javascript/issues/49). But it doesn't mention how to disable it without installing any extensions. Since I am not using vue, I dont need any extensions. – Nithin Kumar Biliya Sep 14 '19 at 06:50
Also I would not want to disable prettier for HTML. I would want to go with the prettier setting for HTML formatting since that is what other developers in the team are using. This helps in achieving the consistency in formatting among all the developers in the team. – Nithin Kumar Biliya Sep 14 '19 at 06:50

score 7 · Answer 5 · answered Oct 13 '20 at 14:59

7

For me i found that prettier was refusing to format files, however there was no errors in the output window in vs code. usually this happens when the html is not valid: missing tags, or tags closed twice, or tags that are not closed.

To see the errors, i ran prettier from the command line, and for each file it refused to format, it showed an error of what was wrong, like in the image below:

answered Oct 13 '20 at 14:59

ehab

7,162
1
25
30

3

For reference, the command is like `npx prettier -c index.html` – salsbury Dec 23 '20 at 05:47

score 5 · Answer 6 · answered Oct 04 '21 at 13:36

Had this problem crop up today after working fine with HTML previously.

Tried editing default formatter, format on save, reloading prettier etc.

Eventually tried the solution proposed above

edit settings.json

make sure "[html]": has default formatter line set to the below, found it on line 40.

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

score 4 · Answer 7 · answered Dec 02 '20 at 01:44

4

Disabling "editor.formatOnSaveMode": "modifications" fixed the issue for me in Angular's .component.html files.

answered Dec 02 '20 at 01:44

Nick Ribal

1,959
19
26

score 2 · Answer 8 · answered Dec 31 '19 at 01:44

I had a lot of problems with getting Prettier to format on save. It turned out to be an issue with the default timeout settings in VSCode. Using these settings finally worked for me:

{
    ...
    "editor.codeActionsOnSaveTimeout": 100000,
    "editor.formatOnSaveTimeout": 100000,
    ...
}

For reference, here are all my settings concerning linting and formatting:

{
    "editor.codeActionsOnSave": { "source.fixAll": true },
    "editor.codeActionsOnSaveTimeout": 100000,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.formatOnSaveTimeout": 100000,
    "editor.formatOnType": true,
    "eslint.alwaysShowStatus": true,
    "eslint.enable": true,
    "html.format.enable": false,
    "htmlhint.enable": true,
    "prettier.requireConfig": false,
    "prettier.useEditorConfig": true,
    "stylelint.autoFixOnSave": true,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    }
}

I use the following extensions (again limited to linting/formatting):

ESLint (dbaeumer.vscode-eslint)
Prettier (esbenp.prettier-vscode)
stylelint-plus (hex-ci.stylelint-plus)
HTMLHint (mkaufman.htmlhint)

You might want to make sure that all the npm packages needed by your extensions are installed. Locally if possible.

I sincerely hope this helps. Setting up linters and formatters is still a science in its own right.

P.S. I get an error like your 'cannot format' message whenever I try to format a file that is not inside the working directory. But looking at the path in your message suggests that this is not an issue in your case.

score 2 · Answer 9 · answered Aug 28 '20 at 08:43

If the formatting fails, see if there are any errors in the Prettier console. If not, use the following settings:

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

Once the file has been formatted, put back the original settings:

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

And try formatting again. This time Prettier will have better input to work with.

The requirePragma option should be false (it is by default) in .prettierrc or VS code prettier settings (dotfile overrides VS).

score 1 · Answer 10 · answered Jun 18 '21 at 07:31

1

I simply solved it by right-clicking in the file, select 'Format Document with' and choose 'prettier'. I don't know how to permanently set it up but it's a quick workaround.

answered Jun 18 '21 at 07:31

bonstana

34
4

This was the best answer I tried the rest. The reason it works is it rewrites the settings.json file direclty. – Ken Oct 28 '21 at 21:32

score 1 · Answer 11 · answered Aug 03 '21 at 16:09

1

This is what worked for me.

In the settings.json, capitalize the h in [html]:

...

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

...

answered Aug 03 '21 at 16:09

Malcolm Burtenshaw

19
2

score 1 · Answer 12 · answered Dec 03 '21 at 04:19

prettier formatter doesn't support Format on selection or Formate On Save for HTML files - modification mode, So for this, you can set formatOnSaveMode:'html' for HTML files in settings.json

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

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

javascript
javascriptreact
typescript
typescriptreact
json
graphql

score 1 · Answer 13 · answered May 17 '22 at 18:18

For me, I had to check the notifications in the bottom right corner. Once I clicked on it, you can configure which formatter to use. For some reason, there are more than one editor. I'm gonna go on a limp and assume that it's conflicting somehow with the editors global config file.

score 1 · Answer 14 · answered Nov 15 '22 at 05:13

I just changed the default formatter for HTML to VScode's HTML formatter.

Open the command palette with Ctrl + Shift + P (or use ⌘ + Shift + P for Mac).
To open the user settings.json file search for and select the Open User Settings (JSON) option.
Make the following changes.

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

score 1 · Answer 15 · answered Jan 19 '23 at 14:39

Simple and easy way to make it work.

Steps:

Open VSCode, 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.
Extra step, if you want to use it on the save file. Just search for Format on save, then check that it is TRUE
Restart your VSCode, and Happy coding.

score 0 · Answer 16 · answered Aug 21 '21 at 16:35

0

Adding this to the bottom of my VSCode User settings did the job for me:

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

answered Aug 21 '21 at 16:35

RonanCodes

1,016
9
14

score 0 · Answer 17 · answered Oct 30 '21 at 01:39

I have found Prettier to be annoying sometimes with HTML. Hence in my case this worked for me for HTML formatting-

user json file settings as follows-

 "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
  },

For HTML I use JS-CSS-HTML Formatter extension in VSCode as the default formatter (as you can see in code above). This formats the HTML code well.

score 0 · Answer 18 · answered Feb 25 '22 at 16:58

0

I had the same issue and fixed it by navigating to the settings (ctrl + shift + ,) type in the search default format then check HTML -> format: enable box

answered Feb 25 '22 at 16:58

Mena Aziz

99
1
2

score 0 · Answer 19 · answered Jan 13 '23 at 00:06

To open the command palette, you can use COMMAND + SHIFT + P on macOS or CTRL + SHIFT + P on Windows.

In the command palette, search for format and then choose Format Document.

You may then be prompted to choose which format to use. To do so, click the Configure button. Then choose Prettier - Code Formatter or another prettier code formatter.

Your code is now formatted with spacing, line wrapping, and consistent quotes.

score 0 · Answer 20 · answered May 05 '23 at 16:42

Simply use this one; Create the file .vscode/settings.json in your root project with this config:

{
    ...
    "[html]": {
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true,
    },
    ...
}

For other types of files, us the same block but change html with the language you want, for example typescript or scss etc...

score 0 · Answer 21 · answered Jun 27 '23 at 12:39

0

In vscode:

right-click in an empty space inside the html document,
then select: format document with
then select: html language features.

answered Jun 27 '23 at 12:39

Ellis

395
3
8

Befitting Display Name · Answer 22 · 2023-08-28T02:04:54.103

For me none of the answers I tried worked at the moment I tried them (before writing this) so I found a weird solution.

I'm not entirely sure why it works or what is wrong (imagine there was some api update to vscode that Prettier hasn't adopted and this option bypasses that as the action is from prettier not integrated the editor.action.formatDocument way), so be warned.

In VSCode: Shortcuts > Format Document (prettier.forceFormatDocument)
Set the keybinds that fit your preference (I use shift + alt + f)
(Optional) Just to make sure you aren't accidentally using it outside of the relevant documents set the when condition (right click to access this) to editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor && editorLangId == 'html' which only adds the && editorLangId == 'html' section to ensure this is only active whilst inside an html document.

You may also want to add || editorLangId == 'css' to that when condition as well if you have this issue for css. The same things apply.

Do note that this unfortunately as far as I can tell does not allow for partial document formatting as might be relevant if you work in a large group of people. It also will not respect ignore files, so if these matter to you this is a partial fix.

That being said, as a bonus, if you leave it as your default html formatter, now you wont get that error message, and you can still use features like formatting on save. Quite a bang up workaround.

score 0 · Answer 23 · answered Aug 28 '23 at 11:56

To update the default HTML formatter in Visual Studio Code (VS Code), follow these steps:

Open Settings: Press Ctrl + , (Comma) or navigate to File > Preferences > Settings(JSON).

Edit JSON Settings: Locate the relevant section, such as [html], where you can set the default HTML formatter. Replace it with the following code:

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

Save Changes: After making the edits, save the JSON file by clicking the disk icon in the top-right corner of the JSON editor or pressing Ctrl + S.

score -1 · Answer 24 · answered Aug 03 '20 at 06:29

-1

One of my peers installed the following into the workspace vscode:

"prettier.disableLanguages": ["html"],

That would do it.

answered Aug 03 '20 at 06:29

KenF

544
4
14

score -1 · Answer 25 · answered Jul 16 '21 at 16:27

Use This as your config

"prettier.singleQuote": true,
    "prettier.useEditorConfig": false,
    "prettier.useTabs": true,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

score -1 · Answer 26 · answered Aug 09 '21 at 19:08

-1

  "[Html]": {
    //"editor.defaultFormatter": "vscode.html-language-features"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  this work for me

answered Aug 09 '21 at 19:08

Eduardo

1

score -1 · Answer 27 · answered Aug 26 '21 at 02:16

-1

Try restarting VS Code

I've had Prettier stop formatting things when VS Code prompted me to restart to update. Closing and opening VS Code got it working again.

answered Aug 26 '21 at 02:16

jdgregson

1,457
17
39

Prettier not formatting HTML files in VS Code

27 Answers27

Try restarting VS Code