Zum Hauptinhalt springen

Prettier 2.5: TypeScript 4.5 und MDX v2-Kommentarsyntax!

· 7 Min. Lesezeit
Sosuke Suzuki
Sosuke Suzuki
Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Dieses Release fügt Unterstützung für die neue Syntax von TypeScript 4.5 und die MDX v2-Kommentarsyntax hinzu!

Wenn Ihnen Prettier gefällt und Sie unsere Arbeit unterstützen möchten, erwägen Sie eine direkte Förderung über unser OpenCollective oder durch Unterstützung der Projekte, von denen wir abhängen, darunter typescript-eslint, remark und Babel.

Höhepunkte​

TypeScript​

Vermeidung von zusätzlichem Einzug im Rumpf von Pfeilfunktionen bei langen Typen (#11515 von @kachkaev und @thorn0)​

Ab Prettier 2.3.0 konnten Typdeklarationen in Pfeilfunktionen die Einrückung des Funktionsrumpfs beeinflussen. Änderungen der Länge der Typannotation konnten große Diffs erzeugen und damit die Wahrscheinlichkeit von Git-Konflikten erhöhen. Um dies zu verhindern, wurde der Einzug des Funktionsrumpfs stabilisiert.
Hinweis: Diese Änderung könnte viele Zeilen in Ihrer Codebasis betreffen.

// 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>;
};

Unterstützung für TypeScript 4.5 (#11721, #11723, #11813 von @sosukesuzuki)​

Wir haben Unterstützung für die neuen Syntax-Funktionen von TypeScript 4.5 hinzugefügt:

type-Modifikatoren bei Importnamen​
// Example
import { type A } from "mod";

Prüfungen auf Existenz privater Felder​
// Example
class Foo {
  #prop1;
  method() {
    return #prop1 in this;
  }
}

Import-Assertionen​
// Example
import obj from "./something.json" assert { type: "json" };

Behandlung von .mts und .cts​

Prettier behandelt Dateien mit den Endungen .mts und .cts nun als TypeScript.

HTML​

Zusammenführen von HTML-class-Attributen in eine Zeile (#11827 von @jlongster)​

Macht #7865 rückgängig.

Obwohl dies für Nutzer von CSS-Bibliotheken wie Tailwind gedacht war, die oft zu vielen Klassen auf Elementen führen, zeigte sich, dass unsere Heuristiken für das Aufteilen der Klassenliste auf mehrere Zeilen nicht konsistent gute Ergebnisse liefern konnten. Wir überlegen weiterhin bessere Wege, HTML mit vielen Klassen zu formatieren – erwägen Sie eine Diskussion mit uns.

<!-- 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​

Hinzufügen der Unterstützung für MDX v2-Kommentarsyntax (#11563 von @wooorm)​

Dies fügt grundlegende Unterstützung für die MDX v2-Kommentarsyntax (JavaScript-Stil-Kommentare) zusätzlich zur bereits vorhandenen Unterstützung für die MDX v1-Kommentarsyntax (HTML-Stil-Kommentare) hinzu.

Hinweis: Prettier unterstützt derzeit die neue Kommentarsyntax nur für einzeilige Kommentare (damit {/* prettier-ignore */} verwendet werden kann) und unterstützt nicht den Rest von MDX v2.

Input:
{/*A comment*/}

Prettier 2.4:
{/_A comment_/}

Prettier 2.5:
{/*A comment*/}

Weitere Änderungen​

JavaScript​

Klammern um Sequenzausdrücke als Body von Pfeilfunktionsketten korrigiert (#11593 von @bakkot)​

Die erforderlichen Klammern um Sequenzausdrücke als Body von Pfeilfunktionen werden nun für verkettete Pfeilfunktionen beibehalten. Zuvor hatte Prettier sie entfernt, was zu ungültiger Syntax führte.

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

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

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

Syntaxfehler im "sloppy mode" ignorieren (#11750 von @fisker, #11778 von @sosukesuzuki)​

JavaScripts Strict Mode fügt mehrere nützliche Fehler hinzu, um Fehler zu vermeiden. Einige dieser Fehler sind Syntaxfehler, die während des Parsens auftreten. Da es das Ziel von Prettier ist, allen syntaktisch gültigen JavaScript-Code zu formatieren, unabhängig davon, ob er tatsächlich ausgeführt wird, haben wir uns entschieden, diese Fehlerprüfung an Linter, Compiler und die Laufzeitumgebung zu überlassen.

// 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;
}

Abstände zwischen Ausdrücken und Klammern in eingebettetem CSS berücksichtigen (#11800 von @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);
`;

Unterstützung der ES2022-Syntax für private Klassenfelder mit dem in-Operator im espree-Parser (#11835 von @fisker)​

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

TypeScript​

Überflüssige Klammern für Decorators entfernen (#11717, #11849 von @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​

Formatierung von @use with verbessern (#11637 von @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'
);

Formatierungsfehler bei @forward with beheben (#11683 von @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​

Verwendet den entgegengesetzten Anführungszeichen-Typ für Anführungszeichen innerhalb von Mustache-Statements in Attributen (#11524 von @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​

Nachgestellte Kommas für Typparameter in eingebettetem TSX beibehalten (#11685 von @sosukesuzuki)​

Das nachgestellte Komma ist notwendig, um zu verhindern, dass TypeScript <T> als Anfang eines JSX-Ausdrucks behandelt.

<!-- 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) => {};
```