Angular 17与Prettier（^3.1）模板缩进异常问题求助

问题现象 #

升级Angular到17版本后，用Prettier 3.1格式化模板文件时，新控制流语法@if、@for的嵌套缩进未被正确处理。格式化后的代码无层级缩进：

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

期望的正确格式化结果应为：

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

解决步骤 #

1. 更新Prettier Angular插件 #

Angular 17的新控制流语法需要对应插件支持，安装最新版prettier-plugin-angular：

npm install --save-dev prettier-plugin-angular@latest
# 或使用yarn
yarn add -D prettier-plugin-angular@latest

2. 配置Prettier识别Angular模板 #

在项目根目录的Prettier配置文件（如.prettierrc、prettier.config.js）中，确保插件和解析器配置正确：

{
  "plugins": ["prettier-plugin-angular"],
  "overrides": [
    {
      "files": ["*.html"],
      "options": {
        "parser": "angular"
      }
    }
  ]
}

3. 重新格式化模板 #

运行格式化命令验证效果：

npx prettier --write src/**/*.html

原因说明 #

Angular 17引入的@if/@for等新控制流语法是新增特性，旧版本的Prettier Angular插件未适配该语法，导致无法正确识别嵌套结构并处理缩进。更新插件到兼容Angular 17的版本即可解决问题。

内容的提问来源于stack exchange，提问作者Matt.