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.

Answer 1

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

Answer 2

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 (Cntr+, 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.

Answer 3

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

Hope that helps!

Answer 4

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:

Answer 5

Short Answer:

1. open Prettier from the button on right bottom corner
2. scroll up to see error list.
3. 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.

Answer 6

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

Answer 7

This is what worked for me.

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

...

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

...

Answer 8

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.

Answer 9

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.

Answer 10

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

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

That would do it.

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

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

Answer 15

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.