Saltar al contenido principal

Prettier 2.4: ¡nueva opción bracketSameLine y soporte para TypeScript 4.4!

· 5 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 renombra la opción jsxBracketSameLine como bracketSameLine, que ahora soporta HTML, Vue y Angular además de JSX. El nombre anterior ha quedado obsoleto.

También hemos añadido soporte para TypeScript 4.4, incluyendo nuevas características sintácticas como los bloques static en clases.

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.

Destacados​

TypeScript​

Soporte para TypeScript 4.4 (#11426 por @sosukesuzuki)​

¡Soporte para TypeScript 4.4!

Bloques static en clases​

La sintaxis de Bloques Estáticos en Clases es una propuesta ECMAScript en Etapa 4. Consulta https://github.com/tc39/proposal-class-static-block para más detalles.

// Input
class Foo {
  static count = 0;

  // This is a static block:
  static {
    if (someCondition()) {
      Foo.count++;
    }
  }
}

// Prettier 2.3
SyntaxError: Declaration expected. (5:9)
  3 |
  4 |   // This is a static block:
> 5 |   static {
    |         ^
  6 |     if (someCondition()) {
  7 |       Foo.count++;
  8 |     }

// Prettier 2.4
class Foo {
  static count = 0;

  // This is a static block:
  static {
    if (someCondition()) {
      Foo.count++;
    }
  }
}

HTML​

Reemplazo de la opción jsxBracketSameLine por bracketSameLine (#11006 por @kurtztech)​

La opción jsxBracketSameLine queda obsoleta en favor de la nueva opción bracketSameLine, que funcionará para HTML, Angular, Vue y JSX.

<!-- Input -->
<div id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz">lorem ipsum dolor sit amet</div>

<!-- Prettier 2.3 -->
<div
  id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz"
>
  lorem ipsum dolor sit amet
</div>

<!-- Prettier 2.4 -->
<!-- Options: `{bracketSameLine: true}` -->
<div
  id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz">
  lorem ipsum dolor sit amet
</div>

Otros cambios​

JavaScript​

Soporte para literales de plantilla etiquetados entre paréntesis en componentes estilizados (#11246 por @sosukesuzuki)​

// Input
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position:   fixed;
  color: red;
  `;

// Prettier 2.3
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position:   fixed;
  color: red;
  `;

// Prettier 2.4
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position: fixed;
    color: red;
  `;

Conteo correcto de literales regex en argumentos de cadenas de métodos (#11299 por @sosukesuzuki)​

// Input
foo1(/𠮟𠮟𠮟/).foo2(bar).foo3(baz);

foo1(/叱叱叱/).foo2(bar).foo3(baz);

// Prettier 2.3
foo1(/𠮟𠮟𠮟/)
  .foo2(bar)
  .foo3(baz);

foo1(/叱叱叱/).foo2(bar).foo3(baz);

// Prettier 2.4
foo1(/𠮟𠮟𠮟/)
  .foo2(bar)
  .foo3(baz);

foo1(/叱叱叱/)
  .foo2(bar)
  .foo3(baz);

Soporte para la propuesta de tuberías estilo Hack (#11335 por @sosukesuzuki)​

La propuesta de sintaxis de tuberías estilo Hack ahora está soportada en Prettier. Usamos % como token de tema, siguiendo la documentación oficial —aunque esto podría cambiar en futuras versiones según avance la propuesta.

Como parte de este cambio, se ha eliminado el soporte para la sintaxis de tuberías "inteligentes". Consulta nuestra política sobre sintaxis no estandarizada para conocer la razón detrás de esta decisión.

// Input
const foo = fn() |> fn1(%) |> fn2(%);

// Prettier 2.3
SyntaxError: Unexpected token (1:25)
> 1 | const foo = fn() |> fn1(%) |> fn2(%);
    |                         ^
  2 |

// Prettier 2.4
const foo = fn() |> fn1(%) |> fn(%);

TypeScript​

Corrección al formatear tipos de intersección que incluyen tipos mapeados (#11247 por @sosukesuzuki)​

// Input
type Example = {
  [A in B]: T;
} & {
  [A in B]: T;
};

// Prettier 2.3
type Example = {
  [A in B]: T;
} &
  {
    [A in B]: T;
  };

// Prettier 2.4
type Example = {
  [A in B]: T;
} & {
  [A in B]: T;
};

Flow​

Incluir siempre un punto y coma antes de los modificadores de varianza en Flow (#11398 por @noppa)​

// Input
class A {
  +one = function() {};
  -two = val();
  +#privOne = val();
  static +#privTwo = val();
}
// Prettier 2.3
class A {
  +one = function() {}
  -two = val()
  +#privOne = val()
  static +#privTwo = val()
}
// Prettier 2.4
class A {
  +one = function() {};
  -two = val();
  +#privOne = val()
  static +#privTwo = val()
}

SCSS​

Usar comillas consistentemente en cadenas de módulos Sass (#11461 por @niksy)​

// Input
@use "sass:math";
@forward "list";

// Prettier 2.3
@use "sass:math";
@forward "list";

// Prettier 2.4
@use 'sass:math';
@forward 'list';

CLI​

Inferir el parser para .stylelintrc (#10924 por @SevenOutman)​

Los archivos .stylelintrc (sin extensión) se procesan utilizando los parsers json y yaml.