CA Reward

Tech Blog

Tech Blogトップに戻る

PrettierというJavaScriptコードフォーマッタが良い感じ

2017.03.07

  • このエントリーをはてなブックマークに追加
  • Pocket
しげぽよ
しげぽよエンジニア

はじめに

しげぽよです。 ここ最近、Go書きたいのにJavaScriptで動画プレイヤー作ったりしてたんですが、チームメンバがXOというLinterを導入した結果ひどい目(↓画像参照)にあったので何か良いフォーマッタないかなと思って探してみたらPrettierというのが見つかったので使ってみた結果なかなか良いなと思いました。 そこで今日はJavaScriptのコードフォーマッターであるPrettierについて簡単に紹介したいと思います。

xo_errors_before_.png

Prettierとは

PrettierはJavaScriptのコードフォーマッターで、MozillaのDevToolチームにいた方が最近公開したみたいです。1月10日のリリースアナウンスから2週間足らずでスターが4000以上付いてて開発も活発なので個人的にはなかなか注目度高いんじゃないかなと思っています。

特徴

単一性

Prettierの最大の特徴は、ソースをASTパースしてからフォーマットするので、プログラマ依存な部分(引数が長くなったときの改行とか)に左右されずにフォーマット結果を返す点です。(パーサはデフォルトではbabylonを使いますが、オプションでflowも使えるようです。詳しくないので使い分けはよくわかりません。)

サポート

  • JSX
  • ES2017
  • Flow

などにも対応しています。

設定事項が少ない

これは好き嫌いが分かれそうですが、Prettierではeslint(フォーマッタではないですが)のように設定ファイルで細かく設定はできません。基本的にはソースをAST化してそれをPrettyPrintするだけです。 PrettierではPrettyPrintのアルゴリズムとしてWadlerのA prettier printerを採用しています(PrettyPrintの実装自体はフォーク元のrecastがベースになっています)

インストール

例によってnpmとかyarnで普通に入ります。

npmの場合は

ちゃんとインストールされたら、prettierと打つと↓な感じになります。

使い方

サンプルとして以下のファイルを用意します(READMEにあったもののほぼパクリです)

コマンドラインだと普通に引数にファイル渡すだけで使えます

良いですね。 比較としてjs-beautifyでやってみます。

3つ目の書き方だけ違った結果になります。

当然これはチームがどのスタイルガイドで合意してるかとか方針によっても違ってくるので一概に良いとは言えないと思いますが、少なくとも同じ動きのコードを同じようにフォーマットしてくれるのは少なからず意味があるように思います。

ちなみにファイルをフォーマットして上書きする場合は --write オプションをつける必要があります。 また、デフォルトではダブルクオートなのでシングルクオートにしたい場合は --single-quote をつけます。

比較

試しに冒頭で載せた138個のエラー吐いてたファイル(実は1ファイル)をPrettierに通してからXOで見てみたところ

xo_errors_after_.png

だいぶ減りました。

まとめ

以上、最近使ってみて良いなと思ったprettierを簡単に紹介しました。

シングルクオートはデフォルトで良いんじゃないかとか、いろいろ思うところはありますが、しばらく今のプロジェクトで使ってみようと思います。 それでは今回はこのへんで失礼します。

しげぽよ
しげぽよエンジニア