「コードをきれいにするんじゃ〜」
「コードのどこが間違っているんや〜」
といった作業に時間を使わなくて良くなる便利なツール「Prettier」の存在を知ったので、早速学習します。
◇Prettierとは
フロントエンド開発に役立つコード整形ツール。
Node.js上で動作する。
ReactやBabel,Material-UIなどの有名なプロダクトでも採用されている。
なぜPrettierのようなコード整形ツールが必要かというと、複数人で開発していると、どうしてもそれぞれのコードに個人の色が出てしまいます。
これだと、gitで統一した時にコードの書き方が整っていなくて混乱してしまいます。
そこで、Prettierなどのコード整形ツールを使えば、コードスタイルを意識することなく、コーディングに集中できるわけですね。
また、Prettierには次のメリットがあります。
①コードが読みやすくなる
②Node.js上で動作するため、ユーザー環境に依存しない
③プロジェクト単位でコードフォーマットを統一できる
次の記事を参考にさせていただきました。
＊ 参考
https://qiita.com/soarflat/items/06377f3b96964964a65d
https://ics.media/entry/17030
ESLintじゃダメなのか？
こちら
でESLintを学習した時に、
eslint --fix
でコードをきれいにできた。
しかし、これでは整形できないコードがあるらしい。
例えば、
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
1行がめちゃくちゃ長いコードはESLintでは扱えない。
これが、Prettierではきれいにできる。
また、Prettierには、ESLintと比べて手軽で確実に実装できる、というメリットもある。
ESLintではルールを設定しないといけない場合がある。
しかし、Prettierには構文チェック機能がなし(;や空白のチェックなど)。
そのため、両方を併用するのがベストなのかと。