Prettier 2.0がTypescript 3.8をサポートし、CLIを改善

原文(投稿日：2020/03/22)へのリンク

意欲的なコードフォーマッタであるPrettierは、先頃2番目の主要なイテレーションをリリースした。Prettier 2.0はTypeScript 3.8のサポートを追加する。新しいPrettierは、より良いデフォルト、より良いCLI、より良いヒューリスティックを提供するように努めている。

PrettierはTypeScript 3.8リリースに含まれる新しい構文をサポートするようになり、タイプのみインポートとエクスポート、ECMAScriptプライベートフィールド、および export * as ns 構文をカバーしている。

新しいタイプのみインポートとエクスポートのTypeScript構文により、開発者はタイプの注釈と宣言に使用する宣言をインポートできる:

import type { SomeThing } from "./some-module.js";

export type { SomeThing };

TypeScript 3.8は、ステージ3 ECMAScriptのプライベートフィールドの提案を新たにサポートする。プライベートフィールドは、クラス定義内で識別子の前に # が付いたフィールドである:

class X {
  #foo;
  method() {
    console.log(this.#foo)
  }
}

新しいPrettierは、複雑な型、コメントなどを含むいくつかのTypeScript関連のフォーマットエッジケースをさらに修正した。改善されたTypeScript構文サポートは、開発者から好意的に受け入れられている。たとえばあるTwitterユーザーは次のように言った:

物事が自分の仕事と一致すると素晴らしいですよね :)。今週の金曜日のように、PrettierがTypeScript 3.8にいつアップグレードするのかを議論していたところでした :)。驚くばかりです。

Prettier 2.0は、trailingComma、arrowParens、および endOfLine オプションのデフォルト値を変更した。Prettier 2.0では、ECMAScript 5で認められているように、末尾のコンマがデフォルトになる。以前のデフォルトは、IE8ブラウザまでの互換性を維持したいという願望によって進められていた。新しいデフォルトは、{ "trailingComma": "none" } でPrettierを構成することにより、以前の値に戻すことができる。

Prettier arrowParens 構成オプションのデフォルトは always になった。フォーマットした結果は次のとおりである:

// Input  
const  fn  =  (x)  =>  y  => x + y;  
// Prettier 1.19  
const  fn  =  x  =>  y  => x + y;  
// Prettier 2.0  
const  fn  =  (x)  =>  (y)  => x + y;

アロー関数パラメータをラップすることで型注釈を追加しやすくなるため、一見、このマイナーな変更はTypeScript開発者により良いサービスを提供する。さらに、ラッピング括弧は、次のようなTwitterでManuel Bieh氏によってまとめられている他の多くのよくあるパターンをカバーしている:

Prettier endOfLine 構成オプションのデフォルトは lf になった。以前のデフォルトでは、Prettierは指定されたファイルにすでに存在する行末の改行コードを保持していた。さまざまなオペレーティングシステムにコントリビュータがいるGitリポジトリでは、これにより、場合によっては git diff の結果が大きくなり、ファイル（git blame）の行ごとの履歴の調査が難しかった。

Prettier 2.0のCLIは、Globとして扱う前に、Globをリテラルファイル名として解決しようとする。この変更により、WindowsとLinuxのファイル名の間に生じる不一致が解決される。後者にはほとんどすべての文字を含めることができる。

新しいCLI構文はさらに、最終的に . を含むディレクトリを拡張するため、開発者は prettier --write . と記述でき、現在のディレクトリとそのサブディレクトリでサポートされているすべてのファイルをフォーマットする。

Prettier 2.0には、改善されたメソッドチェーンの改行のヒューリスティックが含まれている。新しいヒューリスティックは、チェーン内の呼び出し引数の複雑さに基づいている。次のコードは、Prettier 1.19でフォーマットされている:

if (
  foo
    .one()
    .two()
    .three() ===
  bar
    .four()
    .five()
    .six()
) {
  // ...
}

これは次のようにフォーマットされる:

// Prettier 2.0
if (foo.one().two().three() === bar.four().five().six()) {
  // ...
}

さらに、PrettierはJSDocタイプキャストのヒューリスティック処理を改善した。TypeScriptはタイプ情報にJSDocタイプを使用する場合があるため (たとえば、オプション --checkJs を指定して実行した場合)、JSDocを再フォーマットするとバグレポートが発生する場合があった。新しいヒューリスティックは次のように動作する:

// Input
const nestedAssertions = /** @type {MyType} */
  (/** @type {unknown} */
      (x));

// Prettier 1.19
const nestedAssertions /** @type {MyType} */ /** @type {unknown} */ = x;

// Prettier 2.0
const nestedAssertions = /** @type {MyType} */ (/** @type {unknown} */ (x));

新しいPrettierには、Flow、CSS、Vue、Angular、GraphQL、Markdownなどのさまざまなファイル形式の処理を改善する多くの変更が付属している。

Prettierは、元のスタイルを削除し、出力されたコードが一貫したスタイルに準拠するようにする、独断的なコードフォーマッタである。Prettierは、JavaScript (およびその他のサポートされている言語) を抽象構文ツリー (AST) に解析し、そのASTを整形出力することにより、一貫性を保証する。Prettierは構成可能であるが、主な目的はコードスタイルに関する開発者間の議論を終わらせることであるため、構成オプションの追加に反対する。