Saltar al contenido principal

Prettier 2.5: ¡Sintaxis de comentarios de TypeScript 4.5 y MDX v2!

· 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 añade soporte para la nueva sintaxis de TypeScript 4.5 y la sintaxis de comentarios de MDX v2!

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​

Evitar desplazamiento adicional en el cuerpo de funciones flecha al usar tipos largos (#11515 por @kachkaev y @thorn0)​

A partir de Prettier 2.3.0, las declaraciones de tipo en funciones flecha podían afectar la indentación del cuerpo de la función. Cambiar la longitud de la anotación de tipo podía producir grandes diferencias (diffs) y, por lo tanto, aumentar la posibilidad de conflictos en git. Para prevenir esto, se estabilizó el desplazamiento del cuerpo de la función.
Nota: Este cambio puede afectar un gran número de líneas en tu base de código.

// Input
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.2 and below
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({
  x,
  y,
}) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.4
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> =
  ({ x, y }) => {
    const a = useA();
    return <div>{x + y + a}</div>;
  };

// Prettier 2.5
const MyComponentWithLongName: React.VoidFunctionComponent<
  MyComponentWithLongNameProps
> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

Soporte para TypeScript 4.5 (#11721, #11723, #11813 por @sosukesuzuki)​

Hemos añadido soporte para las nuevas características de sintaxis de TypeScript 4.5:

Modificadores type en nombres de importación​
// Example
import { type A } from "mod";

Comprobaciones de presencia de campos privados​
// Example
class Foo {
  #prop1;
  method() {
    return #prop1 in this;
  }
}

Aserciones de importación​
// Example
import obj from "./something.json" assert { type: "json" };

Manejo de .mts y .cts​

Prettier ahora formateará archivos con extensiones .mts y .cts como TypeScript.

HTML​

Colapsar los atributos class de HTML en una sola línea (#11827 por @jlongster)​

Revierte #7865.

Si bien esto estaba destinado a ser útil para usuarios de bibliotecas CSS como Tailwind que tienden a resultar en un gran número de clases en los elementos, quedó claro que nuestras heurísticas sobre dónde dividir la lista de clases en múltiples líneas no podían producir resultados consistentemente buenos. Todavía estamos considerando mejores maneras de formatear HTML con muchas clases — considera discutir con nosotros.

<!-- Input -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

<!-- Prettier 2.4 -->
<div
  class="
    SomeComponent__heading-row
    d-flex
    flex-column flex-lg-row
    justify-content-start justify-content-lg-between
    align-items-start align-items-lg-center
  "
></div>

<!-- Prettier 2.5 -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

MDX​

Añadir soporte para la sintaxis de comentarios de MDX v2 (#11563 por @wooorm)​

Esto añade soporte básico para la sintaxis de comentarios de MDX v2 (comentarios estilo JavaScript) además del soporte existente para la sintaxis de comentarios de MDX v1 (comentarios estilo HTML).

Nota: Actualmente Prettier solo admite la nueva sintaxis de comentarios para comentarios de una línea (para que se pueda usar {/* prettier-ignore */}), y no admite el resto de MDX v2.

Input:
{/*A comment*/}

Prettier 2.4:
{/_A comment_/}

Prettier 2.5:
{/*A comment*/}

Otros cambios​

JavaScript​

Corregir paréntesis en expresiones de secuencia como cuerpo de cadenas de funciones flecha (#11593 por @bakkot)​

Ahora se conservan los paréntesis necesarios alrededor de las expresiones de secuencia cuando son el cuerpo de funciones flecha encadenadas. Anteriormente, Prettier los eliminaba, lo que resultaba en sintaxis inválida.

// Input
const f = () => () => (0, 1);

// Prettier 2.4
const f = () => () => 0, 1;

// Prettier 2.5
const f = () => () => (0, 1);

Ignorar errores de sintaxis en modo no estricto (#11750 por @fisker, #11778 por @sosukesuzuki)​

El modo estricto de JavaScript añade varios errores útiles para prevenir errores. Algunos de estos errores son errores de sintaxis que ocurren durante el análisis. Dado que el objetivo de Prettier es formatear todo código JavaScript sintácticamente válido, independientemente de si se ejecutará realmente, hemos optado por dejar esta verificación de errores a linters, compiladores y el entorno de ejecución.

// Input
function foo() { var bar = 1; delete bar; }

// Prettier 2.4
SyntaxError: Deleting local variable in strict mode. (1:31)
> 1 | function foo() { var bar = 1; delete bar; }
    |                               ^

// Prettier 2.5
function foo() {
  var bar = 1;
  delete bar;
}

Respetar espacios entre expresiones y paréntesis en CSS incrustado (#11800 por @sosukesuzuki)​

// Input
const paragraph2 = css`
  transform1: ${expr}(30px);
  transform2: ${expr} (30px);
`;

// Prettier 2.4
const paragraph2 = css`
  transform1: ${expr} (30px);
  transform2: ${expr} (30px);
`;

// Prettier 2.5
const paragraph2 = css`
  transform1: ${expr}(30px);
  transform2: ${expr} (30px);
`;

Admitir sintaxis de campos privados en clases ES2022 en el analizador espree (#11835 por @fisker)​

// Example
class Foo {
  #brand;
  static isC(obj) {
    return #brand in Foo;
  }
}

TypeScript​

Eliminar paréntesis innecesarios para decoradores (#11717, #11849 por @sosukesuzuki)​

// Input
class Test {
  @foo`bar`
  test1: string = "test"

  @test().x("global").y()
  test2: string = "test";
}

// Prettier 2.4
class Test {
  @(foo`bar`)
  test: string = "test"

  @(test().x("global").y())
  test2: string = "test";
}

// Prettier 2.5
class Test {
  @foo`bar`
  test: string = "test"

  @test().x("global").y()
  test2: string = "test";
}

SCSS​

Mejorar formato de @use with (#11637 por @sosukesuzuki)​

// Input
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem,
  $font-family: 'Helvetica, sans-serif'
);

// Prettier 2.4
@use "library" with
  ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif");

// Prettier 2.5
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem,
  $font-family: 'Helvetica, sans-serif'
);

Corregir error de formato en @forward with (#11683 por @sriramarul, @sosukesuzuki)​

// Input
@forward 'foo.scss' with ($components: red);

// Prettier 2.4
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 2.5
@forward "foo.scss" with (
  $components: red
);

Ember / Handlebars​

Usar tipo de comilla opuesto para comillas dentro de declaraciones mustache en atributos (#11524 por @bmaehr)​

{{!-- Input --}}
<div title="{{t 'login.username.description'}}" />

{{!-- Prettier 2.5 --}}
<div title="{{t 'login.username.description'}}" />

{{!-- Prettier 2.4 --}}
<div title="{{t "login.username.description"}}" />

Markdown​

Conservar comas finales para parámetros de tipo en TSX incrustado (#11685 por @sosukesuzuki)​

La coma final es necesaria para evitar que TypeScript interprete el <T> como el inicio de una expresión JSX.

<!-- Input  -->
```tsx
const test = <T,>(value: T) => {};
```

<!-- Prettier 2.4 -->
```tsx
const test = <T>(value: T) => {};
```

<!-- Prettier 2.5 -->
```tsx
const test = <T,>(value: T) => {};
```