Zum Hauptinhalt springen

Prettier 2.8: Verbesserungen an der --cache-CLI-Option und TypeScript 4.9 satisfies-Operator!

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

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

Dieses Release enthält Verbesserungen an der in Version 2.7 eingeführten --cache-Option. Eine neue --cache-location-Option wurde hinzugefügt und ein Fehler behoben, der den Cache auch dann speicherte, wenn --write nicht angegeben war.

Wir fügen außerdem Unterstützung für den TypeScript 4.9 satisfies-Operator hinzu!

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

Das Prettier-Team plant die Veröffentlichung von Version 3.0 in den nächsten Monaten. Plugin-Entwickler sollten sich auf die Migration vorbereiten. Weitere Informationen finden Sie im Migrationsleitfaden und in Issue #13606.

Höhepunkte​

TypeScript​

Unterstützung für den TypeScript 4.9 satisfies-Operator (#13764, #13783, #13872 von @sosukesuzuki)​

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;

Auto-Accessors in Classes werden in einem zukünftigen 2.8-Patch-Release unterstützt. Wir haben sie vorerst zurückgestellt, um den satisfies-Operator schneller ausliefern zu können.

CLI​

Cache nicht speichern, wenn --write nicht angegeben wurde (#13016 von @Milly)​

# Prettier 2.7
$ prettier --cache foo.js
# This shows formatted contents of `foo.js`.
# Then cache is created and `foo.js` is flagged as already formatted.

$ prettier --cache --write foo.js
foo.js 2ms (cached)
# "... (cached)" means the file is already formatted, so nothing is done this time.

# Prettier 2.8
$ prettier --cache foo.js
# Show formatted contents of `foo.js`.

$ prettier --cache --write foo.js
foo.js 2ms
# `foo.js` is formatted now.

--cache-location-Option hinzufügen (#13019 von @sosukesuzuki)​

Standardmäßig speichert die Prettier-CLI die Cache-Datei für die --cache-Option unter ./node_modules/.cache/prettier/.prettier-cache. Dies kann jetzt überschrieben werden:

prettier --write --cache --cache-location=my_cache_file src

Weitere Änderungen​

JavaScript​

Korrektur des Docblock-Parsings (#13054 von @fisker)​

// With `--insert-pragma` flag

// Input
/* comment */
foo()

// Prettier 2.7
/**
 * /* comment
 *
 * @format
 */

foo();

// Prettier 2.8
/**
 * comment
 *
 * @format
 */

foo();

Formatierung von Funktionsrumpf-Bereichen korrigieren (#13173 von @thorn0)​

// Input
let fn = (() => {
  return; //
//^^^^^^^^^^ - range
});

// Prettier 2.7
let fn = (() => {
  return; //
};);

// Prettier 2.8
let fn = (() => {
  return; //
});

Inkonsistente Formatierung mehrzeiliger Strings beheben (#13274 von @GlebDolzhikov)​

// Input
const loremIpsumFooBazBar1 = 'Multiline string\
         Multiline string\
'

const loremIpsumFooBazBar2 = 'Multiline string\
         Multiline string\
         Multiline string'

// Prettier 2.7
const loremIpsumFooBazBar1 = "Multiline string\
         Multiline string\
";

const loremIpsumFooBazBar2 =
  "Multiline string\
         Multiline string\
         Multiline string";

// Prettier 2.8
const loremIpsumFooBazBar1 =
  "Multiline string\
         Multiline string\
";

const loremIpsumFooBazBar2 =
  "Multiline string\
         Multiline string\
         Multiline string";

TypeScript​

Klammern in inferierten Funktionstypen mit extends korrigieren (#13289 von @GlebDolzhikov)​

// Input
type Foo<T> = T extends (...a: any[]) => (infer R extends string) ? R : never;

// Prettier 2.7
type Foo<T> = T extends (...a: any[]) => infer R extends string ? R : never;

// Prettier 2.8
type Foo<T> = T extends ((...a: any[]) => infer R extends string) ? R : never;

CSS​

Korrigiert: Formatierung langer :is-, :where- und :not-Selektoren (#13577 von @j-f1)​

Pseudoselektoren wie :is, :where und :not, die mehrere Selektoren als Argumente akzeptieren, werden nun wie Funktionsaufrufe in anderen Sprachen formatiert. Zuvor wurden Kommas zwischen ihren "Argumenten" nicht speziell behandelt, was zu verwirrendem Umbruchverhalten führte. Weitere Verbesserungen sind hier wahrscheinlich nötig – bitte melden Sie ein Issue mit Beispielcode, falls etwas nicht wie erwartet formatiert wird.

/* Input */
:where(
  label > input:valid,
  label > textarea:not(:empty),
  label > button[disabled]
) ~ .errors > .error { display: none; }

/* Prettier 2.7 */
:where(label > input:valid, label > textarea:not(:empty), label
    > button[disabled])
  ~ .errors
  > .error {
  display: none;
}

/* Prettier 2.8 */
:where(
    label > input:valid,
    label > textarea:not(:empty),
    label > button[disabled]
  )
  ~ .errors
  > .error {
  display: none;
}

SCSS​

Korrigiert: Überflüssiges Leerzeichen zwischen '#' und '{' (#13286 von @jspereiramoura)​

// Input
padding: var(--spacer#{(1) + 2});

// Prettier 2.7
padding: var(--spacer# {(1) + 2});

// Prettier 2.8
padding: var(--spacer#{(1) + 2});

Angular​

Fügt Leerzeichen in Pipes ein (#13100 von @sosukesuzuki)​

<!-- Input -->
<tui-line-chart
  [value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>

<!-- Prettier 2.7 -->
<tui-line-chart
  [value]="chart | tuiFilter: filter:range | tuiMapper: toNumbers:range"
></tui-line-chart>

<!-- Prettier 2.8 -->
<tui-line-chart
  [value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>

Ember / Handlebars​

Korrekte Formatierung benutzerdefinierter "else if"-Blöcke (#13507 von @jamescdavis)​

Template-Transforms können benutzerdefinierte Block-Keywords erzeugen, die sich ähnlich wie if verhalten. Dieser Update stellt sicher, dass "else if"-Fälle korrekt erkannt und formatiert werden, wenn "if" ein benutzerdefiniertes Keyword ist.

{{! Input }}
{{#when isAtWork}}
  Ship that code!
{{else when isReading}}
  You can finish War and Peace eventually...
{{else}}
  Go to bed!
{{/when}}

{{! Prettier 2.7 }}
{{#when isAtWork}}
  Ship that code!
{{else}}{{#when isReading}}
    You can finish War and Peace eventually...
  {{else}}
    Go to bed!
  {{/when}}{{/when}}

{{! Prettier 2.8 }}
{{#when isAtWork}}
  Ship that code!
{{else when isReading}}
  You can finish War and Peace eventually...
{{else}}
  Go to bed!
{{/when}}

Markdown​

Behält Zeilenumbrüche in Inline-Code bei --prose-wrap=preserve bei (#11373 von @andersk)​

<!-- Input -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.

<!-- Prettier 2.7 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor incididunt` ut labore et dolore magna aliqua.

<!-- Prettier 2.8 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.

MDX​

Verbesserte Unterstützung für Bereichs-Ignorierung in MDX (#12208 von @nickrttn)​

Fügt Unterstützung für Markdown-Bereichs-Ignorierungsdirektiven in MDX hinzu, unter Verwendung von JSX-Kommentaren.

// Input
{/* prettier-ignore-start */}

export const Hello = () => {
  return (<p>
  Hello</p>)
}

{/* prettier-ignore-end */}

// Prettier 2.7 (throws an error)
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 2.8
{/* prettier-ignore-start */}

export const Hello = () => {
  return (<p>
  Hello</p>)
}

{/* prettier-ignore-end */}

API​

"Doc Explorer"-Modus für den Playground (#10183 von @thorn0)​

Setzen Sie die parser-Option auf den speziellen Wert doc-explorer, um mit Prettiers Zwischendarstellung zu experimentieren und deren Ausgabe unter verschiedenen Optionen zu sehen.

Behebt Problem im Doc-Printer bei Verwendung von ifBreak innerhalb von group (#12362 von @fisker)​

// Input
//                                                                              |80
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}

// Prettier 2.7
for (const number of [
  123_123_123, 123_123_123, 123_123_123, 123_123_123, 12,
]) {
}

// Prettier 2.8
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}

"Embed-Fehler neu auswerfen"-Checkbox im Playground (#13227 von @thorn0)​

Bisher verhielt sich der Playground inkonsistent gegenüber lokalen Prettier-Installationen, da er Parsing-Fehler in eingebetteten Sprachen zu Debug-Zwecken anzeigte. Dieses Verhalten ist nun durch eine Checkbox steuerbar und standardmäßig deaktiviert.

CLI​

Automatische Parser-Erkennung für .lintstagedrc (#13081 von @OrRosenblatt)​

Dateien ohne Endung wie .lintstagedrc werden nun mit json- und yaml-Parsern verarbeitet.