Configuring Prettier for HTML files

Question

I've looked at Prettier's docs and have done a bunch of searches, but can't figure out how to configure angular html files the way I want. I want the elements to be on one line if it doesn't exceed the maximum characters for one line, but if it does exceed the max, then I want only one attribute per line, like you see below.

Desired formatting:

<app-example-component [attribute1]="attribute1"></app-example-component>

<app-example-component
  [attribute1]="attribute1"
  [attribute2]="attribute2"
  [attribute3]="attribute3"
  [attribute4]="attribute4"
></app-example-component>

This is what I am currently getting, and I find it to be difficult to read:

<app-example-component [attribute1]="attribute1" [attribute2]="attribute2"
  [attribute3]="attribute3" [attribute4]="attribute4"
  [attribute3]="attribute3" [attribute4]="attribute4"
  [attribute3]="attribute3"></app-example-component>

I am using VS Code and recently converted my Angular project to use ESLint instead of TSLint, but I wasn't using Prettier prior to that, so I don't know if that conversion is causing issues.

Here is my .eslintrc.json file. Maybe this is breaking Prettier for me somehow?

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@typescript-eslint/consistent-type-definitions": "error",
        "@typescript-eslint/dot-notation": "off",
        "@typescript-eslint/explicit-member-accessibility": [
          "off",
          {
            "accessibility": "explicit"
          }
        ],
        "id-blacklist": "off",
        "id-match": "off",
        "no-underscore-dangle": "off"
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

Code/User/settings.jsons:

{
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "html.format.endWithNewline": true,
  "editor.linkedEditing": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Answer 1

Actually, the prettier works exactly as you described the desired solution. You can easily check it in the playground. Are you sure that html files are added to the prettier configuration of your IDE? Because usually by default, it's turned on only for js, ts, jsx, tsx files as far as I know.

So, check your .vscode/settings.json to contain next lines:

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

Update:

This is your problem I think.

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

Your code is not formatted according to the prettier rules.

Change this to

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

as I've mentioned above

Update 2:

Also please check your "parser" option for the prettier configuration file. As long as you use prettier for multiple different files it should not be added on the top-level config. See documentation regarding this here. In your case, it's allowed only inside "overrides"