Prettier 3.8：支持 Angular v21.1

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

我们激动地宣布，Prettier 现已全面支持 Angular v21.1 中的最新功能（今日发布 🎉）！

本次更新带来了更简洁、更具表现力的模板功能：

• 在 @switch 代码块中支持连续的 @case 语句

• 模板内的数组字面量、对象字面量和函数调用中支持展开元素 (...)

我们还新增了在 Markdown 代码块中美化 Angular 语法的功能

如果您认为 Prettier 很有价值，并希望帮助我们跟上 Angular 等快速发展框架的步伐，请考虑在 OpenCollective 赞助我们或支持我们依赖的项目。感谢您成为社区一员——您的支持意义重大！

重要更新

Angular

支持连续的 switch case (#18593 by @fisker)

<!-- Input -->
@switch (userRole) {
  @case ('admin')
  @case ('moderator') {
    <p>Welcome, boss! Full access.</p>
  }
  @case ('user') { <p>Standard access</p> }
  @default { <p>Guest view</p> }
}

<!-- Prettier 3.7 -->
SyntaxError: Incomplete block "case". If you meant to write the @ character, you should use the "&#64;" HTML entity instead. (2:3)

<!-- Prettier 3.8 -->
@switch (userRole) {
  @case ("admin")
  @case ("moderator") {
    <p>Welcome, boss! Full access.</p>
  }
  @case ("user") {
    <p>Standard access</p>
  }
  @default {
    <p>Guest view</p>
  }
}

支持展开元素 (#18596, #18636 by @fisker)

<!-- Input -->
<MyComponent
  [array]="[   ...foo, ...bar]"
  [object]="{...bar, ...extra  }"
  [call]="call(  ...baz)"
/>

<!-- Prettier 3.7 -->
<MyComponent
  [array]="[   ...foo, ...bar]"
  [object]="{...bar, ...extra  }"
  [call]="call(  ...baz)"
/>

<!-- Prettier 3.8 -->
<MyComponent
  [array]="[...foo, ...bar]"
  [object]="{ ...bar, ...extra }"
  [call]="call(...baz)"
/>

其他变更

Angular

避免将单一模板或字符串字面量的属性值打印到新行 (#18378 by @ravindUwU)

<!-- Input -->
<component
  [property]="`
    template
    literal
  `"
/>

<!-- Prettier 3.7 -->
<component
  [property]="
    `
    template
    literal
  `
  "
/>

<!-- Prettier 3.8 -->
<component
  [property]="`
    template
    literal
  `"
/>

Markdown

支持在代码块中格式化 Angular 语法 (#18519 by @fisker)

<!-- Input -->
```angular-ts
@Component({
  selector: 'app-root',
  template: `<div
>Welcome to {{
  Angular}}! </div>`,
})
export class App {}
```

```angular-html
<div
>Welcome to {{
  Angular}}! </div>
```

<!-- Prettier 3.7 -->
Same as input

<!-- Prettier 3.8 -->
```angular-ts
@Component({
  selector: "app-root",
  template: `<div>Welcome to {{ Angular }}!</div>`,
})
export class App {}
```

```angular-html
<div>Welcome to {{ Angular }}!</div>
```