Prettier 3.6: Experimentelle schnelle CLI und neue OXC- und Hermes-Plugins!

Inoffizielle Beta-Übersetzung

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

Diese Version enthält mehrere wichtige neue Funktionen, die wir voller Begeisterung mit euch teilen möchten.

Zunächst stellen wir eine neue experimentelle Hochleistungs-CLI hinter einem Feature-Flag (--experimental-cli) bereit. Diese CLI war bisher nur in prettier@next verfügbar, könnt ihr sie jetzt aber einfach durch ein Flag aktivieren. Wir ermutigen euch, sie auszuprobieren und euer Feedback mit uns zu teilen! Wenn ihr Details zur internen Implementierung erfahren wollt, lest Prettiers CLI: Performance Deep Dive von Fabio.

Zusätzlich veröffentlichen wir zwei neue offizielle Plugins: @prettier/plugin-oxc und @prettier/plugin-hermes. Diese Plugins werden separat vom Prettier-Kern bereitgestellt.

Wir möchten allen, die diese großartige Veröffentlichung möglich gemacht haben, unseren herzlichsten Dank aussprechen: @fabiospampinato, @43081j und @pralkarz zusammen mit den neuen CLI-Mitwirkenden, @boshen und @overlookmotel sowie anderen OXC-Mitwirkenden, den Teams von Flow und Hermes bei Meta. Vielen Dank für eure großartigen Beiträge!

Wir sind gespannt, wie diese neuen Funktionen eure Entwicklungserfahrung verbessern werden. Viel Spaß beim Formatieren!

Höhepunkte

CLI

Experimentelle CLI-Unterstützung (#17151, #17396 von @fisker)

Ihr habt vielleicht bereits von unserer neuen leistungsoptimierten CLI gehört oder sie verwendet. Ab Prettier 3.6 könnt ihr sie nun ohne Installation der instabilen v4-Version nutzen.

# Run CLI with `--experimental-cli`
prettier . --check --experimental-cli

# Or use environment variable `PRETTIER_EXPERIMENTAL_CLI=1`
PRETTIER_EXPERIMENTAL_CLI=1 prettier . --check

JavaScript

Neues offizielles Plugin @prettier/plugin-oxc hinzugefügt (#17472, #17483 von @fisker)

@prettier/plugin-oxc basiert auf OXC (einem schnellen JavaScript- und TypeScript-Parser in Rust).

Dieses Plugin enthält zwei neue Parser: oxc (JavaScript-Syntax) und oxc-ts (TypeScript-Syntax). So verwendest du dieses Plugin:

1. Installiere das Plugin

   yarn add --dev prettier @prettier/plugin-oxc

2. Füge Folgendes zu deiner .prettierrc-Datei hinzu

   plugins:
     - "@prettier/plugin-oxc"

Aufgrund von Paketgrößenbeschränkungen ist dieses Plugin nicht im prettier-Paket enthalten und muss separat installiert werden.

Weitere Informationen findest du auf der Paket-Homepage.

Vielen Dank an das OXC-Team (@boshen, @overlookmotel und andere Mitwirkende).

Flow

Neues offizielles Plugin @prettier/plugin-hermes hinzugefügt (#17520 von @fisker)

@prettier/plugin-hermes basiert auf der Hermes JS Engine.

Dieses Plugin enthält einen neuen Parser hermes (für Flow-Syntax). So verwenden Sie es:

1. Installieren Sie das Plugin

   yarn add --dev prettier @prettier/plugin-hermes

2. Fügen Sie Folgendes Ihrer .prettierrc-Datei hinzu

   plugins:
     - "@prettier/plugin-hermes"

Aufgrund von Paketgrößenbeschränkungen ist dieses Plugin nicht im prettier-Paket enthalten und muss separat installiert werden.

Wir planen, dies in v4 als Standardparser für Flow-Syntax einzuführen und werden den babel-flow-Parser in v4 entfernen. Bitte testen Sie es.

Weitere Informationen finden Sie auf der Paket-Startseite.

Vielen Dank an das Hermes-Team.

Weitere Änderungen

JavaScript

Klammern für SequenceExpression in ReturnStatement und ExpressionStatement hinzugefügt (#17085 von @TYKevin)

// Input
function a() {
  return ( a, b)
}

(a(), b());

// Prettier 3.5
function a() {
  return a, b;
}

a(), b();

// Prettier 3.6
function a() {
  return (a, b);
}

(a(), b());

Klammern für AssignmentExpression in Klassen-Eigenschaftsschlüsseln hinzugefügt (#17145 von @fisker)

Bisher wurden Klammern nur bei AssignmentExpression in Objektschlüsseln, nicht aber in Klassen-Eigenschaftsschlüsseln hinzugefügt. Dank an Biome für den Hinweis auf diese Inkonsistenz.

// Input
a = {
  [(x = "key")]: 1,
}

class A {
  [(x = "property")] = 1;
  [(x = "method")]() {}
}

// Prettier 3.5
a = {
  [(x = "key")]: 1,
};

class A {
  [x = "property"] = 1;
  [(x = "method")]() {}
}

// Prettier 3.6
a = {
  [(x = "key")]: 1,
};

class A {
  [(x = "property")] = 1;
  [(x = "method")]() {}
}

Klammern für Zahlen in optionalen Member-Ausdrücken hinzugefügt (#17190 von @fisker)

Vor Prettier 3.6 gab es eine Inkonsistenz bei der Formatierung von Member-Ausdrücken, bei denen das Objekt eine Zahl ist.

Bei Verwendung des babel-Parsers (und anderer Babel-basierter Parser) wurde die Zahl ohne Klammern ausgegeben, während der typescript-Parser (und andere ESTree-Parser) Klammern hinzufügten.

Technisch sind Klammern nicht erforderlich, aber wenn 1?.toString() ausgegeben wird und Benutzer später das ?. entfernen möchten, können sie das Fragezeichen nicht einfach löschen, da 1.toString() einen SyntaxError verursacht. Aus diesem Grund setzen wir nun immer Klammern.

// Input
(1)?.toString();
(1.5)?.toString();

// Prettier 3.5 (--parser=babel)
1?.toString();
1.5?.toString();

// Prettier 3.5 (--parser=typescript)
(1)?.toString();
(1.5)?.toString();

// Prettier 3.6
(1)?.toString();
(1.5)?.toString();

Unterstützung für experimentelle Records & Tuples entfernt (#17363 von @fisker)

Der ES-Vorschlag JavaScript Records & Tuples Proposal wurde zurückgezogen.

• Hinweis zu nicht-standardisierter Syntax

Leerzeichen zwischen CSS-Wörtern und eingebetteten Ausdrücken erhalten (#17398 von @sosukesuzuki)

// Input
const Heading = styled.h1`
    font-size: var(--font-size-h${level});
`;

// Prettier 3.5
const Heading = styled.h1`
    font-size: var(--font-size-h ${level});
`;

// Prettier 3.6
const Heading = styled.h1`
    font-size: var(--font-size-h${level});
`;

Inkonsistente Zuweisungsformatierung korrigiert (#17469 von @fisker)

// Input
didScheduleRenderPhaseUpdateDuringThisPassFoo = didScheduleRenderPhaseUpdate = true

// Prettier 3.5 (--parser=babel)
didScheduleRenderPhaseUpdateDuringThisPassFoo =
  didScheduleRenderPhaseUpdate = true;

// Prettier 3.5 (--parser=typescript)
didScheduleRenderPhaseUpdateDuringThisPassFoo = didScheduleRenderPhaseUpdate =
  true;

// Prettier 3.6
didScheduleRenderPhaseUpdateDuringThisPassFoo =
  didScheduleRenderPhaseUpdate = true;

Inkonsistente Member-Chain-Formatierung korrigiert (#17470 von @fisker)

// Input
s.get(u)?.trigger({ triggerKind: y.SignatureHelpTriggerKind.InvokeFooBarBaz123 });

// Prettier 3.5 (--parser=babel)
s.get(u)?.trigger({
  triggerKind: y.SignatureHelpTriggerKind.InvokeFooBarBaz123,
});

// Prettier 3.5 (--parser=typescript)
s
  .get(u)
  ?.trigger({ triggerKind: y.SignatureHelpTriggerKind.InvokeFooBarBaz123 });

// Prettier 3.6
s.get(u)?.trigger({
  triggerKind: y.SignatureHelpTriggerKind.InvokeFooBarBaz123,
});

Optionales Chaining als berechneter Schlüssel korrigiert (#17486 von @fisker)

// Input
const a = { [y?.z]() {} };
class A { [y?.z]() {} };

// Prettier 3.5
const a = { [y?.z]?() {} };
class A {
  [y?.z]?() {}
}

// Prettier 3.6
const a = { [y?.z]() {} };
class A {
  [y?.z]() {}
}

Typecast-Kommentare für acorn- und meriyah-Parser unterstützen (#17491, #17566 von @ArnaudBarre, #17600 von #fisker)

Dies wurde bisher nur vom Babel-Parser unterstützt.

// Input
/** @type {MyType} */ (x).foo;

// Prettier 3.5 (--parser=acorn|meriyah)
/** @type {MyType} */ x.foo;

// Prettier 3.6
/** @type {MyType} */ (x).foo;

Instabile Kommentarformatierung in getaggten Template-Literalen korrigiert (#17510 von @fisker)

// Input
foo
  // Comment
  `x`

// Prettier 3.5 (First format)
foo// Comment
`x`;

// Prettier 3.5 (Second format)
foo // Comment
`x`;

// Prettier 3.6
foo // Comment
`x`;

Konsistenz für JSX in optionalen Methodenaufrufen verbessert (#17616 von @seiyab)

// Input
<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      ?.map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;

// Prettier 3.5 (ESTree based parsers like espree and typescript)
<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      ?.map((_, i) => <h2 key={i}>{i + 1}</h2>)}
  </div>
</SuspendyTree>;

// Prettier 3.5 (babel and babel-ts parser)
<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      ?.map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;

// Prettier 3.6 (parsers of both types)
<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      ?.map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;

TypeScript

Import-Typ-Attribute in TSImportType unterstützen (#16881 von @fisker)

// Input
type A = import("foo", {with: {type: "json"}})

// Prettier 3.5
type A = import("foo")

// Prettier 3.6
type A = import("foo", { with: { type: "json" } });

Kommentare in logischen Ausdrücken und Schnittstellentypen korrigiert (#17193 von @fisker)

// Input
export type ErrorLike =
  SerializedProps<Error> & 
  // cause is a new addition to Error that is not yet available in all runtimes. We have added
  // it to try and pinpoint additional reasoning for failures such as Node's fetch.
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
  { cause?: unknown };

// Prettier 3.5
export type ErrorLike =
  SerializedProps<Error> & // cause is a new addition to Error that is not yet available in all runtimes. We have added
  // it to try and pinpoint additional reasoning for failures such as Node's fetch.
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
  { cause?: unknown };

// Prettier 3.5 (second format)
export type ErrorLike =
  SerializedProps<Error> & // it to try and pinpoint additional reasoning for failures such as Node's fetch. // cause is a new addition to Error that is not yet available in all runtimes. We have added
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
  { cause?: unknown };

// Prettier 3.6
export type ErrorLike = SerializedProps<Error> &
  // cause is a new addition to Error that is not yet available in all runtimes. We have added
  // it to try and pinpoint additional reasoning for failures such as Node's fetch.
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
  { cause?: unknown };

Zeilenumbrucherkennung in Mapped Types verbessert (#17498 von @fisker)

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

// Prettier 3.5
type A = {
  readonly [A in B]: T;
};

// Prettier 3.6
type A = { readonly [A in B]: T };

Kein zusätzliches Semikolon nach prettier-ignore-markierten Index-Signaturen (#17538 von @sosukesuzuki)

// Input
type foo = {
  // prettier-ignore
  [key: string]: bar;
};

// Prettier 3.5
type foo = {
  // prettier-ignore
  [key: string]: bar;;
};

// Prettier 3.6
type foo = {
  // prettier-ignore
  [key: string]: bar;
};

Flow

Fehlende Klammern in ConditionalTypeAnnotation korrigiert (#17196 von @fisker)

// Input
type T<U> = 'a' | ('b' extends U ? 'c' : empty);
type T<U> = 'a' & ('b' extends U ? 'c' : empty);

// Prettier 3.5
type T<U> = "a" | "b" extends U ? "c" : empty;
type T<U> = "a" & "b" extends U ? "c" : empty;

// Prettier 3.6
type T<U> = "a" | ("b" extends U ? "c" : empty);
type T<U> = "a" & ("b" extends U ? "c" : empty);

JSON

Formatierung kommentar-exklusiver JSONC-Dateien erlauben (#17269 von @fisker)

// Input
// Comment

// Prettier 3.5
SyntaxError: Unexpected token (1:11)
> 1 | // Comment
    |           ^

// Prettier 3.6
// Comment

Geklammerte Ausdrücke verbieten (#17598 von @fisker)

// Input
[1, (2)]

// Prettier 3.5
[1, 2]

// Prettier 3.6
SyntaxError: 'ParenthesizedExpression' is not allowed in JSON. (1:5)
> 1 | [1, (2)]
    |     ^^^

CSS

@utility-Direktive für Tailwind unterstützen (#17362 von @sosukesuzuki)

Diese Änderung unterstützt die @utility-Direktive für Tailwind CSS V4.

/* Input */
@utility tab-* {
  tab-size: --value(--tab-size-*);
}

/* Prettier 3.5 */
@utility tab-* {
  tab-size: --value(--tab-size- *);
}

/* Prettier 3.6 */
@utility tab-* {
  tab-size: --value(--tab-size-*);
}

Entfernung der zusätzlichen Einrückung für :has-Pseudo-Aufruf (#17541 von @sosukesuzuki)

/* Input */
li:has(
  path[d="M544,272H480V150.627L523.314,107.314A16,16,0,0,0,500.686,84.687L457.373,128H415a127.00381,127.00381,0,1,0-254,0H118.627L75.314,84.687A16,16,0,1,0,52.686,107.314L96,150.627V272H32a16,16,0,0,0,0,32H96v24a174.98856,174.98856,0,0,0,30.484,98.889L68.687,484.686a15.99972,15.99972,0,1,0,22.627,22.627l55.616-55.616A175.45165,175.45165,0,0,0,272,504h32a175.45165,175.45165,0,0,0,125.07-52.303l55.616,55.616a15.99972,15.99972,0,0,0,22.627-22.627l-57.797-57.797A174.98856,174.98856,0,0,0,480,328V304h64a16,16,0,0,0,0-32ZM288,32.01263A95.99568,95.99568,0,0,1,383,128H193A95.99568,95.99568,0,0,1,288,32.01263ZM448,328c0,79.401-64.598,144-144,144V236a12.00052,12.00052,0,0,0-12-12h-8a12.00052,12.00052,0,0,0-12,12V472c-79.402,0-144-64.599-144-144V160H448Z"]
) {
  display: none;
}

/* Prettier 3.5 */
li:has(
    path[d="M544,272H480V150.627L523.314,107.314A16,16,0,0,0,500.686,84.687L457.373,128H415a127.00381,127.00381,0,1,0-254,0H118.627L75.314,84.687A16,16,0,1,0,52.686,107.314L96,150.627V272H32a16,16,0,0,0,0,32H96v24a174.98856,174.98856,0,0,0,30.484,98.889L68.687,484.686a15.99972,15.99972,0,1,0,22.627,22.627l55.616-55.616A175.45165,175.45165,0,0,0,272,504h32a175.45165,175.45165,0,0,0,125.07-52.303l55.616,55.616a15.99972,15.99972,0,0,0,22.627-22.627l-57.797-57.797A174.98856,174.98856,0,0,0,480,328V304h64a16,16,0,0,0,0-32ZM288,32.01263A95.99568,95.99568,0,0,1,383,128H193A95.99568,95.99568,0,0,1,288,32.01263ZM448,328c0,79.401-64.598,144-144,144V236a12.00052,12.00052,0,0,0-12-12h-8a12.00052,12.00052,0,0,0-12,12V472c-79.402,0-144-64.599-144-144V160H448Z"]
  ) {
  display: none;
}

/* Prettier 3.6 */
li:has(
  path[d="M544,272H480V150.627L523.314,107.314A16,16,0,0,0,500.686,84.687L457.373,128H415a127.00381,127.00381,0,1,0-254,0H118.627L75.314,84.687A16,16,0,1,0,52.686,107.314L96,150.627V272H32a16,16,0,0,0,0,32H96v24a174.98856,174.98856,0,0,0,30.484,98.889L68.687,484.686a15.99972,15.99972,0,1,0,22.627,22.627l55.616-55.616A175.45165,175.45165,0,0,0,272,504h32a175.45165,175.45165,0,0,0,125.07-52.303l55.616,55.616a15.99972,15.99972,0,0,0,22.627-22.627l-57.797-57.797A174.98856,174.98856,0,0,0,480,328V304h64a16,16,0,0,0,0-32ZM288,32.01263A95.99568,95.99568,0,0,1,383,128H193A95.99568,95.99568,0,0,1,288,32.01263ZM448,328c0,79.401-64.598,144-144,144V236a12.00052,12.00052,0,0,0-12-12h-8a12.00052,12.00052,0,0,0-12,12V472c-79.402,0-144-64.599-144-144V160H448Z"]
) {
  display: none;
}

Less

Korrektur falsch kleingeschriebener Funktionsargumente (#17502 von @fisker)

// Input
.what {
  .make-modifier(1A, "1a.png");
  .make-modifier(AA, "1a.png");
}

// Prettier 3.5
.what {
  .make-modifier(1a, "1a.png");
  .make-modifier(AA, "1a.png");
}

// Prettier 3.6
.what {
  .make-modifier(1A, "1a.png");
  .make-modifier(AA, "1a.png");
}

HTML

Korrektur der Formatierung bei Tag-Namen als Objekt-Prototyp-Eigenschaft (#17501 von @fisker)

<!-- Input -->
<constructor>
	text
</constructor>

<!-- Prettier 3.5 -->
TypeError: Vn(...).startsWith is not a function

<!-- Prettier 3.6 -->
<constructor> text </constructor>

Angular

Unterstützung für TemplateLiteral eingeführt in Angular 19.2 (#17238 von @fisker)

Angular 19.2 hat Unterstützung für TemplateLiteral hinzugefügt.

<!-- Input -->
<div>{{ `Hello, ${
getName('world')}` }}</div>

<!-- Prettier 3.5 -->
<div>
  {{ `Hello, ${
getName('world')}` }}
</div>

<!-- Prettier 3.6 -->
<div>{{ `Hello, ${getName("world")}` }}</div>

Entfernung des zusätzlichen Doppelpunkts nach track in der Angular @for-Control-Flow (#17280 von @claudio-herger)

// Input
@for (item of items; let i = $index; let count = $count; track block) {}

// Prettier 3.5
@for (item of items; let i = $index; let count = $count; track: block) {}

// Prettier 3.6
@for (item of items; let i = $index; let count = $count; track block) {}

Unterstützung für Angular 20 (#17534 von @fisker)

// Input
{{
  ( (a in  (b)))
}}
{{
  ( (tag ` a ${ b } \u0063 `))
}}
{{
  (  (` a ${ b } \u0063 `))
}}
{{ void(1 + 2) }}

// Prettier 3.5
The new syntax is not correctly recognized.

// Prettier 3.6
{{ a in b }}
{{ tag` a ${b} \u0063 ` }}
{{ ` a ${b} \u0063 ` }}
{{ void (1 + 2) }}

MJML

Aktivierung der CSS-Formatierung innerhalb des <mj-style>-Tags (#17338 von @iryusa)

<!-- Input -->
<mj-style>
.hello {
  color: blue;
    border: 1px solid blue;
font-size:12px;
} p { font-size: 14px; }
</mj-style>

<!-- Prettier 3.5 -->
<mj-style>
  .hello { color: blue; border: 1px solid blue; font-size:12px; } p { font-size:
  14px; }
</mj-style>

<!-- Prettier 3.6 -->
<mj-style>
  .hello {
    color: blue;
    border: 1px solid blue;
    font-size: 12px;
  }
  p {
    font-size: 14px;
  }
</mj-style>

Korrektes Parsen von <mj-style> und <mj-raw> (#17400 von @fisker)

<!-- Input -->
<mj-style>
  a::before {
    content: "</p>";
  }
</mj-style>

<!-- Prettier 3.5 -->
SyntaxError: Unexpected closing tag "p". 

<!-- Prettier 3.6 -->
Correctly parsed as CSS.

Markdown

Korrektur benachbarter Markdown-Syntax in Blockzitaten (#16596 von @fiji-flo)

<!-- Input -->
> `x`
> `y`

> _x_
> _y_

> [foo](http://foo)
> [bar](http://bar)

> `this` behaves
> `correctly`

<!-- Prettier 3.5 -->
> `x` > `y`

> _x_ > _y_

> [foo](http://foo) > [bar](http://bar)

> `this` behaves `correctly`

<!-- Prettier 3.6 -->
> `x` `y`

> _x_ _y_

> [foo](http://foo) [bar](http://bar)

> `this` behaves `correctly`

Korrektur unerwarteter Zeilenumbrüche in Listen durch Markdown (#16637 von @byplayer)

<!-- Input -->
- Level 1
  - Level 1-1

- Level 2

<!-- Prettier 3.5 -->
- Level 1

  - Level 1-1

- Level 2


<!-- Prettier 3.6 -->
- Level 1
  - Level 1-1

- Level 2

Korrektur der starken Hervorhebung (#17143 von @fiji-flo)

Die meisten Markdown-Implementierungen unterstützen 1**_2_**3 nicht, daher bevorzuge 1***2***3.

<!-- Input -->
1***2***3
1**_2_**3

<!-- Prettier 3.5 -->
1**_2_**3
1**_2_**3

<!-- Prettier 3.6 -->
1***2***3
1***2***3

YAML

Kein Zeilenumbruch vor leeren Maps oder Sequenzen einfügen (#16074 von @BapRx)

# Input
---
myDict: {}
  # comment
myList: []
  # comment

# Prettier 3.5
---
myDict:
  {}
  # comment
myList:
  []
  # comment

# Prettier 3.6
---
myDict: {}
  # comment
myList: []
  # comment

API

Akzeptieren von URL in der plugins-Option (#17166 von @fisker)

Die plugins-Option akzeptiert nun URL mit file:-Protokoll oder URL-Strings, die mit file: beginnen, in allen öffentlichen APIs.

// `URL`
await prettier.check("foo", {
  parser: "my-cool-parser",
  plugins: [new URL("./path/to/plugin.js", import.meta.url)],
});
await prettier.format("foo", {
  parser: "my-cool-parser",
  plugins: [new URL("./path/to/plugin.js", import.meta.url)],
});
await prettier.formatWithCursor("foo", {
  parser: "my-cool-parser",
  cursorOffset: 2,
  plugins: [new URL("./path/to/plugin.js", import.meta.url)],
});
await prettier.getFileInfo("/path/to/file", {
  plugins: [new URL("./path/to/plugin.js", import.meta.url)],
});
await prettier.getSupportInfo({
  plugins: [new URL("./path/to/plugin.js", import.meta.url)],
});

// URL string
await prettier.check("foo", {
  parser: "my-cool-parser",
  plugins: ["file:///path/to/plugin.js"],
});
await prettier.format("foo", {
  parser: "my-cool-parser",
  plugins: ["file:///path/to/plugin.js"],
});
await prettier.formatWithCursor("foo", {
  parser: "my-cool-parser",
  cursorOffset: 2,
  plugins: ["file:///path/to/plugin.js"],
});
await prettier.getFileInfo("/path/to/file", {
  plugins: ["file:///path/to/plugin.js"],
});
await prettier.getSupportInfo({
  plugins: ["file:///path/to/plugin.js"],
});

Akzeptieren von URL als benutzerdefinierte Konfigurationsdatei in resolveConfig (#17167 by @fisker)

prettier.resolveConfig() akzeptiert nun eine URL mit file:-Protokoll oder eine URL-Zeichenkette, die mit file: beginnt, als benutzerdefinierte Konfigurationsdatei.

// `URL`
await prettier.resolveConfig("path/to/file", {
  config: new URL("/path/to/prettier-config-file", import.meta.url),
});

// URL string
await prettier.resolveConfig("path/to/file", {
  config: "file:///path/to/prettier-config-file",
});

Interpretieren von *.frag-Dateien als JavaScript-Dateien einstellen (#17178 by @fisker)

*.frag wurde als JavaScript-Dateien interpretiert, aber .frag wird auch in GLSL(OpenGL Shading Language) verwendet. Dies führt zu Fehlern, wenn Prettier versucht, sie als JavaScript-Dateien zu formatieren.

Seit Prettier 3.6 werden *.frag-Dateien mit Ausnahme von *.start.frag, *.end.frag, start.frag und end.frag nicht mehr als JavaScript-Dateien behandelt.

Wenn Sie JavaScript-Dateien mit der Endung .frag haben, die nicht den oben genannten Mustern entsprechen, können Sie dies mit overrides konfigurieren.

export default {
  overrides: {
    files: "**/*.frag",
    options: {
      parser: "babel",
    },
  },
};

Unterstützung für isSupported-Funktion in languages-API hinzufügen (#17331 by @JounQin, #17490 by @fisker)

Bisher unterstützte die languages-API für benutzerdefinierte Plugins nur das Ableiten des Parsers anhand des Dateinamens oder der Dateiendung.

Prettier 3.6 hat die Funktion isSupported: (options: { filepath: string }) => boolean hinzugefügt, um Plugins zu ermöglichen, zu prüfen, ob eine Datei basierend auf dem vollständigen Pfad unterstützt wird (z. B. Dateien in einem bestimmten Verzeichnis).

Hinweis

Prettier kann nicht sicherstellen, dass filepath auf dem Datenträger existiert.
Bei Verwendung über APIs (z. B. prettier.format()) kann Prettier auch nicht sicherstellen, dass es sich um einen gültigen Pfad handelt.

Wenn keine isSupported-Funktion bereitgestellt wird, verhält es sich genauso wie zuvor.

export const languages = [
  {
    name: "foo",
    parsers: ["foo"],
    isSupported: ({ filepath }) => filepath.includes(".foo"),
  },
];

mjml-Parser hinzufügen (#17339 by @fisker)

Wir unterstützten MJML bereits in früheren Versionen mit dem html-Parser. Um MJML spezifisch zu behandeln, wurde nun ein neuer mjml-Parser hinzugefügt.

Dateien mit --check-ignore-pragma ignorieren (#17344 by @wnayes)

Einzelne Dateien können jetzt die Formatierung deaktivieren, indem sie @noformat oder @noprettier als „Pragma“-Kommentare am Anfang der Datei einfügen.

Um diese Funktion zu aktivieren, verwenden Sie die neue Option --check-ignore-pragma (checkIgnorePragma über Konfiguration oder API).

Sprach-Plugins können Unterstützung für diese Funktion implementieren. Die meisten integrierten Parser, einschließlich JavaScript (TypeScript), CSS, HTML, JSON, Markdown (MDX), YAML und GraphQL, wurden aktualisiert, um diese Funktion zu unterstützen.

/**
 * @noformat
 */

export default matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
);

Behebung des Plugin-Ladens in prettier.getFileInfo() (#17548 von @fisker)

In früheren Versionen las prettier.getFileInfo() nur die parser-Konfiguration aus .prettierrc, lud jedoch keine Plugins, um den Parser aus Plugin-languages abzuleiten. Prettier 3.6 hat dies behoben.

// prettier-plugin-foo
export const languages = [
  {
    parsers: ["foo"],
    extensions: [".foo"],
  },
];

# .prettierrc
plugins:
  - prettier-plugin-foo

prettier --file-info file.foo

# Prettier 3.5
{ "ignored": false, "inferredParser": null }

# Prettier 3.6
{ "ignored": false, "inferredParser": "foo" }

Plugins können jetzt integrierte Parser bei der Parser-Ableitung überschreiben (#17549 von @fisker)

Zuvor wurden bei der Parser-Ableitung für Dateien zuerst integrierte Plugins geprüft, sodass Plugins keine Parser für Dateien wie .js überschreiben konnten.

// prettier-plugin-foo
export const languages = [
  {
    parsers: ["foo"],
    extensions: [".js"],
  },
];

// prettier.config.js
import * as prettierPluginFoo from "prettier-plugin-foo";

export default {
  plugins: [prettierPluginFoo],
};

prettier --file-info file.js

# Prettier 3.5
{ "ignored": false, "inferredParser": "babel" }

# Prettier 3.6
{ "ignored": false, "inferredParser": "foo" }

CLI

Verbot der gleichzeitigen Verwendung von --config und --no-config (#12221 von @Balastrong)

$ prettier --config=.prettierrc --no-config .
[error] Cannot use --no-config and --config together.

Ignorieren der Änderungszeit bei --cache-strategy=content (#17438 von @fisker)

In früheren Versionen wurde bei --cache-strategy=content eine Datei neu formatiert, wenn sich ihre Änderungszeit änderte - selbst wenn der Dateiinhalt unverändert blieb. Prettier 3.6 hat dies behoben.

Korrektur der Ergebnisnachricht für nicht formatierbare Dateien (#17505 von @fisker)

touch unknown
prettier --check unknown

# Prettier 3.5
Checking formatting...
unknown
[error] No parser could be inferred for file "</path/to/unknown>".
All matched files use Prettier code style!

# Prettier 3.6
Checking formatting...
unknown
[error] No parser could be inferred for file "</path/to/unknown>".
Error occurred when checking code style in the above file.

Korrektur des exitCode bei nicht ableitbarem Parser (#17505 von @fisker)

touch unknown
prettier --check unknown > /dev/null;echo $?

# Prettier 3.5
[error] No parser could be inferred for file "</path/to/unknown>".
0

# Prettier 3.6
[error] No parser could be inferred for file "</path/to/unknown>".
2

Verschiedenes

Behebung des eingebetteten Formats mit cursorOffset (#17254 von @fisker)

<!-- Input (--cursor-offset=1) -->
# Angular note

```typescript
  import {Component} from '@angular/core';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [],
    template: `
      <h1>
      
      {{ title }}</h1>
    `,
    styleUrls: ['./app.component.css'],
  })
  export class AppComponent {
    title = 'default';
  }
```

<!-- Prettier 3.5 -->
Error: There are too many 'cursor' in doc.

<!-- Prettier 3.6 -->
# Angular note

```typescript
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [],
  template: `
    <h1>
      {{ title }}
    </h1>
  `,
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "default";
}
```