VSCode Prettier Extension vs Command Line Prettier - visual-studio-code

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 prettier#1.16.3, 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.