編集

Prettier とは?

Prettier は次のものをサポートする、固定のコードフォーマッタです。

• JavaScript（実験的機能を含む）
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS、Less、およびSCSS
• HTML
• Ember/Handlebars
• JSON
• GraphQL
• Markdown、GFMおよびMDX v1を含む
• YAML

すべての元のスタイル*を削除し、すべての出力されたコードを一貫したスタイルに従うようにします。（ブログ記事をご覧ください。）

Prettier はコードを取り込み、行の長を考慮して最初から再印刷します。

たとえば、次のコードを見てみましょう。

foo(arg1, arg2, arg3, arg4);

1行に収まるため、そのまま表示されます。ただし、次の状況に遭遇したことは誰にでもあるはずです。

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

これでは長すぎるため、関数を呼び出すための以前の形式が突然無効になります。Prettier は手間をかけて、このようにあなたのために再印刷します。

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
);

Prettier は、一貫性のあるコードスタイル（つまり、AST に影響を与えないコードフォーマット）をコードベース全体で適用します。元のスタイル*を無視して削除し、解析された AST を最大行長を考慮して独自ルールで再印刷し、必要に応じてコードをラップします。

詳細を知りたい場合、これらの 2 つのカンファレンス講演は素晴らしい紹介です。

脚注

* 実際、実用的であればオリジナルのスタイルは一部保持されています。詳しくは次のページを参照してください — 空行 と 複数行のオブジェクト。