Hoppa till huvudinnehållet

Prettier 3.8: Stöd för Angular v21.1

· 3 min att läsa
Fisker Cheung
Fisker Cheung
Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Vi är glada att kunna meddela att Prettier nu har fullt stöd för de nya funktionerna i Angular v21.1 (som släpptes idag 🎉)!

Denna uppdatering ger renare och mer uttrycksfulla mallar med:

  • Flera på varandra följande @case-uttryck i @switch-block.

  • Spridningselement (...) i arrayliteraler, objektliteraler och funktionsanrop inuti mallar.

Vi har också lagt till möjligheten att formatera Angular-syntax vackert inuti Markdown-kodblock.

Om du tycker Prettier är värdefullt och vill hjälpa oss hålla jämna steg med snabbrörliga ramverk som Angular, överväg att sponsra oss via OpenCollective eller stötta de projekt vi förlitar oss på. Tack för att du är en del av detta community — ditt stöd betyder mycket!

Höjdpunkter​

Angular​

Stöd för flera på varandra följande switch-fall (#18593 av @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>
  }
}

Stöd för spridningselement (#18596, #18636 av @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)"
/>

Andra ändringar​

Angular​

Skriv inte attributvärden som är enkla mall- eller strängliteraler på nya rader (#18378 av @ravindUwU)​

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

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

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

Markdown​

Stöd för formatering av Angular-syntax i kodblock (#18519 av @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>
```