VSCode Prettier Extension vs Command Line Prettier

Question

I have an issue where HTML file formatting in VSCode, "on-save", is different than Prettier's formatting when using the command line.

My user settings (changing these values doesn't seem to make any difference):

{
    "[html]": {
        "editor.formatOnSave": true
    },
    "prettier.eslintIntegration": false,
    "html.format.enable": false
}

When I run Prettier from the command line, my HTML gets formatted like this:

prettier --write "./src/app/my-file.html"

my-file.html:

<a ng-hide="$last" href="" ng-click="doThis(thing)"
  >{{ crumb.title }}</a
>

The same code when I save the file in VSCode (allowing the Prettier extension to do the formatting):

<a ng-hide="$last" href="" ng-click="doThis(thing)">{{
  crumb.title
}}</a>

I know the extension is installed and working, because I see this icon in the bottom right hand side of the screen:

And, when I hover over this icon, I see a tooltip that says [email protected], the same version I have installed on the command line prettier -v

Why am I getting different results with these 2 methods? I have not altered any settings, other than the above

Answer 1

I needed to create a .prettierrc file with the following contents:

{
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ]
}

The command line was using the html parser, while VSCode was using the angular parser. This way they are both using the same parser for .html files.