Zum Hauptinhalt springen

Prettier 1.17: Mehr Optionen für Anführungszeichen und Unterstützung für gemeinsam genutzte Konfigurationen

· 6 Min. Lesezeit
Lucas Duailibe
Lucas Duailibe
Inoffizielle Beta-Übersetzung

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

Dieses Release bringt lang erwartete Flexibilität bei Anführungszeichen um Objekteigenschaften, ermöglicht die gemeinsame Nutzung von Prettier-Konfigurationen über Pakete, fügt einen LWC-Parser hinzu, unterstützt neue GraphQL-Syntax und behebt zahlreiche Formatierungsfehler.

Höhepunkte​

JavaScript​

Option zum Anpassen der Anführungszeichen bei Objekteigenschaften hinzugefügt (#5934 von @azz)​

--quote-props <as-needed|preserve|consistent>

as-needed (Standard) - Setzt Anführungszeichen nur bei Bedarf. Aktuelles Verhalten. preserve - Behält die Eingabe bei. Nützlich für Nutzer von Google's Closure Compiler im Advanced Mode, der Anführungszeichen bei Eigenschaften anders behandelt. consistent - Wenn mindestens eine Eigenschaft Anführungszeichen benötigt, werden alle Eigenschaften in Anführungszeichen gesetzt – ähnlich wie ESLints consistent-as-needed-Option.

// Input
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

// Output (Prettier 1.16 or --quote-props=as-needed)
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  origin: "prettier.io"
};

// Output (--quote-props=consistent)
const headers = {
  "accept": "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

// Output (--quote-props=preserve)
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

Konfiguration​

Unterstützung für gemeinsam genutzte Konfigurationen (#5963 von @azz)​

Das Teilen einer Prettier-Konfiguration ist einfach: Veröffentlichen Sie ein Modul, das ein Konfigurationsobjekt exportiert, z.B. @company/prettier-config, und referenzieren Sie es in Ihrer package.json:

{
  "name": "my-cool-library",
  "version": "9000.0.1",
  "prettier": "@company/prettier-config"
}

Wenn Sie package.json nicht verwenden möchten, können Sie eine der unterstützten Erweiterungen nutzen, um einen String zu exportieren, z.B. .prettierrc.json:

"@company/prettier-config"

@azz hat ein Beispielkonfigurationspaket erstellt. Sie können den Quellcode auf GitHub einsehen oder es via npm installieren.

Hinweis

Diese Methode bietet keine Möglichkeit, die Konfiguration zu erweitern und Eigenschaften der gemeinsamen Konfiguration zu überschreiben. Importieren Sie dafür die Datei in einer .prettierrc.js-Datei und exportieren Sie die Änderungen, z.B:

module.exports = {
  ...require("@company/prettier-config"),
  semi: false,
};

Allgemein​

JavaScript​

Zeilenumbrüche zwischen Parametern berücksichtigen (#5836 von @evilebottnawi)​

// Input
function foo(
  one,

  two,
  three,
  four,


  five,
  six,
  seven,
  eight,
  nine,
  ten,

  eleven

) {}

// Output (Prettier 1.16)
function foo(
  one,
  two,
  three,
  four,
  five,
  six,
  seven,
  eight,
  nine,
  ten,
  eleven
) {}

// Output (Prettier 1.17)
function foo(
  one,

  two,
  three,
  four,

  five,
  six,
  seven,
  eight,
  nine,
  ten,

  eleven
) {}

Kommentare bei mehrzeiligen dynamischen Imports korrigieren (#6025 von @noahsug)​

// Input
import(
  /* Hello */
  'something'
  /* Hello */
)
import(
  'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename'
)

// Output (Prettier stable)
import(/* Hello */
"something");
/* Hello */
import('myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename');

// Output (Prettier master)
import(
  /* Hello */
  'something'
  /* Hello */
)
import(
  'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename'
);

Klammern für sofort aufgerufene Funktionen und Klassen hinzufügen (#5996 von @bakkot)​

// Input
new class {};
new function() {}

// Output (Prettier stable)
new class {}();
new function() {}();

// Output (Prettier master)
new (class {})();
new (function() {})();

Klammerlogik für Optional-Chaining-Ausdrücke und Closure-Typcasts korrigieren (#5843 von @yangsu)​

Durch #4542 eingeführte Logik setzte Klammern an falschen Stellen und erzeugte ungültigen Code bei Optional-Chaining-Ausdrücken (mit mehr als 2 Knoten) oder Closure-Typcasts, die mit Funktionsaufrufen enden.

// Input
(a?.b[c]).c();
let value = /** @type {string} */ (this.members[0]).functionCall();

// Output (Prettier stable)
a(?.b[c]).c();
let value = /** @type {string} */ this(.members[0]).functionCall();

// Output (Prettier master)
(a?.b[c]).c();
let value = /** @type {string} */ (this.members[0]).functionCall();

Markdown​

Tabelleninhalte nicht ausrichten, wenn Druckbreite überschritten und --prose-wrap never gesetzt ist (#5701 von @chenshuai2144)​

Ausgerichtete Tabellen sind bei großer Länge und deaktiviertem Zeilenumbruch im Editor weniger lesbar, daher werden sie in solchen Fällen nun als kompakte Tabellen formatiert.

<!-- Input -->
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| bordered | Toggles rendering of the border around the list | boolean | false |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |

<!-- Output (Prettier stable, --prose-wrap never) -->
| Property   | Description                                                                                                           | Type    | Default |
| ---------- | --------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
| bordered   | Toggles rendering of the border around the list                                                                       | boolean | false   |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string  | -       |

<!-- Output (Prettier master, --prose-wrap never) -->
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |

TypeScript​

readonly-Operator unterstützen (#6027 von @ikatyang)​

// Input
declare const array: readonly number[];

// Output (Prettier stable)
// SyntaxError: ',' expected.

// Output (Prettier master)
declare const array: readonly number[];

HTML​

Unterstützung für Lightning Web Components hinzugefügt (#5800 von @ntotten)​

Unterstützt das Lightning Web Components (LWC)-Templateformat für HTML-Attribute durch einen neuen lwc-Parser.

// Input
<my-element data-for={value}></my-element>

// Output (Prettier stable)
<my-element data-for="{value}"></my-element>

// Output (Prettier master)
<my-element data-for={value}></my-element>

Angular: Überflüssige Klammern bei Pipes vermeiden (#5929 von @voithos)​

In einigen Fällen wurden um bestimmte Pipes innerhalb von Attributen unnötige Klammern hinzugefügt. Diese werden nun nicht mehr ergänzt, wenn sie das Ergebnis des Ausdrucks nicht beeinflussen.

// Input
<div *ngIf="isRendered | async"></div>

// Output (Prettier stable)
<div *ngIf="(isRendered | async)"></div>

// Output (Prettier master)
<div *ngIf="isRendered | async"></div>

GraphQL​

Unterstützung für Variablen-Direktiven (#6020 by @adek05)​

Prettier unterstützt nun die Formatierung von Variablen-Direktiven.

// Input
query Q($variable: Int   @directive) {node}

// Output (Prettier stable)
query Q($variable: Int) {
  node
}

// Output (Prettier master)
query Q($variable: Int @directive) {
  node
}

Unterstützung für GraphQL-Fragmentvariablen (#6016 by @adek05)​

Prettier unterstützt nun die Formatierung von Fragmentvariablen.

// Input
fragment F($var: Int) on Type { node }

// Output (Prettier stable)
// Fails to parse

// Output (Prettier master)
fragment F($var: Int) on Type {
   node
}

CLI​

Automatische Erkennung von Scoped-Plugins (#5945 by @Kocal)​

Prettier lädt nun automatisch Scoped-Plugins mit dem Namensmuster @scope-name/prettier-plugin-*.