VSCode中是否有支持Angular新控制流内容缩进的格式化工具？

算力阿峰

2026-6-27

Angular 17 新控制流语法缩进格式化解决办法

目前的问题

Angular 17推出的内置控制流语法（@if、@for这类）比旧写法简洁很多，尤其是@for的性能比*ngFor提升明显，但现在VSCode里常用的格式化工具——不管是Prettier、停更的Angular格式化工具还是标准HTML格式化工具——都不支持自动缩进控制流块里的内容，导致模板排版挤成一团，比如：

<out-of-flow-content></out-of-flow-content>
@for (item of items; track item.id){
<inner-content-1></inner-content-1>
}
<out-of-flow-content-2></out-of-flow-content-2>

可尝试的方案

1. 升级Angular官方扩展

确保安装并更新到最新版的Angular Language Service扩展，官方一直在迭代对新控制流语法的支持，当前部分版本已经能处理@if/@for块内的自动缩进：

将扩展更新至最新版本
在VSCode设置中把editor.defaultFormatter设置为Angular.ng-template
按Ctrl+Shift+I手动触发格式化测试效果

2. Prettier临时适配配置（效果有限）

如果依赖Prettier，可以在项目根目录创建.prettierrc文件，添加以下临时配置（属于非官方hack，不保证完美适配）：

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