Aller au contenu principal

Prettier 3.8 : Prise en charge d'Angular v21.1

· 3 minutes de lecture
Fisker Cheung
Fisker Cheung
Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Nous sommes ravis d'annoncer que Prettier prend désormais pleinement en charge les nouvelles fonctionnalités d'Angular v21.1 (sortie aujourd'hui 🎉) !

Cette mise à jour permet d'obtenir des templates plus propres et expressifs grâce à :

  • Les instructions @case consécutives dans les blocs @switch.

  • Les éléments spread (...) dans les littéraux de tableaux, les littéraux d'objets et les appels de fonction à l'intérieur des templates.

Nous avons également ajouté la possibilité de formater élégamment la syntaxe Angular dans les blocs de code Markdown.

Si vous trouvez Prettier utile et souhaitez nous aider à suivre le rythme des frameworks évoluant rapidement comme Angular, envisagez de nous sponsoriser sur OpenCollective ou de soutenir les projets dont nous dépendons. Merci de faire partie de cette communauté — votre soutien compte énormément !

Principales fonctionnalités​

Angular​

Prise en charge des cas consécutifs dans les instructions switch (#18593 par @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>
  }
}

Prise en charge des éléments spread (#18596, #18636 par @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)"
/>

Autres changements​

Angular​

Ne pas imprimer les valeurs d'attribut littéraux (template ou chaîne) sur de nouvelles lignes (#18378 par @ravindUwU)​

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

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

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

Markdown​

Prise en charge du formatage de la syntaxe Angular dans les blocs de code (#18519 par @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>
```