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

Prettier 2.5: TypeScript 4.5とMDX v2コメント構文のサポート！

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

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

このリリースでは、TypeScript 4.5の新構文とMDX v2のコメント構文がサポートされました！

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

主な変更点​

TypeScript​

長い型使用時のアロー関数本体の余分なオフセットを回避 (#11515 by @kachkaev and @thorn0)​

Prettier 2.3.0以降、アロー関数の型宣言が関数本体のインデントに影響を与える可能性がありました。型注釈の長さを変更すると大きな差分が生じ、gitコンフリクトの発生確率が高まっていました。これを防ぐため、関数本体のオフセットを安定化しました。
注意: この変更はコードベースの多数の行に影響する可能性があります。

// Input
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.2 and below
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({
  x,
  y,
}) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.4
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> =
  ({ x, y }) => {
    const a = useA();
    return <div>{x + y + a}</div>;
  };

// Prettier 2.5
const MyComponentWithLongName: React.VoidFunctionComponent<
  MyComponentWithLongNameProps
> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

TypeScript 4.5のサポート (#11721, #11723, #11813 by @sosukesuzuki)​

TypeScript 4.5の新構文機能をサポートしました:

type修飾子付きインポート名​
// Example
import { type A } from "mod";

プライベートフィールド存在チェック​
// Example
class Foo {
  #prop1;
  method() {
    return #prop1 in this;
  }
}

インポートアサーション​
// Example
import obj from "./something.json" assert { type: "json" };

.mtsおよび.ctsの対応​

Prettierは今後、.mtsおよび.cts拡張子のファイルをTypeScriptとしてフォーマットします。

HTML​

HTMLのclass属性を1行に集約 (#11827 by @jlongster)​

#7865を差し戻しました。

TailwindなどのCSSライブラリ利用者向けに、要素に多数のクラスが適用されるケースでの利便性を意図していましたが、クラスリストを複数行に分割するヒューリスティックが一貫して良好な結果を生み出せないことが明らかになりました。多数のクラスを持つHTMLのフォーマット方法については、より良い手法を検討中です — 議論に参加をご検討ください。

<!-- Input -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

<!-- Prettier 2.4 -->
<div
  class="
    SomeComponent__heading-row
    d-flex
    flex-column flex-lg-row
    justify-content-start justify-content-lg-between
    align-items-start align-items-lg-center
  "
></div>

<!-- Prettier 2.5 -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

MDX​

MDX v2コメント構文のサポート追加 (#11563 by @wooorm)​

既存のMDX v1コメント構文（HTMLスタイルコメント）に加え、MDX v2コメント構文（JavaScriptスタイルコメント）の基本サポートを追加しました。

注意: Prettierは現在、新しいコメント構文を単一行コメント（{/* prettier-ignore */}が使用可能）のみサポートしており、MDX v2のその他の機能はサポートしていません。

Input:
{/*A comment*/}

Prettier 2.4:
{/_A comment_/}

Prettier 2.5:
{/*A comment*/}

その他の変更​

JavaScript​

チェーンされたアロー関数本体におけるシーケンス式の括弧を修正 (#11593 by @bakkot)​

チェーンされたアロー関数の本体として使用されるシーケンス式を囲む必須の括弧が保持されるようになりました。以前はPrettierがこれらを削除していたため、不正な構文が生成される可能性がありました。

// Input
const f = () => () => (0, 1);

// Prettier 2.4
const f = () => () => 0, 1;

// Prettier 2.5
const f = () => () => (0, 1);

スロップモード構文のエラーを無視するように変更 (#11750 by @fisker, #11778 by @sosukesuzuki)​

JavaScriptのstrictモードはミスを防ぐための有用なエラーを追加しますが、これらのエラーの一部はパース時に発生する構文エラーです。Prettierの目標は実際に実行されるかどうかに関わらず、構文的に有効なJavaScriptコードをすべてフォーマットすることであるため、この種のエラーチェックはリンターやコンパイラ、ランタイムに任せることにしました。

// Input
function foo() { var bar = 1; delete bar; }

// Prettier 2.4
SyntaxError: Deleting local variable in strict mode. (1:31)
> 1 | function foo() { var bar = 1; delete bar; }
    |                               ^

// Prettier 2.5
function foo() {
  var bar = 1;
  delete bar;
}

埋め込みCSS内の式と括弧間のスペースを尊重するように修正 (#11800 by @sosukesuzuki)​

// Input
const paragraph2 = css`
  transform1: ${expr}(30px);
  transform2: ${expr} (30px);
`;

// Prettier 2.4
const paragraph2 = css`
  transform1: ${expr} (30px);
  transform2: ${expr} (30px);
`;

// Prettier 2.5
const paragraph2 = css`
  transform1: ${expr}(30px);
  transform2: ${expr} (30px);
`;

espreeパーサーでES2022のクラスプライベートフィールドin構文をサポート (#11835 by @fisker)​

// Example
class Foo {
  #brand;
  static isC(obj) {
    return #brand in Foo;
  }
}

TypeScript​

デコレータの不要な括弧を削除 (#11717, #11849 by @sosukesuzuki)​

// Input
class Test {
  @foo`bar`
  test1: string = "test"

  @test().x("global").y()
  test2: string = "test";
}

// Prettier 2.4
class Test {
  @(foo`bar`)
  test: string = "test"

  @(test().x("global").y())
  test2: string = "test";
}

// Prettier 2.5
class Test {
  @foo`bar`
  test: string = "test"

  @test().x("global").y()
  test2: string = "test";
}

SCSS​

@use withのフォーマットを改善 (#11637 by @sosukesuzuki)​

// Input
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem,
  $font-family: 'Helvetica, sans-serif'
);

// Prettier 2.4
@use "library" with
  ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif");

// Prettier 2.5
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem,
  $font-family: 'Helvetica, sans-serif'
);

@forward withのフォーマットエラーを修正 (#11683 by @sriramarul, @sosukesuzuki)​

// Input
@forward 'foo.scss' with ($components: red);

// Prettier 2.4
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 2.5
@forward "foo.scss" with (
  $components: red
);

Ember / Handlebars​

属性内のマスタッシュ文における引用符で内部引用符に逆のタイプを使用するように変更 (#11524 by @bmaehr)​

{{!-- Input --}}
<div title="{{t 'login.username.description'}}" />

{{!-- Prettier 2.5 --}}
<div title="{{t 'login.username.description'}}" />

{{!-- Prettier 2.4 --}}
<div title="{{t "login.username.description"}}" />

Markdown​

埋め込みTSX内の型パラメータ末尾カンマを保持 (#11685 by @sosukesuzuki)​

末尾のカンマはTypeScriptが<T>をJSX式の開始と誤認識するのを防ぐために必要です。

<!-- Input  -->
```tsx
const test = <T,>(value: T) => {};
```

<!-- Prettier 2.4 -->
```tsx
const test = <T>(value: T) => {};
```

<!-- Prettier 2.5 -->
```tsx
const test = <T,>(value: T) => {};
```