Prettier 2.3 で TypeScript 4.3 をフォーマットする
(追伸: 2021/06/05)
なのでこの workaround はもう不要です
TypeScript 4.3 がリリースされました。
TypeScript 4.3 ではいくつかの新しい構文が追加されました。
先日リリースされた Prettier 2.3 ではまだ TypeScript 4.3 の構文に対応できていません。
もし TypeScript 4.3 で追加された構文を使いつつ、Prettier でフォーマットをしたいという場合は、以下のような設定をしてください。
{
"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 の新機能をフォーマットすることができます。
すでに Prettier 側に TypeScript 4.3 対応は入れましたが、Prettier が次リリースするかは決まっていないので、リリースされるまではこれでしのいでください。
Discussion