Angular 17 和 Prettier 的缩进问题

Question

我最近将我的 Angular 项目升级到 Angular 17 并开始重构代码。但是，我在格式化模板时遇到了 Prettier（版本 ^3.1）的问题。 @if 和 @for 指令的缩进未正确处理。

例如，以下代码应该有适当的缩进，但 Prettier 对其进行了格式化，没有任何缩进：

@if(condition) {
@for(foo of data.foo; track foo) {
<div>{{foo}}</div>
}
}

这就是我想要的：

@if(condition) {
  @for(foo of data.foo; track foo) {
    <div>{{foo}}</div>
  }
}

Answer 1

将最新的 prettier 与以下 prettierrc 文件一起使用：

{
   "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"
         }
      }
   ]
}

还为 html 文件添加了角度解析器，并且在更漂亮的操场上一切正常，但我的 vscode 却不行。重新安装也更漂亮了。

我做错了什么，有什么想法吗？