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

Prettier 3.3: Flowの新機能と多数のバグ修正

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

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

このリリースでは、コンポーネントやフック宣言などの新しいFlow機能のサポートが追加されました。これらの機能はすべてFlowチームのエンジニアによって実装されました。感謝します。

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

主な変更点​

Flow​

declare namespace 出力サポート (#16066 by @SamChou19815)​

// Input
declare namespace foo {
  declare var bar: string;
}

// Prettier 3.2
// does not parse

// Prettier 3.3
declare namespace foo {
  declare var bar: string;
}

コンポーネント構文の出力サポート (#16191 by @SamChou19815)​

// Input
component MyComponent(a: string, b: number) renders SomeComponent {
  return <OtherComponent />;
}
hook useMyHook(a: string) {
  return useState(a);
}

// Prettier 3.2
// does not parse

// Prettier 3.3
component MyComponent(a: string, b: number) renders SomeComponent {
  return <OtherComponent />;
}
hook useMyHook(a: string) {
  return useState(a);
}

ビッグイントEnumのサポート (#16268 by @gkz)​

ビッグイントFlow Enumのサポートを追加。

// Input
enum E {
  A = 0n,
  B = 1n,
}

// Prettier 3.2
// error

// Prettier 3.3
enum E {
  A = 0n,
  B = 1n,
}

非厳密タプル型のサポート (#16271 by @gkz)​

Flowの非厳密タプル型のサポートを追加。

// Input
type T = [number, ...];

// Prettier 3.2
type T = [number];

// Prettier 3.3
type T = [number, ...];

'implies'型ガードバリアントのサポート (#16272 by @gkz)​

Flowのimplies型ガードバリアントをサポート。またflow-parserの依存関係を更新。

// Input
declare function f(x: mixed): implies x is T;

// Prettier 3.2
// error

// Prettier 3.3
declare function f(x: mixed): implies x is T;

その他の変更​

JavaScript​

インポート属性のキー引用符除去 (#15888 by @sosukesuzuki)​

// Input
import json from "./mod.json" with { "type": "json" };

// Prettier 3.2
import json from "./mod.json" with { "type": "json" };

// Prettier 3.3
import json from "./mod.json" with { type: "json" };

オブジェクト出力の不安定性修正 (#16058 by @fisker)​

// Input
a = {"\a": 1, "b": 2}

// Prettier 3.2 (--quote-props consistent)
a = { "a": 1, "b": 2 };

// Prettier 3.2 (--quote-props as-needed)
a = { "a": 1, b: 2 };

// Prettier 3.3
a = { a: 1, b: 2 };

テンプレートリテラル内埋め込みGQLのフォーマット (#16064 by @keithlayne)​

// Input
/* GraphQL */ `
  query foo { id }
`;

// Prettier 3.2
/* GraphQL */ `
  query foo { id }
`;

// Prettier 3.3
/* GraphQL */ `
  query foo {
    id
  }
`;

React useImperativeHandleフックのフォーマット改善 (#16070 by @Jaswanth-Sriram-Veturi)​

// Input
useImperativeHandle(ref, () => {
  /* Function body */
}, []);

// Prettier 3.2
useImperativeHandle(
  ref,
  () => {
    /* Function body */
  },
  [],
);

// Prettier 3.3
useImperativeHandle(ref, () => {
  /* Function body */
}, []);

テンプレート補間内メンバー式の改行許可 (#16116 by @bakkot)​

テンプレート補間内に既に改行が存在する場合、メンバー式であってもそのまま維持するようになりました。なお（#15209以降）Prettierは、既存の改行がない補間内に新たに改行を挿入することはありません。

// Input
`template with ${
    very.very.very.very.very.very.very.very.very.very.very.long.chain
}`;

// Prettier 3.2
`template with ${very.very.very.very.very.very.very.very.very.very.very.long.chain}`;

// Prettier 3.3
`template with ${
  very.very.very.very.very.very.very.very.very.very.very.long.chain
}`;

テンプレート文字列をソースとする動的インポートの修正 (#16267 by @fisker)​

// Input
const module = await import(`data:text/javascript,
  console.log("RUN");
`);

// Prettier 3.2
const module = await (`data:text/javascript,
  console.log("RUN");
`);

// Prettier 3.3
const module = await import(`data:text/javascript,
  console.log("RUN");
`);

TypeScript​

TSInferTypeへの不足括弧追加 (#16031 by @fisker)​

// Input
type Foo<T> = T extends (infer U extends number) | { a: infer U extends number }
  ? U
  : never;

// Prettier 3.2
type Foo<T> = T extends infer U extends number | { a: infer U extends number }
  ? U
  : never;

// Prettier 3.3
type Foo<T> = T extends (infer U extends number) | { a: infer U extends number }
  ? U
  : never;

重複アクセシビリティ修飾子のエラー出力 (#16040 by @fisker, @auvred)​

// Input
class Foo {
  public public bar() {};
}

// Prettier 3.2
class Foo {
  public bar() {}
}

// Prettier 3.3
SyntaxError: Accessibility modifier already seen. (2:10)
  1 | class Foo {
> 2 |   public public bar() {};
    |          ^^^^^^
  3 | }

--no-semi オプションを readonly クラスフィールドで尊重 (#16133 by @sxzz)​

// Input
class A {
  field
  readonly [expr] = true
}

// Prettier 3.2
class A {
  field;
  readonly [expr] = true
}

// Prettier 3.3
class A {
  field
  readonly [expr] = true
}

yield 式への必要な括弧追加 (#16194 by @kirkwaiblinger)​

アングルブラケット型アサーションが親要素の場合、yield 式の周囲に括弧を追加します。

// Input
function* g() {
  const y = <T>(yield x);
}

// Prettier 3.2
function* g() {
  const y = <T>yield x;
}

// Prettier 3.3
function* g() {
  const y = <T>(yield x);
}

Markdown​

Markdown/MDX 内コードブロックとJSXの折り返し改善 (#15993 by @seiyab)​

<!-- Input -->
```css
img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(210deg 100% 50%)
)
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(30deg 100% 50%)
    );
}
```

<!-- Prettier 3.2 -->
```css
img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(210deg 100% 50%)
    )
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(30deg 100% 50%)
    );
}
```

<!-- Prettier 3.3 -->
```css
img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
}
```
<!-- Input -->
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors

<!-- Prettier 3.2 -->
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors

<!-- Prettier 3.3 -->
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an
opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors

Markdown脚注定義間の改行追加 (#16063 by @Atema)​

<!-- Input -->
[^a]: Footnote A

[^b]: Footnote B

<!-- Prettier 3.2 -->
[^a]: Footnote A
[^b]: Footnote B

<!-- Prettier 3.3 -->
[^a]: Footnote A

[^b]: Footnote B

Markdown/MDX の折り返し改善 (#16158 by @seiyab)​

{ "proseWrap": "always" }
<!-- Input -->
\
word very-very-very-very-very-very-very-very-very-very-long-word very-very-very-very-very-very-very-very-very-very-long-word

<!-- Prettier 3.2 -->
\
word very-very-very-very-very-very-very-very-very-very-long-word very-very-very-very-very-very-very-very-very-very-long-word

<!-- Prettier 3.3 -->
\
word very-very-very-very-very-very-very-very-very-very-long-word
very-very-very-very-very-very-very-very-very-very-long-word

API​

package.yaml 設定ファイルサポート追加 (#16157 by @danielbayley)​

package.yaml からの prettier 設定読み取りをサポート。

# package.yaml
prettier:
  semi: false
  singleQuote: true