鈴木颯介のブログ

Prettier 2.0 までのマイルストーンを眺めてみる

Prettier は今 1.18.2 なのですが、2.0 のマイルストーンが公開されているので、眺めてみます。あくまで暫定的なものでしょうし、確定!という感じではなく雰囲気を読んでもらえると。

(実装及びリリースがいつになるのかはわかりません。)

https://github.com/prettier/prettier/milestone/14

TypeScript/Flow の末尾カンマ

私が Prettier の開発に関わり始めたのは最近なので、正しく文脈を追うことができているのかはわかりませんが、TS/Flow の末尾カンマについては以前から議論されてきた問題のようです。

TS や Flow ではバージョンによっては、特定の箇所での末尾カンマがインバリッドであるケースがあります。(例: https://github.com/microsoft/TypeScript/issues/28893 )

このような問題に、フォーマッターの立場としてどのように対処するべきか、という話のようです。

Prettier には、PHP 用のプラグインが存在しますが、そちらでも同様の問題が以前議論されていたようです。

(私は PHP をほとんど書いたことがないですが)PHP5 と PHP7.2 では末尾カンマに関する文法が異なるようで、それに対して、--php-trailing-commma というオプションを追加することにしたようです。--php-trailing-comma には以前から--trailing-commaとして存在した nonealles5 の他にphp5php7.2を指定できます。

TS/Flow に対しても PHP 用プラグインと同様の方法で末尾カンマに対応するようです。

CLI でディレクトリを指定できるようにする

現在、Prettier を CLI から使う場合、prettier --write **/*.{js}のようにファイル名を指定する必要があります。

2.0 からはprettier --write .のようにディレクトリ名を渡すとそれを展開してフォーマットを実行するそうです。

設定の overrides にドットから始まるファイルもマッチさせる

Prettier のフォーマットは.prettierrcなどの設定ファイルに書いたものもしくは CLI のオプションで渡したものに従って行われますが、特定のファイルに対して設定を上書きしてフォーマットすることができます。

例えば、*.test.js のような名前を持つファイルに対してのみセミコロンをつける、みたいなことが可能です。

現状では、ドットから始まるファイルをマッチさせることができませんが、2.0 からはそれが可能になるようです。

Node 4 のサポート終了

Node 4 の公式サポートが 2018 年 4 月に終了したのに合わせて Prettier もそのサポートを終了するようです。

--stdin CLI オプションの廃止

Prettier を CLI から使う場合、--stdin オプションを使うことで、echo ".foo{color:red}" | prettier --stdin --parser=css のように標準入力を整形することができます。

2.0 からはこの --stdin オプションが廃止になるようです。

標準入力から受け取る機能がなくなるというわけではなくて、ファイルパスの指定がなければ、自動で標準入力から読み込むようになります。また、整形結果をファイルに書き込むときは --stdin-filepath=style.css のように指定することができるようになるみたいです。

TypeScript/Flow のパースに対しても Babylon(@babel/parser) を使う

ぱっと読んだ感じでは、まだ議論の途中?なんですかね。結論が出ていないように見えましたが、私の読み違いかもしれません。

今、Prettier が TS や Flow で書かれたコードをフォーマットするために使っているパーサーは、それぞれ @typescript-eslint/estreeflow-parser です。それを Babylon(@babel/parser) に統一しようという話です。

私は Babel のことはよく知りませんが、設定によって TypeScript や Flow で書かれたコードのトランスパイルも可能なようです(Prettier で使うのはパースまで)。

この変更によって各々のパーサーをバンドルする必要がなくなって Prettier のサイズは小さくなりダウンロードもはやくなるというメリットがあるものの、TS の新機能への対応がパーサーの都合で遅れるというデメリットが指摘されています。

これはトレードオフですが、どちらを重視すべきかメンテナの中でも意見が割れているようです。

デフォルトで singleQuote を true にする

現在 Prettier のデフォルトルールではダブルクォートを使うようになっていますが、それをシングルクォートにするそうです。

多くの JS 開発者がシングルクォートを好む傾向にあるようで、実際Google JavaScript Style GuideAirbnb JavaScript Style Guideなどでもシングルクォートを使うように書かれています。

また、冗談半分でしょうが、「シングルクォートはダブルクォートに比べてノイズが 50%減る!」というようなコメントもありました。それはそうですね。

非推奨のオプションを廃止にする

現在非推奨の --flow-parser--parser=postcss CLI オプションを廃止にするようです。

設定ファイルからフォーマット対象を指定可能にする

現在、Prettier ではフォーマットしたいファイルを CLI の引数として指定する必要があります。

2.0 からは設定ファイルにフォーマット対象のファイルを記述することで、CLI 側で指定することなくフォーマットが行われるようになるようです。

parser オプションが language オプションになる

ユーザーにとっては、現在のparserオプションにあたるものがlanguageという名前であった方がわかりやすいという話みたいです。

デフォルトで末尾カンマをつける

今の Prettier のデフォルトルールでは末尾カンマはつきません。

末尾カンマをつけるメリットとして、オブジェクトのプロパティを追加するような変更をしたときに、git などでの差分が一行で済むようになることなどがあげられます。

この記事で触れましたが、Prettier の末尾カンマオプションにはnonealles5の3つがあり、おそらくデフォルトではes5になるとのことです。