Prettier 1.9: JSX-Fragmente, EditorConfig und Pfeilfunktionsklammern

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 eine Option für Klammern bei Pfeilfunktionsargumenten hinzu, unterstützt die neue JSX-Fragment-Syntax (<>), bietet Unterstützung für .editorconfig-Dateien und enthält Verbesserungen für unsere GraphQL- und Markdown-Unterstützung.

Höhepunkte

JavaScript

Option zum Hinzufügen von Klammern bei Pfeilfunktionsargumenten (#3324) von @rattrayalex und @suchipi

Beim Ausgeben von Pfeilfunktionen ließ Prettier Klammern um die Argumente weg, wenn sie nicht unbedingt notwendig waren, wie hier:

// no parens
foo => {};

// parens
(foo: Number) => {};

// parens
({ foo }) => {}

// parens
(foo = 5) => {}

Dies führte zum am meisten kommentierten Thread in unserem Issue-Tracker. Prettier bietet jetzt die Option --arrow-parens (arrowParens in der Konfiguration), die aktuell zwei Werte unterstützt:

• "avoid" - (Standard) Behält das Verhalten bei, das Klammern weglässt, wenn möglich

• "always" - Fügt immer Klammern hinzu

JSX-Fragment-Syntax (#3237) von @duailibe

Prettier erkennt und formatiert jetzt JSX mit der neuen Fragment-Syntax, wie im folgenden Beispiel:

function MyComponent() {
  return (
    <>
      <Children1 />
      <Children2 />
      <Children3 />
    </>
  );
}

Behebung langsamer Formatierung langer Texte in JSX (#3268, #3273) von @duailibe

Wir erhielten Rückmeldungen, dass die Formatierung von JSX-Dateien mit sehr langen Texten (~1000 Zeilen) extrem langsam war und identifizierten zwei Performance-Engpässe in unserer fill-Primitive, die Text ausgibt, bis die Druckbreite erreicht ist, und dann einen Zeilenumbruch einfügt.

Markdown

Option zum Beibehalten von Textzeilenumbrüchen hinzugefügt (#3340) von @ikatyang

Nach der Veröffentlichung unserer Markdown-Unterstützung erhielten wir Feedback, dass das Umbrechen von Text zur Einhaltung der Druckbreite Renderer beeinträchtigen könnte, die empfindlich auf Zeilenumbrüche reagieren. In 1.8.2 führten wir die Option proseWrap: false ein, die Absätze in einer einzigen Zeile ausgibt, wobei Benutzer auf die "Soft Wrapping"-Funktion von Editoren angewiesen waren.

In 1.9 führen wir die neue Option proseWrap: "preserve" ein, die ursprüngliche Zeilenumbrüche im Text beibehält und Benutzern die Entscheidung über Textumbrüche überlässt.

[WARNUNG] proseWrap mit booleschem Wert ist veraltet. Verwenden Sie stattdessen "always", "never" oder "preserve".

[BREAKING CHANGE] Die proseWrap-Option verwendet jetzt standardmäßig "preserve", da einige Renderer zeilenumbruchsempfindlich sind.

GraphQL

Unterstützung für Top-Level-Interpolationen (#3370) von @lydell

Als die GraphQL-Unterstützung veröffentlicht wurde, konnte Prettier keine Interpolationen verarbeiten und übersprang die Formatierung, wenn welche vorhanden waren, da Interpolationen die Formatierung erheblich erschweren. Obwohl dies meistens funktionierte, konnten Nutzer des Apollo Clients Prettiers GraphQL-Unterstützung manchmal nicht nutzen, da der Apollo Client Interpolationen für das Teilen von Fragmenten zwischen Abfragen einsetzt. Die gute Nachricht ist, dass nur Interpolationen auf oberster Ebene erlaubt sind, was wesentlich einfacher in Prettier zu implementieren war.

In Version 1.9 formatieren wir GraphQL-Abfragen mit Top-Level-Interpolation:

gql`
  query User {
    user(id: "Bob") {
      ...UserDetails
    }
  }

  ${UserDetailsFragment}
`

(Prettier überspringt weiterhin die Formatierung, wenn sich die Interpolation innerhalb einer Query oder Mutation befindet.)

Bewusste Zeilenumbrüche in GraphQL erhalten (#3252) von @duailibe

Prettier respektiert jetzt bewusste Zeilenumbrüche innerhalb von GraphQL-Abfragen (begrenzt auf einen pro Block), die zuvor entfernt wurden.

query User {
  name

  age
}

CSS

Element- und Attributnamen in Selektoren nicht mehr klein schreiben (#3317) von @lydell

CSS ist größtenteils case-insensitiv, daher hat Prettier bisher zur Konsistenz alles kleingeschrieben. Dabei haben wir jedoch ein Detail in der CSS-Spezifikation übersehen: Element- und Attributnamen in Selektoren hängen vom Markup-Sprache ab. In HTML sind sie case-insensitiv, in SVG (XML) jedoch nicht. Bisher hat Prettier diese Namen fälschlicherweise kleingeschrieben, was jetzt nicht mehr geschieht.

Konfiguration

EditorConfig-Unterstützung hinzugefügt (#3255) von @josephfrazier

Es hat eine Weile gedauert, aber Prettier respektiert jetzt Ihre .editorconfig-Datei. Dies umfasst:

• indent_style

• indent_size/tab_width

• max_line_length

Die prettier-CLI respektiert .editorconfig standardmäßig, kann aber mit --no-editorconfig deaktiviert werden. Die API respektiert .editorconfig standardmäßig nicht, um mögliche Editor-Integrationsprobleme zu vermeiden (Details hier). Fügen Sie für die Aktivierung editorconfig: true zu den prettier.resolveConfig-Optionen hinzu.

Weitere Änderungen

JavaScript

Einfache JSX-Elemente nicht mehr umbrechen (#3250) von @duailibe

Prettier bricht Elemente ohne Attribute nicht mehr um und behält Einzelelemente wie <br /> als Einheit.

Bezeichner in Template-Literal-Ausdrücken nicht mehr umbrechen (#3299) von @duailibe

In der vorherigen Version testeten wir eine neue Strategie zum Umbrechen von Template-Literalen mit eingebetteten Ausdrücken. Wir erhielten Feedback, dass in manchen Fällen das Überschreiten der Zeilenlänge bevorzugt wird statt mehrzeiliger Umbrüche.

Ab sofort werden Ausdrücke in Template-Literalen, die einen einzelnen Bezeichner enthalten, nicht mehr umgebrochen:

const foo = `Hello ${username}. Today is ${month} ${day}. You have ${newMessages} new messages`.

Formatierung von Kommentaren in Pfeilfunktionen korrigiert (#3334) von @jackyho112

Behebt einen Sonderfall, bei dem Prettier Kommentare verschob und Tools wie Webpack beeinträchtigte:

const API = {
  loader: () => import('./test' /* webpackChunkName: "test" */),
};

// would get formatted to

const API = {
  loader: (/* webpackChunkName: "test" */) => import("./test")
};

Korrigiert die Ausgabe von Kommentaren um Decorators und Klasseneigenschaften (#3382) von @azz

Es gab einen Fall, in dem Kommentare zwischen einem Decorator und einer Klasseneigenschaft an eine ungültige Position verschoben wurden.

// Before
class Something {
  @decorator
  static // comment
  property = 1;
}

// After
class Something {
  @decorator
  // comment
  static property = 1;
}

Flow

Kein Umbruch bei leeren Typparametern (#3281) von @Vjeux

Es erfolgt kein Umbruch mehr bei leeren Typparametern (foo: Type<>).

Unterstützung für Flow-Mixins bei Verwendung von Babylon hinzugefügt (#3391) von @bakkot

Versehentlich wurden Flow-Mixins entfernt. Dies wurde behoben, jedoch nur für den babylon-Parser.

// Before
class Foo extends Bar {}

// After
class Foo extends Bar mixins Baz {}

TypeScript

Kein abschließendes Komma nach Objekt-Rest-Spread (#3313) von @duailibe

Dies war inkonsistent mit JavaScript und Flow. Prettier gibt bei Verwendung des TypeScript-Parsers in den folgenden Fällen kein abschließendes Komma aus:

const {
  bar,
  baz,
  ...rest
} = foo;

Klammern um Typ-Assertions für Decorator ausgeben (#3329) von @azz

Wir haben Klammern um Typ-Assertions innerhalb von Decorators weggelassen:

@(bind as ClassDecorator)
class Decorated {}

Markdown

Kein Umbruch in inlineCode (#3230) von @ikatyang

Prettier bricht Text innerhalb von inlineCode nicht um, d.h. es bricht nur davor oder danach um.

Kein zusätzlicher Leerraum zwischen Nicht-CJK- und CJK-Satzzeichen und umgekehrt (#3244, #3249) von @ikatyang

Behebt Fälle, in denen Prettier zusätzlichen Leerraum einfügte, wie in den folgenden Beispielen:

扩展运算符（spread ）是三个点（`...`）。

This is an english paragraph with a CJK quote " 中文 ".

Alle betonungsähnlichen Texte escapen (#3246) von @ikatyang

Behebt den Fall, in dem \_\_text\_\_ als __text__ formatiert wurde.

Behandlung von Satzzeichenvarianten (#3254) von @ikatyang

Prettier berücksichtigt nun nicht nur ASCII-Satzzeichen, sondern auch Unicode.

Unterstützung für TOML-Frontmatter (#3290) von @ikatyang

Wir unterstützten bereits YAML im Frontmatter von Markdown-Dateien und haben nun auch das TOML-Format hinzugefügt, da einige statische Site-Generatoren dies unterstützen.

+++
date: '2017-10-10T22:49:47.369Z'
title: 'My Post Title'
categories: ['foo', 'bar']
+++

This is the markdown body of my post.

Nur den ersten Nicht-Listen-Knoten in einem Checkbox-Listeneintrag einrücken (#3297) von @ikatyang

Behebt einen Fehler, bei dem Zeilen nach einer Liste eingerückt wurden, obwohl dies nicht hätte geschehen sollen:

* parent list item

     * child list item

* [x] parent task list item

     * [x] child task list item

würde zu:

* parent list item

  * child list item

* [x] parent task list item

      * [x] child task list item

Geschützte Leerzeichen beibehalten (#3327) von @ikatyang

Geschützte Leerzeichen (non-breaking spaces) sind nützlich, um Wörter mit Zwischenräumen in derselben Zeile zusammenzuhalten (z. B. Zahlen mit Einheiten oder mehrteilige Produktnamen). Prettier hatte sie fälschlicherweise in normale Leerzeichen umgewandelt.

Kein Umbruch vor speziellem Präfix (#3347) von @ikatyang

Behebt einen Fehler, bei dem Prettier Text umbrechen konnte, wenn die Zeilenlänge (print width) direkt vor einer Zahl mit folgendem . überschritten wurde – was als nummerierte Liste interpretiert worden wäre:

She grew up in an isolated village in the 19th century and met her father aged
29. Oh no, why are we in a numbered list now?

Semikolon in einfachen JSX-Ausdrücken weglassen (#3330) von @sapegin

Prettier lässt das Semikolon (davor und danach) in Codebeispielen weg, wenn es sich um einen einfachen JSX-Ausdruck handelt:

No semi:

<!-- prettier-ignore -->
```jsx
<div>Example</div>
```