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

Prettier 2.8: --cache CLIオプションの改善とTypeScript 4.9 satisfies演算子のサポート！

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

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

このリリースでは、2.7で追加された --cache オプションが改善されました。新しい --cache-location オプションが追加され、--write が指定されていない場合でもキャッシュが保存されてしまうバグが修正されました。

また、TypeScript 4.9の satisfies 演算子のサポートも追加されました！

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

Prettierチームは数ヶ月以内にバージョン3.0をリリースする予定です。プラグイン開発者の方は移行の準備を進めてください。詳細は移行ガイドとissue #13606をご覧ください。

主な変更点​

TypeScript​

TypeScript 4.9のsatisfies演算子のサポート (#13764, #13783, #13872 by @sosukesuzuki)​

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

クラスの自動アクセサは今後の2.8パッチリリースでサポート予定です。satisfies演算子を優先して提供するため、現時点ではスコープから外れています。

CLI​

--writeオプションが指定されていない場合はキャッシュを保存しない (#13016 by @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オプションの追加 (#13019 by @sosukesuzuki)​

デフォルトではPrettier CLIは --cache オプションのキャッシュファイルを ./node_modules/.cache/prettier/.prettier-cache に保存します。この設定を上書きできるようになりました：

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

その他の変更​

JavaScript​

ドックブロックのパースを修正 (#13054 by @fisker)​

// With `--insert-pragma` flag

// Input
/* comment */
foo()

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

foo();

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

foo();

関数本体の範囲フォーマットを修正 (#13173 by @thorn0)​

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

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

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

複数行文字列のフォーマット不整合を修正 (#13274 by @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​

extendsを含む推論関数戻り値型の括弧を修正 (#13289 by @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​

長い:is、:where、:notセレクタのフォーマットを修正 (#13577 by @j-f1)​

複数のセレクタを引数として受け取る:is、:where、:notなどの疑似セレクタは、他の言語の関数呼び出しと同様にフォーマットされるようになりました。従来は引数間のカンマに特別な意味付けがされておらず、混乱を招く折り返し動作の原因となっていました。まだ改善の余地がある可能性がありますので、期待通りに見えない動作を発見した場合はサンプルコード付きのissueを開いてください。

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

修正: '#' と '{' の間に余分なスペースが入る問題 (#13286 by @jspereiramoura)​

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

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

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

Angular​

パイプにスペースを挿入 (#13100 by @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​

カスタム "else if" ブロックの正しいフォーマット (#13507 by @jamescdavis)​

テンプレート変換を使用すると、if と同様の動作をするカスタムブロックキーワードを作成できます。この更新により、"if" がカスタムキーワードの場合に、"else if" のケースを正しく認識してフォーマットするよう printer-glimmer が改善されました。

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

--prose-wrap=preserve 時にインラインコードの改行を保持 (#11373 by @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​

MDX の範囲無視サポートを改善 (#12208 by @nickrttn)​

JSXコメントを使用して、MDXでMarkdownの範囲無視ディレクティブを使用するサポートを追加しました。

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

Playground の「ドキュメントエクスプローラー」モード (#10183 by @thorn0)​

parser オプションを特別な値 doc-explorer に切り替えると、Prettierの中間表現を操作し、異なるオプションでどのように出力されるかを確認できます。

group 内で ifBreak を使用した際のドキュメントプリンターの問題を修正 (#12362 by @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]) {
}

Playground の「埋め込みエラーを再スロー」チェックボックス (#13227 by @thorn0)​

以前、Playgroundの動作はデバッグ目的で埋め込み言語のパースエラーを表示する点で、ローカルのPrettierの動作と紛らわしいほど一貫性がありませんでした。現在ではこの動作はチェックボックスで制御され、デフォルトで無効になっています。

CLI​

.lintstagedrc のパーサー推論 (#13081 by @OrRosenblatt)​

拡張子のない .lintstagedrc ファイルは、json と yaml パーサーを使用して処理されます。