Zum Hauptinhalt springen

Prettier 2.7: Neue --cache-CLI-Option und TypeScript-4.7-Syntax!

· 9 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 eine neue --cache-CLI-Option. Wenn diese Option aktiviert ist, werden bestimmte Attribute als Cache-Schlüssel verwendet, und Dateien werden nur formatiert, wenn sie sich geändert haben. Dies kann die CLI-Leistung erheblich verbessern.

Wir haben außerdem Unterstützung für die Formatierung der TypeScript-4.7-Syntax hinzugefügt!

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.

Höhepunkte​

TypeScript​

Unterstützung für TypeScript 4.7 (#12896, #12897, #12898, #12900, #12921, #12924, #12959 von @sosukesuzuki)​

Unterstützung der neuen Features von TypeScript 4.7!

Instantiation Expressions​
interface Box<T> {
  value: T;
}
function makeBox<T>(value: T) {
  return { value };
}
const makeHammerBox = makeBox<Hammer>;
const makeWrenchBox = makeBox<Wrench>;
Optional Variance Annotations​
interface Animal {
  animalStuff: any;
}
interface Dog extends Animal {
  dogStuff: any;
}
type Getter<out T> = () => T;
type Setter<in T> = (value: T) => void;
extends constraints for infer​
type FirstString<T> = T extends [infer S extends string, ...unknown[]]
  ? S
  : never;

CLI​

Hinzufügen der --cache- und --cache-strategy-CLI-Optionen (#12800 von @sosukesuzuki)​

Es wurden zwei neue CLI-Optionen für ein Caching-System hinzugefügt, ähnlich dem von ESLint.

Weitere Details finden Sie in der Dokumentation.

--cache​

Wenn diese Option aktiviert ist, werden die folgenden Werte als Cache-Schlüssel verwendet, und die Datei wird nur formatiert, wenn sich einer davon geändert hat.

  • Prettier-Version

  • Optionen

  • Node.js-Version

  • (wenn --cache-strategy auf content steht) Dateiinhalt

  • (wenn --cache-strategy auf metadata steht) Datei-Metadaten, wie Zeitstempel

prettier --write --cache src
--cache-strategy​

Die Strategie, die der Cache zur Erkennung geänderter Dateien verwendet. Kann metadata oder content sein. Wenn keine Strategie angegeben ist, wird content verwendet.

prettier --write --cache --cache-strategy metadata src

Weitere Änderungen​

JavaScript​

Leerzeile zwischen Export-Spezifizierern beibehalten (#12746 von @sosukesuzuki)​

// Input
export {
  // a
  foo1,

  // b
  bar1,
  baz1,
} from "mod";

// Prettier 2.6
export {
  // a
  foo1,
  // b
  bar1,
  baz1,
} from "mod";

// Prettier 2.7
export {
  // a
  foo1,

  // b
  bar1,
  baz1,
} from "mod";

Bessere Erkennung von Aufrufmustern als "Test Call Callee" (#12779 von @HosokawaR)​

Unterstützt Testaufrufe wie Playwright test.describe.

// Input
test.step("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.only("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.parallel("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.parallel.only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});

test.describe.serial("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.serial.only("does something really long and complicated so I have to write a very long name for the test", () => {});

// Prettier 2.6
test.step(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.only(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.parallel(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.parallel.only(
  "does something really long and complicated so I have to write a very long name for the testThis is a very",
  () => {}
);

test.describe.serial(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.serial.only(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

// Prettier 2.7
test.step("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe
  .only("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe
  .parallel("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.parallel
  .only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});

test.describe
  .serial("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.serial
  .only("does something really long and complicated so I have to write a very long name for the test", () => {});

Korrektur des Kommentarformats in Exporten (#12860 von @HosokawaR)​

Diese Änderung passt das Kommentarformat in exports an das Format in import-Anweisungen an.

Obwohl dies keine Auswirkungen auf das Kommentarformat in import-Anweisungen hat, zeigen die folgenden Änderungsprotokolle Beispiele von Kommentaren in import als Referenz.

// Input
export {
  foo,

  bar as  // comment
		 baz,
}

import {
  foo,

  bar as  // comment
		 baz,
} from 'foo'

// Prettier 2.6
export {
  foo,
  bar as baz, // comment
};

import {
  foo,
  // comment
  bar as baz,
} from "foo";

// Prettier 2.7
export {
  foo,
  // comment
  bar as baz,
};

import {
  foo,
  // comment
  bar as baz,
} from "foo";

TypeScript​

Ausgabe von as statt : für den babel-ts-Parser (#12706 von @HosokawaR)​

// Input
[x as any] = x;

// Prettier 2.6
[x: any] = x;

// Prettier 2.7
[x as any] = x;

Formatierungskorrektur für TypeScript-Enums mit berechneten Mitgliedern (#12930 von @HosokawaR)​

// Input
enum A {
  [i++],
}

// Prettier 2.6
enum A {
  i++,
}

// Prettier 2.7
enum A {
  [i++],
}

Parsing ungültigen Codes stoppen (#12982 von @fisker)​

// Input
const object = ({ methodName() });

// Prettier 2.6
const object = { methodName(); };

// Prettier 2.7
SyntaxError: Unexpected token. (1:29)
> 1 | const object = ({ methodName() });
    |                             ^^

HTML​

Unterstützung der Formatierung für Speculation Rules API in HTML (#12882 von @sosukesuzuki)​

Weitere Informationen zur Speculation Rules API finden Sie unter https://web.dev/speculative-prerendering/.

<!-- Input -->
<script type="speculationrules">
  {
   "prerender": [
  {"source": "list", "urls": ["https://a.test/foo"]}
  ]
  }
</script>


<!-- Prettier 2.6 -->
<script type="speculationrules">
  {
   "prerender": [
  {"source": "list", "urls": ["https://a.test/foo"]}
  ]
  }
</script>

<!-- Prettier 2.7 -->
<script type="speculationrules">
  {
    "prerender": [{ "source": "list", "urls": ["https://a.test/foo"] }]
  }
</script>

Vue​

Formatierung von Vue-Template-Ausdrücken in TypeScript ermöglichen (#12584 von @sosukesuzuki)​

<!-- input -->
<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 2.6 -->
<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 2.7 -->
<script setup lang="ts">
let x: string | number = 1;
</script>

<template>
  {{ (x as number).toFixed(2) }}
</template>

Automatische Erkennung des Stylus-Parsers für Vue-SFC-Style-Blöcke (#12707 von @lsdsjy)​

<style lang="stylus">-Blöcke in Vue-SFCs können bei vorhandenem Plugin verarbeitet werden.

Vermeidung von zeilenweiser Attributausgabe in Vue-SFC-Blöcken (#12895 von @sosukesuzuki)​

<!-- Input (singleAttributePerLine: true) -->
<script lang="ts" setup>
</script>

<!-- Prettier 2.6 -->
<script
 lang="ts"
 setup
>
</script>

<!-- Prettier 2.7 -->
<script lang="ts" setup>
</script>

Angular​

Formatierungskorrektur für Kurzschreibweise von Eigenschaften (#12993 von @sosukesuzuki, @fisker)​

<!-- Input -->
<ng-container *ngTemplateOutlet="someTmpl; context: { app }"></ng-container>

<!-- Prettier 2.6 -->
<ng-container
  *ngTemplateOutlet="someTmpl; context: { app: this.app }"
></ng-container>

<!-- Prettier 2.7 -->
<ng-container *ngTemplateOutlet="someTmpl; context: { app }"></ng-container>

GraphQL​

Unterstützung für die Ausgabe von SchemaExtension-Knoten (#12519 von @trevor-scheer)​

# Input
extend schema { subscription: Subscription }
extend schema @directive

# Prettier 2.6
N/A - throws error

# Prettier 2.7
extend schema {
  subscription: Subscription
}
extend schema @directive

Korrektur der Formatierung für einzeilige und leere Beschreibungen (#12608 von @chimurai, @fisker)​

# Input
""" Customer """
type Person {
  name: String
}

""""""
type Person {
  name: String
}

# Prettier 2.6.2
"""
 Customer
"""
type Person {
  name: String
}

"""

"""
type Person {
  name: String
}

# Prettier 2.6.2 (second format)
"""
Customer
"""
type Person {
  name: String
}

"""

"""
type Person {
  name: String
}

# Prettier 2.7
"""
Customer
"""
type Person {
  name: String
}

"""
"""
type Person {
  name: String
}

CLI​

Ausgabe der Anzahl der zu ändernden Dateien (#12561 von @Harry-Hopkinson)​

# Prettier 2.6
$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

# Prettier 2.7
$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] src/fileB.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] Code style issues found in the above file. Forgot to run Prettier?

Parser für .importmap-Dateien automatisch bestimmen (#12603 von @fisker)​

Formatiert .importmap-Dateien als JSON-Dateien.

Leistungstests vereinfachen (#12682, #12698 von @fisker)​

Wenn --debug-benchmark oder --debug-repeat übergeben wird:

  1. Überspringt die CLI das Ausgeben des Codes auf den Bildschirm oder das Schreiben in die Datei

  2. Setzt den Log-Level automatisch auf debug