Prettier 2.3 で TypeScript 4.3 をフォーマットする

(追伸: 2021/06/05)

https://twitter.com/__sosukesuzuki/status/1401131082293006336

なのでこの workaround はもう不要です

---

TypeScript 4.3 がリリースされました。

https://devblogs.microsoft.com/typescript/announcing-typescript-4-3/

TypeScript 4.3 ではいくつかの新しい構文が追加されました。

先日リリースされた Prettier 2.3 ではまだ TypeScript 4.3 の構文に対応できていません。

もし TypeScript 4.3 で追加された構文を使いつつ、Prettier でフォーマットをしたいという場合は、以下のような設定をしてください。

.prettierrc

{
  "overrides": [
    {
      "files": "*.ts",
      "options": {
        "parser": "babel-ts"
      }
    }
  ]
}

Configuration Overridesを使って、.tsファイルをフォーマットするときにbabel-tsパーサーを使うようにしています。

Prettier はデフォルトではtypescriptパーサーを使います。このtypescriptパーサーは、@typescript-eslint/typescript-estreeに依存しています。Prettier2.3 リリース時にはまだ@typescript-eslint/typescript-estreeは TypeScript 4.3 に対応していなかったので、Prettierはデフォルトのパーサーでは TypeScript 4.3 の新機能をフォーマットすることができません。

明示的にbabel-tsを指定することによって、Prettierはパーサーとして@babel/parserを使うようになります。@babel/parser は7.14.0から TypeScrip 4.3 をサポートしており、 Prettier 2.3 でもbabel-tsを使えば TypeScript 4.3 の新機能をフォーマットすることができます。

https://prettier.io/blog/2021/05/09/2.3.0.html#support-typescript-43-via-babel-ts-10811httpsgithubcomprettierprettierpull10811-by-sosukesuzukihttpsgithubcomsosukesuzuki

すでに Prettier 側に TypeScript 4.3 対応は入れましたが、Prettier が次リリースするかは決まっていないので、リリースされるまではこれでしのいでください。

https://github.com/prettier/prettier/pull/10945