メインコンテンツへスキップ

Prettier 2.7: 新たな --cache CLIオプションとTypeScript 4.7構文のサポート！

· 1分で読める
Sosuke Suzuki
Sosuke Suzuki
非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

このリリースでは新しい --cache CLIオプションが追加されました。このオプションを有効にすると、いくつかの属性をキャッシュキーとして使用し、変更があったファイルのみをフォーマットします。これによりCLIのパフォーマンスが大幅に向上する可能性があります。

また、TypeScript 4.7の構文フォーマットサポートも追加されました！

Prettierをご利用いただき、私たちの活動を支援したい場合は、OpenCollectiveから直接スポンサーになるか、私たちが依存しているtypescript-eslint、remark、Babelなどのプロジェクトを支援することをご検討ください。

主な変更点​

TypeScript​

TypeScript 4.7のサポート (#12896, #12897, #12898, #12900, #12921, #12924, #12959 by @sosukesuzuki)​

TypeScript 4.7の新機能をサポートしました！

インスタンス化式​
interface Box<T> {
  value: T;
}
function makeBox<T>(value: T) {
  return { value };
}
const makeHammerBox = makeBox<Hammer>;
const makeWrenchBox = makeBox<Wrench>;
オプショナルな変位アノテーション​
interface Animal {
  animalStuff: any;
}
interface Dog extends Animal {
  dogStuff: any;
}
type Getter<out T> = () => T;
type Setter<in T> = (value: T) => void;
inferに対するextends制約​
type FirstString<T> = T extends [infer S extends string, ...unknown[]]
  ? S
  : never;

CLI​

--cacheおよび--cache-strategy CLIオプションの追加 (#12800 by @sosukesuzuki)​

ESLintのキャッシュシステムと同様のキャッシュシステムのために、2つの新しいCLIオプションが追加されました。

詳細についてはドキュメントをご覧ください。

--cache​

このオプションを有効にすると、以下の値がキャッシュキーとして使用され、いずれかが変更された場合にのみファイルがフォーマットされます。

  • Prettierのバージョン

  • オプション設定

  • Node.jsのバージョン

  • (--cache-strategyがcontentの場合) ファイルの内容

  • (--cache-strategyがmetadataの場合) タイムスタンプなどのファイルメタデータ

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

変更されたファイルを検出するためにキャッシュが使用する戦略です。metadataまたはcontentのいずれかを指定できます。戦略が指定されない場合、contentが使用されます。

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

その他の変更​

JavaScript​

export指定子間の空行を維持 (#12746 by @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";

より多くの呼び出し元パターンを「テスト呼び出し元」として認識 (#12779 by @HosokawaR)​

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", () => {});

コメント形式の修正 (#12860 by @HosokawaR)​

この変更により、exports内のコメント形式がimport内のコメント形式と揃うよう修正されました。

この変更はimport内のコメント形式には影響しませんが、参考のために変更ログの続きにはimport内のコメント例も含まれています。

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

babel-tsパーサーで:の代わりにasを出力 (#12706 by @HosokawaR)​

// Input
[x as any] = x;

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

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

計算されたメンバーを持つ TypeScript Enum のフォーマットを修正 (#12930 by @HosokawaR)​

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

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

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

無効なコードのパースを停止 (#12982 by @fisker)​

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

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

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

HTML​

HTML での Speculation Rules API フォーマットをサポート (#12882 by @sosukesuzuki)​

Speculation Rules API の詳細については、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​

TypeScript で記述された Vue テンプレート式のフォーマットを許可 (#12584 by @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>

Vue SFC スタイルブロックの Stylus パーサーを推論 (#12707 by @lsdsjy)​

Vue SFC 内の <style lang="stylus"> ブロックは、適切なプラグインがあれば処理されるようになりました。

Vue SFC ブロックでの属性の行ごとの出力を回避 (#12895 by @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​

短縮プロパティのフォーマットを修正 (#12993 by @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​

SchemaExtension ノードの出力サポートを追加 (#12519 by @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

単一行および空の説明のフォーマットを修正 (#12608 by @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​

変更が必要なファイルの数を出力 (#12561 by @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?

.importmap ファイルのパーサーを推論 (#12603 by @fisker)​

.importmap ファイルを JSON ファイルとしてフォーマットします。

パフォーマンステストの簡素化 (#12682, #12698 by @fisker)​

--debug-benchmark または --debug-repeat が渡された場合：

  1. CLI はコードの画面出力やファイルへの書き込みをスキップします

  2. ログレベルを自動的に debug に設定します