Prettier 3.5: 新しいobjectWrapオプション、experimentalOperatorPositionオプション、TypeScript設定ファイルサポート！

非公式ベータ版翻訳

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

このリリースには多数のバグ修正と以下の新機能が含まれています:

• 新しいobjectWrapオプションのサポート

• 新しい実験的experimentalOperatorPositionオプションのサポート

• TypeScript設定ファイルのサポート

詳細は各セクションをご覧ください。

Prettierを評価いただき、私たちの活動を支援したい場合は、OpenCollectiveを通じた直接のスポンサーシップや、typescript-eslint、remark、Babelなど当プロジェクトが依存するプロジェクトのスポンサーをご検討ください。皆様の継続的なご支援に感謝申し上げます。

2つの新オプション追加の背景

今回のリリースでは2つの新オプションを導入しました。Prettierのオプション哲学をご存知の方なら「なぜ新オプションを追加するのか？」と疑問に思われるかもしれませんが、ご安心ください。これらは通常のオプションではなく、私たちのオプション哲学にも反していません。

名前が示す通り、experimentalOperatorPositionは実験的なオプションです。私たちには実験的オプションに関するポリシーがあり、これは将来的に削除されることを意味します。新しい挙動がデフォルトになる可能性もありますし、このオプション自体が完全に廃止される可能性もあります。長くPrettierを使われている方は、かつてexperimentalTernariesオプションを追加したことを覚えているかもしれませんが、これも同じアプローチです。

objectWrapは少し特殊です。長年、複数行にわたるオブジェクトの出力方法に課題を抱えてきました。完璧な解決策はまだ見つかっておらず、半手動的なアプローチを取ってきました。詳細は設計思想をご覧ください。現在の挙動は理想的ではありません。なぜなら最終的な出力がユーザーのコードの書き方によって変わってしまうからです。より一貫したフォーマットを提供するため、objectWrapオプションの導入を決定しました。

今回のリリースでは2つの新オプションを導入しましたが、Prettierのオプション哲学を忘れていないことを強調したいと思います。これらのオプションは、特定の長年のフォーマット課題に対処するものであり、オプション哲学を損なうものではありません。

主な変更点

JavaScript

二項演算子前での改行を制御する実験的オプションの追加 (#7111 by @btmills)

これは--experimental-operator-position <start|end>フラグの背後で実装されています。

二項式が行をまたぐ場合、startを指定すると演算子が新しい行の先頭に配置されます。ラップされた行の先頭に二項演算子を配置することで、演算子がより目立ち、スキャンしやすくなります。

// Input
var a = Math.random() * (yRange * (1 - minVerticalFraction)) + minVerticalFraction * yRange - offset;

// `experimentalOperatorPosition: end` (default behavior)
var a =
  Math.random() * (yRange * (1 - minVerticalFraction)) +
  minVerticalFraction * yRange -
  offset;

// `experimentalOperatorPosition: start`
var a =
  Math.random() * (yRange * (1 - minVerticalFraction))
  + minVerticalFraction * yRange
  - offset;

objectWrap設定オプションの実装 (#16163 by @pauldraper, @sosukesuzuki)

Prettierはこれまで、複数行のJavaScriptオブジェクトリテラルを半手動でフォーマットしてきました。

具体的には、最初のプロパティの前に改行がある場合、オブジェクトが1行に収まる場合でも複数行に維持されます。詳細は複数行オブジェクトをご覧ください。

この挙動は引き続きデフォルトですが、--object-wrap=collapseを指定するとオブジェクトリテラルのフォーマット時に空白を無視します。

// Input
const obj1 = {
  name1: "value1", name2: "value2",
};

const obj2 = { name1: "value1",
  name2: "value2",
};

// Prettier 3.4
const obj1 = {
  name1: "value1",
  name2: "value2",
};

const obj2 = { name1: "value1", name2: "value2" };

// Prettier 3.5 (with `--object-wrapping=collapse`)
const obj1 = { name1: "value1", name2: "value2" };

const obj2 = { name1: "value1", name2: "value2" };

API

TypeScript設定ファイルのサポート追加 (#16828 by @itsyoboieltr & @fisker)

新しい形式の設定ファイルが追加されました:

• .prettierrc.ts

• .prettierrc.mts

• .prettierrc.cts

• prettier.config.ts

• prettier.config.mts

• prettier.config.cts

注:

現在、Node.jsでのTypeScriptサポートは実験的段階です。

TypeScript設定ファイルを動作させるにはNode.js>=22.6.0が必要で、Node.js v22では--experimental-strip-typesオプションの指定が必要です。

以下のコマンドでPrettierを実行できます:

node --experimental-strip-types node_modules/prettier/bin/prettier.cjs . --write

または

NODE_OPTIONS="--experimental-strip-types" prettier . --write

他のTSローダーも動作する可能性がありますがテストは行われておらず、自己責任での使用となります。

例えばtsxを使用する場合、以下のように実行できます:

node --import tsx node_modules/prettier/bin/prettier.cjs . --write

または

tsx node_modules/prettier/bin/prettier.cjs . --write

その他の変更

JavaScript

JSXにおけるワードラッピングのエッジケースを改善 (#16700 by @seiyab)

// Input
br_triggers_expression_break =
  <div><br />
  text text text text text text text text text text text {this.props.type} </div>

// Prettier 3.4
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text {
      this.props.type
    }{" "}
  </div>
);

// Prettier 3.5
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text{" "}
    {this.props.type}{" "}
  </div>
);

Flow

Flowでconst型パラメータをサポート (#16947 by @gkz)

function f<const T>(): void {}

// Prettier 3.4
// Parse error

// Prettier 3.5
function f<const T>(): void {}

CSS

カンマ区切り値の改行位置を変更 (#16907 by @seiyab)

/* Input */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

/* Prettier 3.4 */
a {
  background-image: linear-gradient(
      to bottom,
      rgb(255 255 0 / 50%),
      rgb(0 0 255 / 50%)
    ),
    url("catfront.png");
}

/* Prettier 3.5 */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

Vue

.propショートハンド構文をサポート (#16920 by @fisker)

.fooはv-bind:foo.propのショートハンドです。詳細はv-bindビルトインディレクティブを参照してください。

<!-- Input -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.4 -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.5 -->
<template>
  <button .disabled="a && b">Click!</button>
</template>

Angular

ICUブロック内の改行処理を改善 (#16922 by @fisker)

<!-- Input -->
<span>The author is {gender, select, male {male} female {female} other {other}}</span>
<span>The author is <span>male consectetur adipiscing elit, sed do eiusmod</span></span>

<!-- Prettier 3.4 -->
<span
  >The author is {gender, select, male {male} female {female} other {other}
}</span>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

<!-- Prettier 3.5 -->
<span
  >The author is
  {gender, select, male {male} female {female} other {other}}</span
>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

ICUブロック内の不要な改行を修正 (#16922 by @fisker)

<!-- Input -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

<!-- Prettier 3.4 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
}

<!-- Prettier 3.5 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

Ember / Handlebars

Handlebars/Glimmerで<style>および<pre>タグを処理 (#15087 by @jurgenwerk)

{{!-- Input --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red { color: red }
  .blue {
    color: red
  }
</style>

{{!-- Prettier 3.4 --}}
<pre>
  cd ~ ls echo "hey"
</pre>
<style>
  .red { color: red } .blue { color: blue }
</style>

{{!-- Prettier 3.5 --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red {
    color: red;
  }
  .blue {
    color: red;
  }
</style>

Markdown

CJK句読点としてのU+FF5E処理 (#16832 by @tats-u)

U+FF5E FULLWIDTH TILDE (～)は、日本語環境のWindowsでU+301C WAVE DASH (〜)の代替として一般的に使用されます。MarkdownドキュメントではMicrosoft Office文書などと比べて全角アルファベットの使用頻度が低く、全角チルダは全角英数字に比べてこの用途で使用されるケースが極めて稀です。そのため、実際のMarkdownドキュメントにおける全角チルダは波ダッシュの代替形であり、CJK句読点の一部と見なすことができます。

<!-- Input (--prose-wrap=never) -->
a 字 a 字 a 字
60～
100点
60〜
100点

<!-- Prettier 3.4 -->
a 字 a 字 a 字 60～ 100点 60〜10点


<!-- Prettier 3.5 -->
a 字 a 字 a 字 60～10点 60〜100点

上記の例で60と100の間にある最初の記号はU+FF5E FULLWIDTH TILDE (～)であり、2番目はU+301C WAVE DASH (〜)です。

API

Bun環境でJSONC構文のpackage.jsonから設定を読み取り可能に (#17041 by @fisker)

Bun 1.2がpackage.jsonでのJSONCサポートを追加しましたが、以前のPrettierバージョンではprettier設定を無視していました。Prettier 3.5からはprettier設定をエラーなく読み込めるようになりました。

ただしこの機能はBun固有のものでNode.jsではサポートされていないため、PrettierをBunで実行する場合にのみ機能します。

重要な注意点: Prettierはデフォルトでpackage.jsonファイルをフォーマットするためにjson-stringifyパーサーを使用します。JSONC構文でpackage.jsonファイルをフォーマットするには、パーサーオプションを上書きする必要があります。

export default {
  overrides: [
    {
      files: ["package.json"],
      options: {
        parser: "jsonc",
      },
    },
  ],
};

何らかの理由でPrettierをアップグレードできない場合でも、package.jsonでJSONC構文を使用することは可能ですが、prettier設定をそこに置かないでください。別の設定ファイルを使用する必要があります。

その他の変更

require(ESM) 用のESMエントリポイントの使用 (#16958 by @tats-u)

情報

この変更はv3.5.2で取り消されました。詳細は#17139を確認してください。

Node.js 22.12以降では、ランタイムフラグなしでrequire関数を使ってESMモジュールを（実験的に）ロードできます。この変更により、CommonJSエントリポイントなしで、ほぼESMエントリポイントをインポートする機能のみを使用して、requireでPrettierをロードできるようになります。

requireによるESモジュールのロード機能は完全には安定していませんが、Node 22.13以降ではExperimentalWarningなしで使用できます。