Prettier 3.8: Soporte para Angular v21.1

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

¡Nos complace anunciar que Prettier ahora es compatible con las nuevas características de Angular v21.1 (¡publicadas hoy 🎉)!

Esta actualización ofrece plantillas más limpias y expresivas con:

• Declaraciones @case consecutivas en bloques @switch.

• Elementos de propagación (...) en literales de array, literales de objeto y llamadas a funciones dentro de plantillas.

También hemos añadido la capacidad de formatear sintaxis de Angular de manera elegante dentro de bloques de código Markdown.

Si encuentras Prettier valioso y quieres ayudarnos a mantener el ritmo de marcos de trabajo que evolucionan rápidamente como Angular, por favor considera patrocinarnos en OpenCollective o apoyar los proyectos de los que dependemos. ¡Gracias por ser parte de esta comunidad — tu apoyo significa mucho!

Destacados

Angular

Soporte para casos consecutivos de switch (#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>
  }
}

Soporte para elementos de propagación (#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)"
/>

Otros cambios

Angular

No imprimir valores de atributos que sean literales de plantilla o cadena en líneas nuevas (#18378 by @ravindUwU)

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

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

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

Markdown

Soporte para formatear sintaxis de Angular en bloques de código (#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>
```