VSCode Prettier 10.1.0 - doesn't work with angular Angular Control Syntax

[radek-vizlib]

I've set .prettierrc with:

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

as suggested in prettier/prettier#15833
But seems that it doesn't work with the VSCode extension.

As in PLAYGROUD LINK

Expected behavior:
INPUT:

@if (condition) { @if (anotherCondition) {
<div>ABC</div>
} } @else {
<div>DEF</div>
}

OUTPUT:

@if (condition) {
  @if (anotherCondition) {
    <div>ABC</div>
  }
} @else {
  <div>DEF</div>
}

But it doesn't work.

[akostmOR]

The same problem here, I needed to disable the plugin, with @switch I have the same behaviour. Horrible and really hard to read.

[Tucaen]

Another problem with the current VSCode Extension is:

Having something like this

@if (condition) {
    <div>ABC</div>
}

@if (anotherCondition) {
   <div>DEF</div>
} 

@if (thirdCondition) {
  <div>GHI</div>
}

results in

@if (condition) {
    <div>ABC</div>
} @if (anotherCondition) {
   <div>DEF</div>
} @if (thirdCondition) {
  <div>GHI</div>
}

In the prettier playground it works as expected.

[jonelleamio]

I use prettier inside eslint, so i tried this :

  {
      "files": ["*.component.html"],
      "extends": ["plugin:@angular-eslint/template/recommended", "plugin:prettier/recommended"],
      "rules": {
        "@angular-eslint/template/prefer-control-flow": "warn",
        "prettier/prettier": ["error", { "overrides": [{ "options": { "parser": "angular" } }] }]
      }
    }

which doesn't work
while this inside .prettierrc works

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

Can someone help ?

[radek-vizlib]

The root cause is here https://github.com/prettier/prettier-vscode?tab=readme-ov-file#prettier-version-3

This is workaround:
Add to devDependencies prettier that supports angular parser e.g. npm i prettier@3.2.5 -D
Then it will works as expected.

[tomasdev]

For anyone using a context without a package.json, you can do the following:

1. Enable "prettier.resolveGlobalModules": true in your VSCode settings.json
2. npm i -g prettier to install latest prettier globally, as of today that is 3.2.5
3. Ensure parser: angular in your prettier config as stated above.

This gave my .ng.html templates sooooo much better syntax than before.

[BojanKogoj]

For anyone using a context without a package.json, you can do the following:

1. Enable `"prettier.resolveGlobalModules": true` in your VSCode settings.json

2. `npm i -g prettier` to install latest prettier globally, as of today that is 3.2.5

3. Ensure `parser: angular` in your prettier config as stated above.

This gave my .ng.html templates sooooo much better syntax than before.

Tried all that, no change.

[gindyo]

For me it turned out I had a reference to old version of prettier in my dev dependencies in package.json I updated it to v3.2.5 and it is working as it should.