Hoppa till huvudinnehållet

Prettier 2.7: nytt CLI-alternativ --cache och stöd för TypeScript 4.7-syntax!

· 9 min att läsa
Sosuke Suzuki
Sosuke Suzuki
Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Den här versionen innehåller ett nytt CLI-alternativ --cache. Om du aktiverar detta alternativ kommer vissa attribut att användas som cache-nycklar och filer formateras endast om de har ändrats. Detta kan dramatiskt förbättra CLI-prestandan.

Vi har också lagt till stöd för formatering av TypeScript 4.7-syntax!

Om du gillar Prettier och vill stödja vårt arbete, överväg att sponsra oss direkt via vår OpenCollective eller genom att sponsra de projekt vi förlitar oss på, inklusive typescript-eslint, remark och Babel.

Höjdpunkter​

TypeScript​

Stöd för TypeScript 4.7 (#12896, #12897, #12898, #12900, #12921, #12924, #12959 av @sosukesuzuki)​

Stöd för nya funktioner i 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​

Lägg till CLI-alternativen --cache och --cache-strategy (#12800 av @sosukesuzuki)​

Två nya CLI-alternativ har lagts till för ett cachesystem som liknar ESLints.

Se dokumentationen för mer information.

--cache​

Om detta alternativ är aktiverat används följande värden som cache-nycklar, och filen formateras endast om något av dem ändras:

  • Prettier-version

  • Alternativ

  • Node.js-version

  • (om --cache-strategy är content) filens innehåll

  • (om --cache-strategy är metadata) filmetadata som tidsstämplar

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

Strategi för cachen att använda för att upptäcka ändrade filer. Kan vara antingen metadata eller content. Om ingen strategi anges används content.

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

Andra ändringar​

JavaScript​

Bevara tom rad mellan export-specifiers (#12746 av @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";

Få fler callee-mönster att erkännas som "test call callee". (#12779 av @HosokawaR)​

Stöder testanrop som 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", () => {});

Åtgärda kommentarsformat i (#12860 av @HosokawaR)​

Den här ändringen åtgärdar kommentarsformatet i exports så att det matchar kommentarsformatet i import.

Även om den här ändringen inte påverkar kommentarsformatet i import, innehåller följande ändringslogg exempel på kommentarer i import som referens.

// 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​

Skriv ut as istället för : för babel-ts-parsern (#12706 av @HosokawaR)​

// Input
[x as any] = x;

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

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

Rättar formatering för TypeScript-enum med beräknade medlemmar (#12930 av @HosokawaR)​

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

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

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

Sluta parsa ogiltig kod (#12982 av @fisker)​

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

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

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

HTML​

Stöd för formatering av Speculation Rules API i HTML (#12882 av @sosukesuzuki)​

Läs https://web.dev/speculative-prerendering/ för mer information om Speculation Rules API.

<!-- 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​

Tillåt formatering för Vue-template-uttryck skrivna i TypeScript (#12584 av @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>

Härled Stylus-parser för Vue SFC-stilblock (#12707 av @lsdsjy)​

<style lang="stylus">-block i Vue SFC:er kan bearbetas av lämpligt plugin om det finns.

Undvik att skriva ut attribut per rad i Vue SFC-block (#12895 av @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​

Rättar formatering av förkortade egenskaper (#12993 av @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​

Lägg till stöd för att skriva ut SchemaExtension-noder (#12519 av @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

Rättar formatering av enrads- och tomma beskrivningar (#12608 av @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​

Skriv ut antalet filer som behöver ändras (#12561 av @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?

Härled parser för .importmap-filer (#12603 av @fisker)​

Formatera .importmap-filer som JSON-filer.

Förenkla prestandatest (#12682, #12698 av @fisker)​

När --debug-benchmark eller --debug-repeat skickas med:

  1. CLI:n hoppar över att skriva kod till skärmen eller skriva fil

  2. Ställer in loggnivån till debug automatiskt