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>
```