Prettier 3.0: Hallo, ECMAScript-Module!

Inoffizielle Beta-Übersetzung

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

Wir freuen uns, die Veröffentlichung der neuen Version von Prettier bekannt geben zu können!

Wir haben unsere gesamte Codebasis auf ECMAScript-Module umgestellt. Diese Änderung hat die Entwicklungserfahrung für das Prettier-Team erheblich verbessert. Bitte seien Sie versichert, dass Sie Prettier beim Einsatz als Bibliothek weiterhin auch als CommonJS nutzen können.

Dieses Update bringt mehrere Breaking Changes mit sich. Ein bemerkenswertes Beispiel ist die Änderung bei der Markdown-Formatierung - es werden keine Leerzeichen mehr zwischen lateinischen Zeichen und chinesischen oder japanischen Schriftzeichen eingefügt. Wir möchten uns bei Tatsunori Uchino bedanken, der im vergangenen Jahr wesentliche Beiträge zu Prettier geleistet hat, insbesondere bei dieser Funktion. Zusätzlich wurde der Standardwert von trailingComma auf "all" geändert.

Eine weitere wichtige Änderung in diesem Release ist die umfassende Überarbeitung der Plugin-Schnittstelle. Prettier unterstützt nun Plugins, die mit ECMAScript-Modulen geschrieben sind, sowie asynchrone Parser. Wenn Sie Plugin-Entwickler sind, seien Sie bitte bei der Aktualisierung vorsichtig. Den Migrationsleitfaden finden Sie hier. Wie immer freuen wir uns über Fehlerberichte und Feedback!

Dieses Release enthält zudem zahlreiche Formatierungsverbesserungen und Fehlerbehebungen.

Falls Sie Prettier schätzen und unsere Arbeit unterstützen möchten, erwägen Sie bitte eine direkte Spende über unser OpenCollective oder durch die Förderung der Projekte, von denen wir abhängen, wie typescript-eslint, remark und Babel. Vielen Dank für Ihre fortlaufende Unterstützung!

Höhepunkte

Markdown

Verbesserte Handhabung von Leerzeichen für Chinesisch, Japanisch und Koreanisch (#11597 von @tats-u)

Keine Einfügung von Leerzeichen zwischen chinesischen/japanischen und westlichen Zeichen

Bisher fügte Prettier Leerzeichen zwischen chinesischen/japanischen und westlichen Zeichen (Buchstaben und Ziffern) ein. Während manche diesen Stil bevorzugen, entspricht er nicht dem Standard und widerspricht offiziellen Richtlinien. Weitere Details finden Sie hier. Wir entschieden, dass es nicht Prettiers Aufgabe ist, hier einen bestimmten Stil durchzusetzen, daher werden keine neuen Leerzeichen mehr eingefügt, während bestehende erhalten bleiben. Für die Durchsetzung von Abstandsregeln empfehlen wir textlint-ja oder lint-md (Regeln space-round-alphabet und space-round-number).

Die knifflige Herausforderung waren mehrdeutige Zeilenumbrüche zwischen chinesischen/japanischen und westlichen Zeichen. Wenn Prettier Text entpackt, muss es entscheiden, ob ein solcher Zeilenumbruch einfach entfernt oder durch ein Leerzeichen ersetzt werden soll. Dafür analysiert Prettier den umgebenden Text und leitet den bevorzugten Stil ab.

<!-- Input -->
漢字
Alphabetsひらがな12345カタカナ67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

<!-- Prettier 2.8 -->
漢字 Alphabets ひらがな 12345 カタカナ 67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

<!-- Prettier 3.0 -->
漢字Alphabetsひらがな12345カタカナ67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

Einhaltung von Zeilenumbruchsregeln für Chinesisch und Japanisch

Es gibt Regeln, die bestimmte Zeichen am Anfang oder Ende einer Zeile in Chinesisch und Japanisch verbieten. Zum Beispiel sollten Satzendzeichen wie 。, ． und . nicht eine Zeile beginnen, während （ nicht am Zeilenende stehen sollte. Prettier befolgt diese Regeln nun beim Textumbruch, also wenn proseWrap auf always gesetzt ist.

<!-- Input -->
HTCPCPのエラー418は、ティーポットにコーヒーを淹（い）れさせようとしたときに返されるステータスコードだ。

<!-- Prettier 2.8 with --prose-wrap always --print-width 8 -->
HTCPCP の
エラー
418 は、
ティーポ
ットにコ
ーヒーを
淹（い）
れさせよ
うとした
ときに返
されるス
テータス
コードだ
。

<!-- Prettier 3.0 with the same options -->
HTCPCPの
エラー
418は、
ティー
ポットに
コーヒー
を淹
（い）れ
させよう
としたと
きに返さ
れるス
テータス
コード
だ。

Keine Zeilenumbrüche innerhalb koreanischer Wörter

Im Koreanischen werden Leerzeichen zur Worttrennung verwendet, und eine unpassende Trennung kann die Bedeutung eines Satzes verändern:

• 노래를 못해요.: Ich bin nicht gut im Singen.

• 노래를 못 해요.: Ich kann nicht singen (aus bestimmten Gründen).

Bisher konnten aufeinanderfolgende Hangeul-Zeichen bei aktivierter proseWrap-Option (always) durch einen Zeilenumbruch getrennt werden. Dieser Umbruch konnte später beim Bearbeiten und Neuformatieren in ein Leerzeichen umgewandelt werden. Dies geschieht nun nicht mehr. Koreanischer Text wird jetzt wie Englisch umgebrochen.

<!-- Input -->
노래를 못해요.

<!-- Prettier 2.8 with --prose-wrap always --print-width 9 -->
노래를 못
해요.

<!-- Prettier 2.8, subsequent reformat with --prose-wrap always --print-width 80 -->
노래를 못 해요.

<!-- Prettier 3.0 with --prose-wrap always --print-width 9 -->
노래를
못해요.

<!-- Prettier 3.0, subsequent reformat with --prose-wrap always --print-width 80 -->
노래를 못해요.

Ein Zeilenumbruch zwischen Hangeul und nicht-hangeulischen Buchstaben oder Ziffern wird beim Entfernen von Zeilenumbrüchen durch Prettier in ein Leerzeichen umgewandelt. Betrachten Sie dieses Beispiel:

3분 기다려 주지.

Wenn Sie in diesem Satz die Zeile zwischen „3“ und „분“ umbrechen, wird an dieser Stelle beim Entfernen des Umbruchs ein Leerzeichen eingefügt.

API

Unterstützung für Plugins mit asynchronen Parsern (#12748 von @fisker, #13211 von @thorn0 und @fisker)

Die parse-Funktion in einem Plugin kann jetzt ein Promise zurückgeben.

Um asynchrone Parser für eingebettete Sprachen zu unterstützen, mussten wir eine Breaking Change in der Plugin-API einführen. Die embed-Methode eines Printers muss nun eine komplett neue Signatur verwenden, die inkompatibel mit früheren Versionen ist. Wenn Sie ein Plugin entwickeln und Ihre Plugins kein embed definieren, besteht kein Handlungsbedarf. Andernfalls lesen Sie die Dokumentation für Details.

Außerdem kann die preprocess-Methode eines Printers jetzt ebenfalls ein Promise zurückgeben.

Unterstützung für Konfigurationsdateien im ESM-Format (#13130 von @fisker)

ESM-Konfigurationsdateien werden nun unterstützt. Die unterstützten Dateinamen sind:

• prettier.config.js (bei gleichzeitigem {"type": "module"} in package.json)

• .prettierrc.js (wie oben)

• prettier.config.mjs

• .prettierrc.mjs

export default {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

Teilbare Konfigurationspakete können ebenfalls reine ESM-Pakete sein.

Breaking Changes

JavaScript

Änderung des Standardwerts für trailingComma auf all (#11479 von @fisker, #13143 von @sosukesuzuki)

Seit Version 2.0 war der Standardwert für trailingComma auf es5 gesetzt.

Internet Explorer – der letzte Browser, der keine nachgestellten Kommas in Funktionsaufrufen erlaubte – wurde am 15. Juni 2022 eingestellt. Entsprechend ändern wir den Standardwert für trailingComma auf all.

Falls das alte Verhalten weiterhin gewünscht ist, konfigurieren Sie Prettier bitte mit { "trailingComma": "es5" }.

Entfernung der Flow-Syntax-Unterstützung im babel-Parser (#14314 von @fisker, @thorn0)

Aus historischen Gründen erkannte Prettier Flow-Syntax in JS-Dateien, wenn die parser-Option auf babel gesetzt war, auch wenn die Datei nicht das @flow-Pragma enthielt. Diese Unterstützung war begrenzt und leistungsmindernd, daher wurde sie in Prettier 3.0 entfernt. Prettier mit dem babel-Parser wechselt automatisch zur Flow-Syntax, wenn das @flow-Pragma gefunden wird oder die Datei die Erweiterung .js.flow hat.

Flow

Entfernung der Unterstützung für Flow-Kommentare (#13687, #13703 von @thorn0)

Als eine Art Präprozessor werden Flow-Kommentare, auch bekannt als Kommentartypen, auf der Token-Ebene verarbeitet und können im Allgemeinen nicht in einem AST dargestellt werden. Flow baut den AST so auf, als ob diese speziellen Kommentartoken nicht existierten. Beispiel:

/*:: if */ (x) + y;

Dies wird von Flow als if (x) +y; geparst und von JS-Parsern, die Flow nicht unterstützen, als x + y;.

Früher hat Prettier für einige Sonderfälle versucht, diese Syntax zu erkennen und zu erhalten. Als Versuch, ein unlösbares Problem zu lösen, war diese begrenzte Unterstützung fehleranfällig und von Fehlern durchsetzt, daher wurde sie entfernt. Wenn die parser-Option auf flow oder babel-flow gesetzt ist, werden Flow-Kommentare geparst und wie normaler Code neu ausgegeben. Wenn ein Parser verwendet wird, der Flow nicht unterstützt, werden sie wie übliche Kommentare behandelt.

// Input
let a /*: foo */ = b;

// Prettier 2.8
let a /*: foo */ = b;

// Prettier 3.0 with --parser flow
let a: foo = b;

// Prettier 3.0 with --parser babel
let a /*: foo */ = b;

Ausgabe des nachgestellten Kommas in Typparametern und Tupeltypen bei --trailing-comma=es5 (#14086, #14085 von @fisker)

// Input
type Foo =  [
  {
    from: string,
    to: string,
  }, // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType }, // <- 2
>;

// Prettier 2.8
type Foo = [
  {
    from: string,
    to: string,
  } // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType } // <- 2
>;

// Prettier 3.0
type Foo = [
  {
    from: string,
    to: string,
  }, // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType }, // <- 2
>;

CSS

Hinzufügen des reinen css-Parsers (#7933, #9092, #9093 von @fisker)

Früher hat Prettier bei Übergabe von --parser=css versucht, den Inhalt mit postcss-scss und postcss-less zu parsen. Dies verursachte Verwirrung und machte Syntaxfehler schwer erkennbar. Jetzt funktioniert --parser=css nur mit der reinen CSS-Syntax.

Wenn Sie parser="css" für Ihre .less/.scss-Dateien verwenden, aktualisieren Sie es auf den korrekten Parser oder entfernen Sie die parser-Option, damit Prettier den Parser automatisch anhand der Dateierweiterung erkennt.

/* Input */
/* Less Syntax with `--parser=css` */
a {.bordered();}

/* Prettier 2.8 */
/* Less Syntax with `--parser=css` */
a {
  .bordered();
}

/* Prettier 3.0 */
SyntaxError: (postcss) CssSyntaxError Unknown word (2:4)
  1 | /* Less Syntax with `--parser=css` */
> 2 | a {.bordered();}

/* Input */
/* Scss Syntax with `--parser=css` */
::before {content: #{$foo}}

/* Prettier 2.8 */
/* Scss Syntax with `--parser=css` */
::before {
  content: #{$foo};
}

/* Prettier 3.0 */
SyntaxError: (postcss) CssSyntaxError Unknown word (2:22)
  1 | /* Scss Syntax with `--parser=css` */
> 2 | ::before {content: #{$foo}}

GraphQL

Entfernung der Unterstützung für die Syntax "kommagetrennte Interfaces" (#12835 von @fisker)

# Input
type Type1 implements A, B {a: a}

# Prettier 2.8
type Type1 implements A, B {
  a: a
}

# Prettier 3.0
SyntaxError: Syntax Error: Unexpected Name "B". (1:26)
> 1 | type Type1 implements A, B {a: a}

API

Unterstützung für Node.js 10 und 12 eingestellt (#11830 von @fisker, #13118 von @sosukesuzuki)

Die minimal erforderliche Node.js-Version ist jetzt v14

Öffentliche APIs sind jetzt asynchron (#12574, #12788, #12790, #13265 von @fisker)

• prettier.format() gibt Promise<string> zurück

• prettier.formatWithCursor() gibt Promise<{formatted: string, cursorOffset: number}> zurück

• prettier.formatAST() gibt Promise<string> zurück

• prettier.check() gibt Promise<boolean> zurück

• prettier.getSupportInfo() gibt Promise zurück

• prettier.clearConfigCache() gibt Promise<void> zurück

• prettier.resolveConfig.sync wurde entfernt

• prettier.resolveConfigFile.sync wurde entfernt

• prettier.getFileInfo.sync wurde entfernt

Wenn Sie weiterhin synchrone APIs benötigen, können Sie @prettier/sync verwenden

Geänderte Dateistrukturen im npm-Paket (#12740 von @fisker, #13530 von @fisker, #14570 von @fisker)

Änderungen an den Dateistrukturen:

• bin-prettier.js → bin/prettier.cjs

• esm/standalone.mjs → standalone.mjs

• esm/parser-angular.mjs → plugins/angular.mjs

• parser-angular.js → plugins/angular.js

• esm/parser-babel.mjs → plugins/babel.mjs

• parser-babel.js → plugins/babel.js

• esm/parser-espree.mjs → plugins/acorn-and-espree.mjs

• parser-espree.js → plugins/acorn.js
  Globales Objekt umbenannt: prettierPlugins.espree → prettierPlugins.acorn

• esm/parser-flow.mjs → plugins/flow.mjs

• parser-flow.js → plugins/flow.js

• esm/parser-glimmer.mjs → plugins/glimmer.mjs

• parser-glimmer.js → plugins/glimmer.js

• esm/parser-graphql.mjs → plugins/graphql.mjs

• parser-graphql.js → plugins/graphql.js

• esm/parser-html.mjs → plugins/html.mjs

• parser-html.js → plugins/html.js

• esm/parser-markdown.mjs -> plugins/markdown.mjs

• parser-markdown.js -> plugins/markdown.js

• esm/parser-meriyah.mjs -> plugins/meriyah.mjs

• parser-meriyah.js -> plugins/meriyah.js

• esm/parser-postcss.mjs -> plugins/postcss.mjs

• parser-postcss.js -> plugins/postcss.js

• esm/parser-typescript.mjs -> plugins/typescript.mjs

• parser-typescript.js -> plugins/typescript.js

• esm/parser-yaml.mjs -> plugins/yaml.mjs

• parser-yaml.js -> plugins/yaml.js

Die vollständige Liste finden Sie unter https://unpkg.com/browse/prettier@3.0.0/.

Ein neues Plugin wurde hinzugefügt:

• plugins/estree.mjs (ESM-Version)

• plugins/estree.js (UMD-Version)

Bei Verwendung der Standalone-Version sollte dieses Plugin geladen werden, wenn JavaScript, TypeScript, Flow oder JSON formatiert werden.

import { format } from "prettier/standalone";
- import prettierPluginBabel from "prettier/parser-babel";
+ import * as prettierPluginBabel from "prettier/plugins/babel";
+ import * as prettierPluginEstree from "prettier/plugins/estree";

console.log(
-  format(code, {
+  await format(code, {
      parser: "babel",
-     plugins: [prettierPluginBabel],
+     plugins: [prettierPluginBabel, prettierPluginEstree],
   })
);

- node ./node_modules/prettier/bin-prettier.js . --write
+ node ./node_modules/prettier/bin/prettier.cjs . --write

Unterstützung für ESM-Plugins (#13201 von @fisker)

Ab v3.0.0 laden wir Plugins über import() statt require(), sodass Plugins nun ESM-Module sein können.

Wenn Sie --plugin mit einem Verzeichnispfad oder Dateipfad ohne Erweiterung verwenden, kann das Plugin möglicherweise nicht geladen werden.

- prettier . --plugin=path/to/my-plugin-directory
+ prettier . --plugin=path/to/my-plugin-directory/index.js

- prettier . --plugin=path/to/my-plugin-file
+ prettier . --plugin=path/to/my-plugin-file.js

Aktualisierung von prettier.doc (#13203, #14456 von @fisker)

prettier.doc.builders.concat wurde in v2.3.0 als veraltet markiert und ist nun entfernt.

Die folgenden APIs waren nie dokumentiert und nur für den internen Gebrauch gedacht. Sie wurden nun entfernt.

• prettier.doc.utils.getDocParts

• prettier.doc.utils.propagateBreaks

• prettier.doc.utils.cleanDoc

• prettier.doc.utils.getDocType

• prettier.doc.debug.printDocToDebug

textToDoc entfernt abschließende Hard Lines (#13220 von @fisker)

Bisher wurde in allen Kernsprachen nach dem Drucken von eingebettetem Code in Doc die Funktion prettier.doc.utils.stripTrailingHardline() aufgerufen, um abschließende Hard Lines zu entfernen.

Wir gehen davon aus, dass die Rückgabe von Docs ohne abschließende Hard Lines durch textToDoc die Implementierung von embed-Druckfunktionen in Plugins vereinfacht.

Entfernung der Unterstützung für benutzerdefinierte Parser-APIs (#13250 von @fisker und @thorn0)

Bevor es Plugins gab, hatte Prettier eine ähnliche, aber eingeschränktere Funktion namens Custom Parser. Diese wurde in v3.0.0 entfernt, da ihre Funktionalität eine Teilmenge der Plugin-API darstellte. Falls Sie diese verwendet haben, lesen Sie bitte die Migrationsanleitung.

Das zweite Argument parsers für parsers.parse wurde entfernt (#13268 von @fisker)

Die Signatur der print-Funktion in Plugins hat sich geändert von:

function parse(text: string, parsers: object, options: object): AST;

zu

function parse(text: string, options: object): Promise<AST> | AST;

Das zweite Argument parsers wurde entfernt. Falls Sie während des Parse-Vorgangs weiterhin andere Parser benötigen, haben Sie zwei Optionen:

1. Plugin selbst importieren (empfohlen):

   import * as prettierPluginBabel from "prettier/plugins/babel";
   
   const myCustomPlugin = {
     parsers: {
       "my-custom-parser": {
         async parse(text) {
           const ast = await prettierPluginBabel.parsers.babel.parse(text);
           ast.program.body[0].expression.callee.name = "_";
           return ast;
         },
         astFormat: "estree",
       },
     },
   };

2. Parser aus options-Argument extrahieren:

   function getParserFromOptions(options, parserName) {
     const parserOrParserInitFunction = options.plugins.find(
       (plugin) => plugin.parsers && Object.hasOwn(plugin.parsers, parserName),
     )?.parsers[parserName];
     return typeof parserOrParserInitFunction === "function"
       ? parserOrParserInitFunction()
       : parserOrParserInitFunction;
   }
   
   const myCustomPlugin = {
     parsers: {
       "my-custom-parser": {
         async parse(text, options) {
           const babelParser = await getParserFromOptions(options, "babel");
           const ast = await babelParser.parse(text);
           ast.program.body[0].expression.callee.name = "_";
           return ast;
         },
         astFormat: "estree",
       },
     },
   };

undefined und null werden nicht mehr an print-Funktion übergeben (#13397 von @fisker)

Falls Ihr Plugin diese Werte in print verarbeitet hat, prüfen Sie stattdessen den übergeordneten Knoten.

function print(path, print) {
-  const value = path.getValue();
-  if (!value?.type) {
-    return String(value);
-  }

-  return path.map(print, "values");

+  return path.map(({node}) => (node?.type ? print() : String(node)), "values");
}

Beliebige Truthy-Werte für label-Dokumente erlaubt (#13532 von @thorn0)

Der label-Doc-Builder wurde geändert. Details finden Sie in der Dokumentation.

getFileInfo() löst jetzt standardmäßig Konfiguration auf (#14108 von @fisker)

options.resolveConfig ist nun standardmäßig true. Siehe Dokumentation.

Plugin-Suche wurde entfernt (#14759 von @fisker)

Die automatische Plugin-Suche funktionierte mit pnpm nicht zuverlässig und verursachte Performance-Probleme.

Die CLI-Flags --plugin-search-dir, --no-plugin-search sowie die API-Option pluginSearchDirs wurden in Prettier 3.0 entfernt.

Verwenden Sie stattdessen das --plugin-Flag bzw. die plugins-Option. Details in der Dokumentation.

CLI

Dateien in .gitignore standardmäßig ignorieren (#14731 von @fisker)

Prettier ignoriert standardmäßig Dateien, die in .gitignore aufgeführt sind. Wenn Sie das alte Verhalten wünschen (nur Dateien ignorieren, die in .prettierignore aufgeführt sind), verwenden Sie

prettier . --write --ignore-path=.prettierignore

Weitere Änderungen

JavaScript

Unterstützung des "Decorated Function"-Musters (#10714 von @thorn0)

In diesem Fall ist der Entwickler meist bereit, die Lesbarkeit der Signatur der Pfeilfunktion zu opfern, um weniger Einrückung im Funktionskörper zu erhalten. Prettier erkennt dieses Muster jetzt und behält die Pfeilfunktion kompakt, selbst wenn die Signatur umbricht.

// Prettier 2.8
const Counter = decorator("my-counter")(
  (props: { initialCount?: number; label?: string }) => {
    // ...
  }
);

// Prettier 3.0
const Counter = decorator("my-counter")((props: {
  initialCount?: number;
  label?: string;
}) => {
  // ...
});

Korrektur der Cursor-Positionierung bei Dateien mit Emojis (#13340 von @fisker)

$ cat test.js
const { formatWithCursor } = await import("prettier");
const code = "'😀😀😀😀'";
await formatWithCursor(code, {parser: "babel", cursorOffset: 9})

# Prettier 2.8
$ node test.js
{ formatted: '"😀😀😀😀";\n', cursorOffset: 5, comments: [] }

# Prettier 3.0
$ node test.js
{ formatted: '"😀😀😀😀";\n', cursorOffset: 9, comments: [] }

Behebung von Randfällen bei der Erweiterung des ersten Aufrufarguments (#13341 von @thorn0)

// Input
export default whatever(function (a: {
  aaaaaaaaa: string;
  bbbbbbbbb: string;
  ccccccccc: string;
}) {
  return null;
}, "xyz");

call(
    function() {
        return 1;
    },
    $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? 'test'
);

// Prettier 2.8
export default whatever(function (a: {
  aaaaaaaaa: string;
  bbbbbbbbb: string;
  ccccccccc: string;
}) {
  return null;
},
"xyz");

call(function () {
  return 1;
}, $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  "test");

// Prettier 3.0
export default whatever(function (a: {
  aaaaaaaaa: string,
  bbbbbbbbb: string,
  ccccccccc: string,
}) {
  return null;
}, "xyz");

call(
  function () {
    return 1;
  },
  $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    "test",
);

Korrektur der Einrückung von Pfeilfunktionsketten in Aufrufargumenten und binären Ausdrücken (#13391 von @thorn0)

Die Motivation hinter der gewählten Formatierung ist, deutlich zu machen, wie viele Argumente der Aufruf hat. Es gab jedoch einen Fehler bei der Einrückung der ersten Signatur in der Kette, wenn diese Signatur nicht in eine Zeile passte.

// Prettier 2.8
askTrovenaBeenaDependsRowans(
  glimseGlyphsHazardNoopsTieTie,
  (
      averredBathersBoxroomBuggyNurl,
      anodyneCondosMalateOverateRetinol = "default"
    ) =>
    (annularCooeedSplicesWalksWayWay) =>
    (kochabCooieGameOnOboleUnweave) =>
      abugidicRomanocastorProvider,
  weaponizedStellatedOctahedron
);

// Prettier 3.0
askTrovenaBeenaDependsRowans(
  glimseGlyphsHazardNoopsTieTie,
  (
    averredBathersBoxroomBuggyNurl,
    anodyneCondosMalateOverateRetinol = "default",
  ) =>
    (annularCooeedSplicesWalksWayWay) =>
    (kochabCooieGameOnOboleUnweave) =>
      abugidicRomanocastorProvider,
  weaponizedStellatedOctahedron,
);

Signatur kompakter Funktionsausdrücke nicht umbrechen, wenn Parameter Bezeichner ohne Typen sind (#13410 von @thorn0)

// Prettier 2.8
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
  props,
  ref
) {
  return <ThemeUILink ref={ref} variant="default" {...props} />;
});

// Prettier 3.0
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  function Link(props, ref) {
    return <ThemeUILink ref={ref} variant="default" {...props} />;
  },
);

Behebung von verschachtelten Kommentaren (#13438 von @thorn0)

// Input
function x() {
} // first
; // second

// Prettier 2.8
function x() {} // first // second

// Prettier 3.0
function x() {} // first
// second

Unterstützung verschachtelter JSDoc-Kommentare (#13445 von @thorn0)

Diese Art von Kommentaren wird verwendet, um überladene Funktionen zu dokumentieren (siehe https://github.com/jsdoc/jsdoc/issues/1017).

// Input
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 *//**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

// Prettier 2.8
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 */ /**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

// Prettier 3.0
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 *//**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

Behebung instabiler Template-Literals mit eingebetteten Sprachen (#13532 von @thorn0)

Wenn ein Template-Literal mit eingebetteter Syntax das einzige Argument eines Aufrufs oder der Rumpf einer Pfeilfunktion ist und führende sowie abschließende Leerzeichen hat, wird es nicht in einer neuen Zeile ausgegeben.

// Input
foo(/* HTML */ ` <!-- bar1 --> bar <!-- bar2 --> `);

// Prettier 2.8 (first output)
foo(
  /* HTML */ `
    <!-- bar1 -->
    bar
    <!-- bar2 -->
  `
);

// Prettier 2.8 (second output)
foo(/* HTML */ `
  <!-- bar1 -->
  bar
  <!-- bar2 -->
`);

// Prettier 3.0 (first output)
foo(/* HTML */ `
  <!-- bar1 -->
  bar
  <!-- bar2 -->
`);

Korrektur der Einrückung von Ausdrücken in Template-Literals (#13621 von @fisker)

// Input
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow"
              )}" button, type "${chalk.yellow.underline(
                version
              )}", hit the "${chalk.bgGreen("Run workflow")}" button.
`

// Prettier 2.8
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow"
              )}" button, type "${chalk.yellow.underline(
  version
)}", hit the "${chalk.bgGreen("Run workflow")}" button.
`;

// Prettier 3.0
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow",
              )}" button, type "${chalk.yellow.underline(
                version,
              )}", hit the "${chalk.bgGreen("Run workflow")}" button.
`;

Unterstützung für den Vorschlag "Explicit Resource Management" (#13752 von @fisker, #14862 von @sosukesuzuki)

Der Vorschlag der Stufe 2 "Explicit Resource Management" wird jetzt über Babel 7.20.0 und 7.22.0 unterstützt.

Denken Sie auch an unsere Richtlinie für nicht standardisierte Syntax, bevor Sie dieses vorgeschlagene Syntax-Feature mit Prettier verwenden.

// Examples
{
  using obj = g(); // block-scoped declaration
  const r = obj.next();
} // calls finally blocks in `g`

{
  await using obj = g(); // block-scoped declaration
  const r = obj.next();
} // calls finally blocks in `g`

Unterstützung für den "Import Reflection"-Vorschlag hinzugefügt (#13771 von @fisker)

Der Stage-2-Vorschlag "Import Reflection" wird jetzt über Babel 7.20.0 unterstützt. Beachten Sie auch hier unsere Richtlinie für nicht standardisierte Syntax, bevor Sie dieses vorgeschlagene Syntax-Feature verwenden.

// Examples
import module x from "<specifier>";

Inkonsistenzen zwischen Arrays/Tuples und Objekten/Records behoben (#14065 von @fisker)

// Input
foo.a().b().c([n, o])
foo.a().b().c(#[n, o])
foo.a().b().c({n, o})
foo.a().b().c(#{n, o})

// Prettier 2.8
foo.a().b().c([n, o]);
foo
  .a()
  .b()
  .c(#[n, o]);
foo.a().b().c({ n, o });
foo
  .a()
  .b()
  .c(#{ n, o });

// Prettier 3.0
foo.a().b().c([n, o]);
foo.a().b().c(#[n, o]);
foo.a().b().c({ n, o });
foo.a().b().c(#{ n, o });

Cursor-Tracking in JSX-Text korrigiert (#14163 von @fisker)

// Prettier 2.8
formatWithCursor(
  ["<>a", "  <div>hi</div>", "</>"].join("\n"),
  { cursorOffset: 3, parser: "babel" }
).cursorOffset;
// -> 2

// Prettier 3.0
(await formatWithCursor(
  ["<>a", "  <div>hi</div>", "</>"].join("\n"),
  { cursorOffset: 3, parser: "babel" }
)).cursorOffset;
// -> 6

Vermeidung unnötiger Einrückung bei verschachtelten await-Ausdrücken (#14192 von @thorn0)

Eine Verfeinerung von dieser Änderung in v2.3. Manchmal ist es nicht nötig, verschachtelte await-Ausdrücke zwangsweise einzurücken.

// Prettier 2.8
await Promise.all(
  (
    await readdir("src")
  ).map((path) => {
    import(`./${path}`);
  })
);

// Prettier 3.0
await Promise.all(
  (await readdir("src")).map((path) => {
    import(`./${path}`);
  }),
);

Unterstützung für den Regexp-Modifiers-Vorschlag hinzugefügt (#14391 von @fisker)

Siehe Regular Expression Pattern Modifiers for ECMAScript.

Fehlende Klammern und Semikolons um prettier-ignore-Knoten behoben (#14406 von @fisker)

// Input
async function request(url) {
  return (
    // prettier-ignore
    await fetch(url)
  ).json()
}

// Prettier 2.8
async function request(url) {
  return (
    // prettier-ignore
    await fetch(url).json()
  );
}

// Prettier 3.0
async function request(url) {
  return (
    // prettier-ignore
    (await fetch(url)).json()
  );
}

// Input
foo();
// prettier-ignore
[bar, baz].forEach(console.log)

// Prettier 2.8 (--no-semi)
foo()
// prettier-ignore
[bar, baz].forEach(console.log)

// Prettier 3.0
foo()
// prettier-ignore
;[bar, baz].forEach(console.log)

Entfernung unnötiger Klammern um Klassenausdrücke (#14409 von @fisker)

// Input
call(
  @dec class {}
);

// Prettier 2.8
call(
  (
    @dec
    class {}
  )
);

// Prettier 3.0
call(
  @dec
  class {},
);

Hinzufügen von Klammern am Kopf von ExpressionStatement statt um die gesamte Anweisung (#14599 von @fisker)

// Input
const isArray = (object) => ({}).toString.call(foo) === "[object Array]";

// Prettier 2.8
const isArray = (object) => ({}.toString.call(foo) === "[object Array]");

// Prettier 3.0
const isArray = (object) => ({}).toString.call(foo) === "[object Array]";

Verbesserte Konsistenz zwischen curryfied und nicht-curryfied Arrow-Funktionen (#14633 von @seiyab, @fisker)

// Input
Y(() => a ? b : c);
Y(() => () => a ? b : c);

// Prettier 2.8
Y(() => (a ? b : c));
Y(() => () => a ? b : c);

// Prettier 3.0
Y(() => (a ? b : c));
Y(() => () => (a ? b : c));

Prüfung auf Leerzeilen zwischen Array-Elementen korrigiert (#14736 von @solarized-fox)

// Input
[
  (a = b),

  c // comment
]

// Prettier 2.8
[
  (a = b),
  c, // comment
];

// Prettier 3.0
[
  (a = b),

  c, // comment
];

Nachgestellte Kommentare in Funktionsparametern für alle Parametertypen unterstützt (#14835 von @pieterv)

Unterstützung für nachgestellte Kommentare bei Funktionsparametern der Typen RestElement, ArrayPattern und ObjectPattern.

// Input
function Foo(
  ...bar
  // Trailing comment
) {}

// Prettier 2.8
function Foo(...bar) // Trailing comment
{}

// Prettier 3.0
function Foo(
  ...bar
  // Trailing comment
) {}

Unterstützung für Import-Attribute hinzugefügt (#14861, #14863 von @sosukesuzuki)

Unterstützung für den Import Attributes-Vorschlag.

import json from "./foo.json" with { type: "json" };
import("./foo.json", { with: { type: "json" } });

TypeScript

Führende Kommentare in Mapped Types mit readonly korrigieren (#13427 von @thorn0, @sosukesuzuki)

// Input
type Type = {
  // comment
  readonly [key in Foo];
};

// Prettier 2.8
type Type = {
  readonly // comment
  [key in Foo];
};

// Prettier 3.0
type Type = {
  // comment
  readonly [key in Foo];
};

Konsistente Formatierung von hängenden Kommentaren bei Tupeltypen und Arrays (#13608 von @sosukesuzuki)

// Input
type Foo = [
   // comment
];
const bar = [
   // comment
];

// Prettier 2.8
type Foo = [// comment];
const bar = [
   // comment
];

// Prettier 3.0
type Foo = [
   // comment
];
const bar = [
   // comment
];

Union-Typen werden im mehrzeiligen Modus gedruckt, wenn Kommentare vorhanden sind (#13860 von @PerfectPan)

// Input
type FooBar =
  | Number // this documents the first option
  | void // this documents the second option
  ;

// Prettier 2.8
type FooBar = Number | void; // this documents the first option // this documents the second option

// Prettier 3.0
type FooBar =
  | Number // this documents the first option
  | void; // this documents the second option

Verbesserte Kommentarausgabe und Cursor-Tracking bei Typannotationen (#14171 von @fisker)

// Input
let foo /* comment */ : number;

// Prettier 2.8
let foo: /* comment */ number;

// Prettier 3.0
<Same as input>

// Prettier 2.8
prettier.formatWithCursor("let foo: number", {
  cursorOffset: 7,
  parser: "babel",
}).cursorOffset;

// -> 9

// Prettier 3.0
(
  await prettier.formatWithCursor("let foo: number", {
    cursorOffset: 7,
    parser: "babel",
  })
).cursorOffset;

// -> 7

Umbruch bei TypeScript-Parameterproperties (#14402 von @seiyab)

// Input
class MyClass {
  constructor(
    protected x: number,
    private y: string
  ) {}
}

// Prettier 2.8
class MyClass {
  constructor(protected x: number, private y: string) {}
}

// Prettier 3.0
class MyClass {
  constructor(
    protected x: number,
    private y: string,
  ) {}
}

Formatierung von Union-Typen mit einzelnen Typen korrigieren (#14654 von @fisker und @auvred)

// Input
type T =
  | (
    | {
        value: number
      }
    | {
        value: string
      }
  )

// Prettier 2.8
type T =
  |
      | {
          value: number;
        }
      | {
          value: string;
        };

// Prettier 3.0
type T =
  | {
      value: number;
    }
  | {
      value: string;
    };

Verbesserte Erkennung von Zeilenumbrüchen in Mapped Types (#14659 von @fisker)

// Input
type A1 = { [A in B]:
T}
type A2 = {
  [A in B]:T}

// Prettier 2.8
type A1 = {
  [A in B]: T;
};
type A2 = {
  [A in B]: T;
};

// Prettier 3.0
type A1 = { [A in B]: T };
type A2 = {
  [A in B]: T;
};

Zeilenumbruch nach extends in Typparametern (#14672, #14858 von @sosukesuzuki)

// Input
export type OuterType2<
  LongerLongerLongerLongerInnerType extends LongerLongerLongerLongerLongerLongerLongerLongerOtherType
> = { a: 1 };

// Prettier 2.8
export type OuterType2<
  LongerLongerLongerLongerInnerType extends LongerLongerLongerLongerLongerLongerLongerLongerOtherType
> = { a: 1 };

// Prettier 3.0
export type OuterType2<
  LongerLongerLongerLongerInnerType extends
    LongerLongerLongerLongerLongerLongerLongerLongerOtherType,
> = { a: 1 };

Fehlendes erforderliches Komma in Typparametern korrigieren (#14688 von @fisker, @sosukesuzuki)

Bisher wurde das nachgestellte Komma nur bei Dateien mit der Endung .tsx gesetzt. Es zeigt sich, dass auch .mts- und .cts-Dateien dieses für das Parsen benötigen.

// Input
export const unsafeCoerce = <T,>(u: unknown): T => u as T

// Prettier 2.8
export const unsafeCoerce = <T>(u: unknown): T => u as T;

// Prettier 3.0
export const unsafeCoerce = <T,>(u: unknown): T => u as T;

Klammern um TSInstantiationExpression bei nachfolgendem Property-Zugriff beibehalten (#14701 von @morsko1)

// Input
(Array<string>).a;
(Array<string>)?.a;
(Array<string>)[a];
(Array<string>)?.[a];

// Prettier 2.8
Array<string>.a;
Array<string>?.a;
Array<string>[a];
Array<string>?.[a];

// Prettier 3.0
(Array<string>).a;
(Array<string>)?.a;
(Array<string>)[a];
(Array<string>)?.[a];

Problem mit doppeltem Semikolon durch // prettier-ignore in Signaturzeilen beheben (#14830 von @ot07)

// Input
type Foo = {
  (): void; // prettier-ignore
  second: string;
};

// Prettier 2.8
type Foo = {
  (): void;; // prettier-ignore
  second: string;
};

// Prettier 3.0
type Foo = {
  (): void; // prettier-ignore
  second: string;
};

Flow

Objekttypen in declare function-Signaturen brechen jetzt vor dem Rückgabetyp um (#13396 von @thorn0)

Dieses Verhalten wurde an die Formatierung in TypeScript angeglichen.

// Input
declare function bla (props: { a: boolean, b: string, c: number }): Promise<Array<foo>>

// Prettier 2.8
declare function bla(props: { a: boolean, b: string, c: number }): Promise<
  Array<foo>
>;

// Prettier 3.0
declare function bla(props: {
  a: boolean;
  b: string;
  c: number;
}): Promise<Array<foo>>;

Unterstützung für Conditional Types und Infer-Types (#14573 von @SamChou19815)

// Input
type TestReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

// Prettier 2.8
// Does not parse

// Prettier 3.0
type TestReturnType<T extends (...args: any[]) => any> = T extends (
  ...args: any[]
) => infer R
  ? R
  : any;

Unterstützung für Mapped Types und keyof (#14619 von @jbrown215)

// Input
type Mapped = { [key in keyof O]: number };

// Prettier 2.8
// Does not parse

// Prettier 3.0
type Mapped = { [key in keyof O]: number };

Unterstützung für Type Guards (#14767 von @panagosg7)

// Input
function isString (x: mixed): x is string { return typeof x === "string"; }

// Prettier 2.8
// Does not parse

// Prettier 3.0
function isString(x: mixed): x is string {
  return typeof x === 'string';
}

CSS

Verbesserte Formatierung von Custom Properties (#9209 von @fisker)

Dank PostCSS 8.0 können wir diese Randfälle bei Custom Properties nun besser behandeln.

/* Input */
:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a":1}}, [4]];
  --javascript: function(rule) { console.log(rule) };
}

@supports (--element(".minwidth", { "minWidth": 300 })) {
  [--self] {
    background: greenyellow;
  }
}

/* Prettier 2.8 */
SyntaxError: (postcss) CssSyntaxError Missed semicolon (3:20)
  1 | :root {
  2 |   --empty: ;
> 3 |   --JSON: [1, "2", {"three": {"a":1}}, [4]];
    |                    ^
  4 |   --javascript: function(rule) { console.log(rule) };
  5 | }
  6 |

/* Prettier 3.0 */
:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a": 1}}, [4]];
  --javascript: function(rule) {console.log(rule)};
}

@supports (--element(".minwidth", {"minWidth": 300})) {
  [--self] {
    background: greenyellow;
  }
}

Behalte Trailing-Comma für var-Funktion bei (#13402 von @sosukesuzuki)

/* Input */
.foo {
  --bar: var(--baz,);
}

/* Prettier 2.8 */
.foo {
  --bar: var(--baz);
}

/* Prettier 3.0 */
.foo {
  --bar: var(--baz,);
}

Korrigiere Zeilenumbruch in CSS-Deklaration mit Komma (#14208 von @mvorisek)

// Input
.myclass {
  box-shadow:
    inset 0 0 10px #555,
    0 0 20px black;
}

// Prettier 2.8
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

// Prettier 3.0
.myclass {
  box-shadow:
    inset 0 0 10px #555,
    0 0 20px black;
}

Korrektur für URLs mit Komma (#14476 von @seiyab)

/* Input */
@font-face {
  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}

/* Prettier 2.8 */
@font-face {
  src: url(RobotoFlex-VariableFont_GRADXTRAYOPQYTASYTDEYTFIYTLCYTUCopszslntwdthwght.ttf);
}

/* Prettier 3.0 */
@font-face {
  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}

SCSS

Korrigiere Formatierung von String-Werten mit Escape-Zeichen \ (#13487 von @sosukesuzuki)

/* Input */
$description: "Lorem ipsum dolor sit \"amet\", consectetur adipiscing elit, " +
  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

/* Prettier 2.8 */
$description: 'Lorem ipsum dolor sit "amet", consectetur adipiscing elit, '+ "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

/* Prettier 3.0 */
$description: 'Lorem ipsum dolor sit "amet", consectetur adipiscing elit, ' +
  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

Less

Behebe Parsing-Fehler bei Interpolation (#11343 von @fisker)

// Input
@{selector}-title{ @{prop}-size: @{color} }

// Prettier 2.8
SyntaxError: CssSyntaxError: Unknown word (1:20)
> 1 | @{selector}-title{ @{prop}-size: @{color} }

// Prettier 3.0
@{selector}-title {
  @{prop}-size: @{color};
}

Belasse Inline-JavaScript-Code unverändert (#14109 von @fisker)

// Input
.calcPxMixin() {
  @functions: ~`(function() {
    const designWidth = 3840
    const actualWidth = 5760
    this.calcPx = function(_) {
      return _ * actualWidth / designWidth + 'px'
    }
  })()`;
}

// Prettier 2.8
.calcPxMixin() {
  @functions: ~`(
      function() {const designWidth = 3840 const actualWidth = 5760 this.calcPx =
        function(_) {return _ * actualWidth / designWidth + "px"}}
    )
    () `;
}

// Prettier 3.0
<Same as input>

HTML

Drucke HTML5-doctype in Kleinbuchstaben (#7391 von @fisker)

<!-- Input -->
<!DocType html>
<html><head></head><body></body></html>

<!-- Prettier 2.8 -->
<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

<!-- Prettier 3.0 -->
<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Aktualisiere angular-html-parser (#13578 von @thorn0)

Prettiers Fork von Angulars HTML-Parser wurde mit dem Upstream synchronisiert.

Formatiere <script> innerhalb von SVG (#14400 von @fisker)

<!-- Input -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
  const element = document.getElementById('foo')
   if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
</svg>

<!-- Prettier 2.8 -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <script>
    document.addEventListener( 'DOMContentLoaded', () => { const element =
    document.getElementById('foo') if (element) { element.fillStyle =
    'currentColor' } });
  </script>
</svg>

<!-- Prettier 3.0 -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const element = document.getElementById("foo");
      if (element) {
        element.fillStyle = "currentColor";
      }
    });
  </script>
</svg>

Erkenne <search>-Element (#14615 von @fisker)

Die HTML-Spezifikation fügte das <search>-Element hinzu.

<!-- Input -->
<SEARCH title="Website">
  ...
</SEARCH>

<!-- Prettier 2.8 -->
<SEARCH title="Website"> ... </SEARCH>

<!-- Prettier 3.0 -->
<search title="Website">...</search>

Vue

Ignoriere htmlWhitespaceSensitivity bei Formatierung von Vue-SFC-Root-Blöcken (#14401 von @fisker)

<!-- Input -->
<docs lang=unknown></docs><docs lang=unknown></docs><!-- display: inline --><docs lang=unknown></docs><docs lang=unknown style="display: inline"></docs>

<!-- Prettier 2.8 (--html-whitespace-sensitivity=strict) -->
<docs lang="unknown"></docs>><docs lang="unknown"></docs
><!-- display: inline --><docs lang="unknown"></docs
>><docs lang="unknown" style="display: inline"></docs>

<!-- Prettier 3.0 -->
<docs lang="unknown"></docs>
<docs lang="unknown"></docs>
<!-- display: inline -->
<docs lang="unknown"></docs>
<docs lang="unknown" style="display: inline"></docs>

Formatiere TypeScript-Ausdrücke in Attribut-Bindings (#14506 von @seiyab)

<!-- Input -->
<script lang="ts"></script>
<template>
  <comp :foo="   (a:string)=>1"/>
</template>

<!-- Prettier 2.8 -->
<script lang="ts"></script>
<template>
  <comp :foo="   (a:string)=>1" />
</template>

<!-- Prettier 3.0 -->
<script lang="ts"></script>
<template>
  <comp :foo="(a: string) => 1" />
</template>

Korrigiere Vue-Filter-Erkennung (#14542 von @fisker)

<!-- Input -->
<template>
  <div>
    {{
      fn(
        bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
      )
      | filter1
      | filter2
      | filter3
      | filter4
    }}
  </div>
</template>

<!-- Prettier 2.8 -->
<template>
  <div>
    {{
      fn(
        bitwise
          | or
          | operator
          | a_long_long_long_long_long_long_long_long_long_long_variable
      )
        | filter1
        | filter2
        | filter3
        | filter4
    }}
  </div>
</template>

<!-- Prettier 3.0 -->
<template>
  <div>
    {{
      fn(
        bitwise |
          or |
          operator |
          a_long_long_long_long_long_long_long_long_long_long_variable,
      )
        | filter1
        | filter2
        | filter3
        | filter4
    }}
  </div>
</template>

Vermeide unnötiges führendes Semikolon (#14557 von @fisker)

<!-- Input -->
<template>
  <div @click="[foo, bar].forEach(fn => void fn())"></div>
</template>

<!-- Prettier 2.8 (With `--no-semi` option) -->
<template>
  <div @click=";[foo, bar].forEach((fn) => void fn())"></div>
</template>

<!-- Prettier 3.0 -->
<template>
  <div @click="[foo, bar].forEach((fn) => void fn())"></div>
</template>

Formatiere TS-Ausdrücke bei lang="ts" in beliebigen Script-Tags (#14587 von @seiyab)

<!-- Input -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 2.8 -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 3.0 -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x as number).toFixed(2) }}
</template>

Angular

Update @angular/compiler auf v14 (#13609 von @fisker)

• Unterstützung für Kurzschreibweise von Objekten

• Unterstützung für Quote Expressions entfernt

<!-- Input -->
<div [input]="{a, b   :   2 }"></div>

<!-- Prettier 2.8 -->
Error: Cannot find front char /:/ from index 0 in "{a, b   :   2 }"

<!-- Prettier 3.0 -->
<div [input]="{ a, b: 2 }"></div>

<!-- Input -->
<a [href]="http://google.com">Click me</a>

<!-- Prettier 2.8 -->
<a [href]="http:  //google.com">Click me</a>

<!-- Prettier 3.0 -->
<a [href]="http://google.com">Click me</a>

Klammern mit Nullish Coalescing Operator korrigiert (#14216 von @thron0)

<!-- Input -->
<img [src]="(x && y) ?? z" />

<!-- Prettier 2.8 -->
<img [src]="x && y ?? z" />

<!-- Prettier 3.0 -->
<img [src]="(x && y) ?? z" />

Unterstützung für berechnetes Optional Chaining (#14658 von @fisker)

<!-- Input -->
<img [src]="   a?.[0]" />

<!-- Prettier 2.8 -->
<img [src]="   a?.[0]" />

<!-- Prettier 3.0 -->
<img [src]="a?.[0]" />

Leerzeichen nach Pipe-Namen entfernt (#14961 von @waterplea)

Wir haben in Prettier 2.8 ein neues Format für Pipes eingeführt, das jedoch in der Community nicht akzeptiert wurde.

Daher führen wir ein neues Format ein, das die Rückmeldungen der Community berücksichtigt.

Weitere Informationen zur Diskussion finden Sie unter https://github.com/prettier/prettier/issues/13887.

<!-- Input -->
<my-component
  [value]="value | transform: arg1 : arg2 | format: arg3 : arg4"
></my-component>

<!-- Prettier 2.8 -->
<my-component
  [value]="value | transform : arg1 : arg2 | format : arg3 : arg4"
></my-component>

<!-- Prettier 3.0 -->
<my-component
  [value]="value | transform: arg1 : arg2 | format: arg3 : arg4"
></my-component>

Markdown

Mehrere Leerzeichen in Inline-Code beibehalten (#13590 von @kachkaev und @thorn0)

Bisher wurden mehrere Leerzeichen in Inline-Code zu einem einzelnen Leerzeichen reduziert. Dies entsprach nicht der CommonMark-Spezifikation und wurde daher geändert.

<!-- Input -->
`   foo   bar   baz   `

<!-- Prettier 2.8 -->
` foo bar baz `

<!-- Prettier 3.0 -->
`   foo   bar   baz   `

API

.d.ts-Dateien hinzugefügt (#14212 von @sosukesuzuki, @fisker)

Es wurden Typdefinitionsdateien hinzugefügt, die für die Verwendung der JavaScript-API von Prettier aus TypeScript erforderlich sind. Dadurch entfällt die Notwendigkeit für Benutzer, @types/prettier zu installieren.

prettier.util aktualisiert (#14317, #14320 von @fisker)

• prettier.util.getNextNonSpaceNonCommentCharacter hinzugefügt

• prettier.util.getNextNonSpaceNonCommentCharacter geändert

  Signatur wurde von

  function getNextNonSpaceNonCommentCharacterIndex<N>(
    text: string,
    node: N,
    locEnd: (node: N) => number,
  ): number | false;

  zu

  function getNextNonSpaceNonCommentCharacterIndex(
    text: string,
    startIndex: number,
  ): number | false;

  geändert

• prettier.util.isPreviousLineEmpty geändert

  Signatur wurde von

  function isPreviousLineEmpty<N>(
    text: string,
    node: N,
    locStart: (node: N) => number,
  ): boolean;

  zu

  function isPreviousLineEmpty(text: string, startIndex: number): boolean;

  geändert

• Geänderte prettier.util.isNextLineEmpty

  Die Signatur hat sich von

  function isNextLineEmpty<N>(
    text: string,
    node: N,
    locEnd: (node: N) => number,
  ): boolean;

  zu

  function isNextLineEmpty(text: string, startIndex: number): boolean;

  geändert.

• Veraltete prettier.util.isNextLineEmptyAfterIndex

  Verwenden Sie stattdessen prettier.util.isNextLineEmpty.

Details finden Sie in der Dokumentation.

Behebung des Plugin-Lade-Caches (#14576 von @fisker)

Plugin-Instanzen wurden fälschlicherweise zwischengespeichert, siehe dieses Issue für Details.

Keine Formatierung von unbekanntem Code mit babel-Parser (#14718 von @fisker)

await prettier.format("foo")

// Prettier 2.8
No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
'foo;\n'

// Prettier 3.0
UndefinedParserError: No parser and no file path given, couldn't infer a parser.

CLI

Aussagekräftigere Fehlermeldungen (#11369 von @webark)

"Forgot to run Prettier?" wurde zu "Run Prettier with --write to fix." aktualisiert.

Die Kernaussage bleibt erhalten, die Formulierung ist jedoch präziser und weniger umgangssprachlich.

Änderung von --loglevel zu --log-level (#13204 von @sosukesuzuki)

# Prettier 2.8
prettier test.js --loglevel=debug

# Prettier 3.0
prettier test.js --log-level=debug

Mehrere --ignore-path-Parameter möglich (#14332 von @fisker)

Es können nun mehrere --ignore-path-Parameter übergeben werden.

prettier . --ignore-path=.prettier-ignore --ignore-path=.eslintignore

POSIX-Pfaddarstellung unter Windows (#14333 von @fisker)

Entspricht dem Verhalten von Tools wie ESLint und Stylelint.

// Prettier 2.8
Checking formatting...
[warn] src\utilities\create-get-visitor-keys.js
[warn] src\utilities\unexpected-node-error.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

// Prettier 3.0
Checking formatting...
[warn] src/utilities/create-get-visitor-keys.js
[warn] src/utilities/unexpected-node-error.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

Keine Glob-Erweiterung über symbolische Links (#14627 von @andersk)

Prettier folgt symbolischen Links bei der Erweiterung von Kommandozeilenparametern nicht mehr. Dies vermeidet Probleme wie Links außerhalb des Quellbaums, Links zu ignorierten Dateien oder symbolische Link-Zyklen.

Zeilenumbruch nach Dateipfaden mit Fehlern (#14788 von @sosukesuzuki)

Bisher führte nur --write einen Zeilenumbruch vor Fehlermeldungen durch, jetzt gilt dies auch für andere Optionen.

# Input
prettier ./test.js

# Prettier 2.8
test.js[error] test.js: SyntaxError: Unexpected token: ')' (1:6)
[error] > 1 | 1 (+-) hoge
[error]     |      ^

# Prettier 3.0
test.js
[error] test.js: SyntaxError: Unexpected token: ')' (1:6)
[error] > 1 | 1 (+-) hoge
[error]     |

Dateinamenbereinigung vor der Ausgabe ignorierten Codes (#14794 von @fisker)

# Input
echo test.js > .prettierignore
echo code > test.js
prettier ./test.js

# Prettier 2.8
test.jscode

# Prettier 3.0
code