Saltar al contenido principal

Prettier 2.8: mejoras en la opción CLI --cache y soporte para el operador satisfies de TypeScript 4.9!

· 7 min de lectura
Sosuke Suzuki
Sosuke Suzuki
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 →

Esta versión incluye mejoras en la opción --cache añadida en la 2.7. Se ha agregado una nueva opción --cache-location y se corrigió un error que guardaba la caché incluso cuando no se especificaba --write.

¡También añadimos soporte para el operador satisfies de TypeScript 4.9!

Si disfrutas usando Prettier y quieres apoyar nuestro trabajo, considera patrocinarnos directamente a través de nuestro OpenCollective o patrocinando los proyectos de los que dependemos, incluyendo typescript-eslint, remark y Babel.

El equipo de Prettier planea lanzar la versión 3.0 en los próximos meses. Si eres desarrollador de plugins, prepárate para la migración. Consulta la guía de migración y el issue #13606 para más información.

Destacados​

TypeScript​

Soporte para el operador satisfies de TypeScript 4.9 (#13764, #13783, #13872 por @sosukesuzuki)​

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;

Los Auto-Accessors en Clases serán compatibles en un próximo parche de la versión 2.8. Por ahora los hemos excluido del alcance para lanzar antes el soporte del operador satisfies.

CLI​

No guardar la caché si no se especificó la opción --write (#13016 por @Milly)​

# Prettier 2.7
$ prettier --cache foo.js
# This shows formatted contents of `foo.js`.
# Then cache is created and `foo.js` is flagged as already formatted.

$ prettier --cache --write foo.js
foo.js 2ms (cached)
# "... (cached)" means the file is already formatted, so nothing is done this time.

# Prettier 2.8
$ prettier --cache foo.js
# Show formatted contents of `foo.js`.

$ prettier --cache --write foo.js
foo.js 2ms
# `foo.js` is formatted now.

Añadir opción --cache-location (#13019 por @sosukesuzuki)​

Por defecto, la CLI de Prettier guarda el archivo de caché para la opción --cache en ./node_modules/.cache/prettier/.prettier-cache. Ahora esto se puede modificar:

prettier --write --cache --cache-location=my_cache_file src

Otros cambios​

JavaScript​

Corrección en el análisis de docblocks (#13054 por @fisker)​

// With `--insert-pragma` flag

// Input
/* comment */
foo()

// Prettier 2.7
/**
 * /* comment
 *
 * @format
 */

foo();

// Prettier 2.8
/**
 * comment
 *
 * @format
 */

foo();

Corrección en formato de rangos para cuerpos de funciones (#13173 por @thorn0)​

// Input
let fn = (() => {
  return; //
//^^^^^^^^^^ - range
});

// Prettier 2.7
let fn = (() => {
  return; //
};);

// Prettier 2.8
let fn = (() => {
  return; //
});

Corrección en formato inconsistente para cadenas multilínea (#13274 por @GlebDolzhikov)​

// Input
const loremIpsumFooBazBar1 = 'Multiline string\
         Multiline string\
'

const loremIpsumFooBazBar2 = 'Multiline string\
         Multiline string\
         Multiline string'

// Prettier 2.7
const loremIpsumFooBazBar1 = "Multiline string\
         Multiline string\
";

const loremIpsumFooBazBar2 =
  "Multiline string\
         Multiline string\
         Multiline string";

// Prettier 2.8
const loremIpsumFooBazBar1 =
  "Multiline string\
         Multiline string\
";

const loremIpsumFooBazBar2 =
  "Multiline string\
         Multiline string\
         Multiline string";

TypeScript​

Corrección de paréntesis en tipos de retorno inferidos con extends (#13289 por @GlebDolzhikov)​

// Input
type Foo<T> = T extends (...a: any[]) => (infer R extends string) ? R : never;

// Prettier 2.7
type Foo<T> = T extends (...a: any[]) => infer R extends string ? R : never;

// Prettier 2.8
type Foo<T> = T extends ((...a: any[]) => infer R extends string) ? R : never;

CSS​

Corregir el formato de selectores largos :is, :where y :not (#13577 por @j-f1)​

Los pseudoselectores como :is, :where y :not, que pueden recibir múltiples selectores como argumentos, ahora se formatean como llamadas a funciones en otros lenguajes. Anteriormente, las comas entre sus "argumentos" no tenían un tratamiento especial, lo que generaba comportamientos de ajuste confusos. Es probable que aún haya margen de mejora aquí: por favor abre un issue con código de ejemplo si encuentras algo que no se vea como esperas.

/* Input */
:where(
  label > input:valid,
  label > textarea:not(:empty),
  label > button[disabled]
) ~ .errors > .error { display: none; }

/* Prettier 2.7 */
:where(label > input:valid, label > textarea:not(:empty), label
    > button[disabled])
  ~ .errors
  > .error {
  display: none;
}

/* Prettier 2.8 */
:where(
    label > input:valid,
    label > textarea:not(:empty),
    label > button[disabled]
  )
  ~ .errors
  > .error {
  display: none;
}

SCSS​

Corregir: espacio extra entre '#' y '{' (#13286 por @jspereiramoura)​

// Input
padding: var(--spacer#{(1) + 2});

// Prettier 2.7
padding: var(--spacer# {(1) + 2});

// Prettier 2.8
padding: var(--spacer#{(1) + 2});

Angular​

Insertar espacios en tuberías (pipes) (#13100 por @sosukesuzuki)​

<!-- Input -->
<tui-line-chart
  [value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>

<!-- Prettier 2.7 -->
<tui-line-chart
  [value]="chart | tuiFilter: filter:range | tuiMapper: toNumbers:range"
></tui-line-chart>

<!-- Prettier 2.8 -->
<tui-line-chart
  [value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>

Ember / Handlebars​

Formatear correctamente bloques personalizados "else if" (#13507 por @jamescdavis)​

Una transformación de plantilla puede usarse para crear palabras clave de bloque personalizadas que se comportan como if. Esta actualización mejora printer-glimmer para reconocer y formatear correctamente el caso "else if" cuando "if" es una palabra clave personalizada.

{{! Input }}
{{#when isAtWork}}
  Ship that code!
{{else when isReading}}
  You can finish War and Peace eventually...
{{else}}
  Go to bed!
{{/when}}

{{! Prettier 2.7 }}
{{#when isAtWork}}
  Ship that code!
{{else}}{{#when isReading}}
    You can finish War and Peace eventually...
  {{else}}
    Go to bed!
  {{/when}}{{/when}}

{{! Prettier 2.8 }}
{{#when isAtWork}}
  Ship that code!
{{else when isReading}}
  You can finish War and Peace eventually...
{{else}}
  Go to bed!
{{/when}}

Markdown​

Conservar saltos de línea en código en línea si --prose-wrap=preserve (#11373 por @andersk)​

<!-- Input -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.

<!-- Prettier 2.7 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor incididunt` ut labore et dolore magna aliqua.

<!-- Prettier 2.8 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.

MDX​

Mejorar soporte para ignorar rangos en MDX (#12208 por @nickrttn)​

Añade soporte para usar directivas ignorar rangos de Markdown en MDX usando comentarios JSX.

// Input
{/* prettier-ignore-start */}

export const Hello = () => {
  return (<p>
  Hello</p>)
}

{/* prettier-ignore-end */}

// Prettier 2.7 (throws an error)
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 2.8
{/* prettier-ignore-start */}

export const Hello = () => {
  return (<p>
  Hello</p>)
}

{/* prettier-ignore-end */}

API​

Modo "Doc Explorer" para el Playground (#10183 por @thorn0)​

Cambia la opción parser al valor especial doc-explorer para experimentar con la representación intermedia de Prettier y ver cómo se imprime con diferentes opciones.

Corregir problema en la impresión de documentos al usar ifBreak dentro de group (#12362 por @fisker)​

// Input
//                                                                              |80
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}

// Prettier 2.7
for (const number of [
  123_123_123, 123_123_123, 123_123_123, 123_123_123, 12,
]) {
}

// Prettier 2.8
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}

Casilla "Relanzar errores embebidos" en el Playground (#13227 por @thorn0)​

Anteriormente, el comportamiento del Playground era inconsistentemente confuso comparado con Prettier local porque mostraba errores de análisis en lenguajes embebidos con fines de depuración. Ahora este comportamiento se controla con una casilla y está desactivado por defecto.

CLI​

Inferir parser para .lintstagedrc (#13081 por @OrRosenblatt)​

Un archivo .lintstagedrc (sin extensión) se procesa usando los parsers json y yaml.