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

Pop-A-Stash Pop-A-Stash · Accepted Answer · 2019-02-14T22:12:51

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.

VSCode Prettier Extension vs Command Line Prettier

1 Answers