Wrong @if @for intendation with newest Prettier with angular17 and VS Code

Question

Using latest prettier with the following prettierrc file:

{
 "arrowParens": "always",
 "bracketSameLine": true,
 "bracketSpacing": true,
 "semi": true,
 "experimentalTernaries": false,
 "singleQuote": false,
 "jsxSingleQuote": false,
 "quoteProps": "as-needed",
 "trailingComma": "all",
 "singleAttributePerLine": false,
 "htmlWhitespaceSensitivity": "css",
 "vueIndentScriptAndStyle": false,
 "proseWrap": "preserve",
 "insertPragma": false,
 "printWidth": 150,
 "requirePragma": false,
 "tabWidth": 3,
 "useTabs": false,
 "embeddedLanguageFormatting": "auto",
 "overrides": [
 {
 "files": "*.html",
 "options": {
 "parser": "angular"
 }
 },
 {
 "files": ".prettierrc",
 "options": {
 "parser": "json"
 }
 }
 ]
}

Added also for html file the angular parser and in the prettier playground everything is working but with my vscode not. Reinstalled also prettier.

Getting this in VS Code:

@if(variableTitles().length >= 1) {
<div>
 @if(variableTitles().length >= 1) {
 <p>sdfdf</p>
 }
</div>
}

Expacted this:

@if (variableTitles().length >= 1) {
 <div>
 @if (variableTitles().length >= 1) {
 <p>sdfdf</p>
 }
 </div>
}

What did i wrong, any ideas?

• D M: Does this answer your question? Indentation with Angular 17 new control flow in VS Code
• D M: Your .prettierrc file looks correct. Are you using Prettier v3.1 or newer?
• D M: Here's the issue in the Prettier repo: github.com/prettier/prettier/issues/14991

Answer 1

Thx for the answer and the hint to indentation-with-angular-17-new-control-flow-in-vs-code

I added prettier in the project. Thought that the extension is using the newest prettier but that was not the case.