Zum Hauptinhalt springen

Prettier 3.8: Unterstützung für Angular v21.1

· 3 Min. Lesezeit
Fisker Cheung
Fisker Cheung
Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Wir freuen uns, bekannt geben zu können, dass Prettier jetzt die neuen Funktionen von Angular v21.1 vollständig unterstützt (heute veröffentlicht 🎉)!

Dieses Update bringt sauberere, ausdrucksstärkere Templates mit:

  • Aufeinanderfolgenden @case-Statements in @switch-Blöcken.

  • Spread-Elementen (...) in Array-Literalen, Objekt-Literalen und Funktionsaufrufen innerhalb von Templates.

Wir haben außerdem die Möglichkeit hinzugefügt, Angular-Syntax in Markdown-Codeblöcken ansprechend zu formatieren.

Wenn Du Prettier wertvoll findest und uns helfen möchtest, mit schnelllebigen Frameworks wie Angular Schritt zu halten, erwäge bitte uns über OpenCollective zu sponsern oder die Projekte zu unterstützen, von denen wir abhängen. Danke, dass Du Teil dieser Community bist – Deine Unterstützung bedeutet uns sehr viel!

Höhepunkte​

Angular​

Unterstützung für aufeinanderfolgende Switch-Cases (#18593 von @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>
  }
}

Unterstützung für Spread-Elemente (#18596, #18636 von @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)"
/>

Weitere Änderungen​

Angular​

Druckt Attributwerte, die einfache Template- oder String-Literale sind, nicht in neuen Zeilen (#18378 von @ravindUwU)​

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

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

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

Markdown​

Unterstützung für Formatierung von Angular-Syntax in Codeblöcken (#18519 von @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>
```