ESLintというツールをご存知でしょうか？これは「コードスタイルを統一するためのツール」です。そのため、
- リーダブルコードを読んだことがある人
- コードの整形について知っている人
- if文まわりの改行について一家言ある人
には必要ありません。 〜完〜
！！！！！！違います！！！！！！
違います！これはESLintの一側面を取り上げただけであり、ESLintのメリットのごく一部にすぎません。
このような悲しい勘違いをこれ以上被害が広がる前に撲滅したいと思います。
ESLintはLinterである
そもそもLinter≠コードフォーマッターです。 Linter はコードの静的なチェックをします。たとえば次のようなチェックができます。
- 使用されていない変数がある場合に警告する
- if文内で
=演算子を使っていないか(if (message = someFunc())を禁止) - switchの各caseがきちんとbreakを含んでいるか
Linterを使えば、このようにバグの原因になりやすい書き方をしていないかチェックできます。ESLint は linter なので、コードスタイルを統一するだけのツールではありません。というより、コードスタイルの統一はPrettierのほうが適しています。ESLint のコード整形は Prettier より簡易的です。
PrettierとESLintは役割が全然ちがう
さて、Prettierが出てきたので、ついでにこれも説明します。
Prettierは直訳すれば「美しくする」です。その名のとおりコードを整形します。たとえば、
- クォートをシングル/ダブルに統一
- インデントのためのスペースの個数
- 必ずセミコロンをつける/不要なセミコロンはつけない
- アロー関数の引数にカッコをつける(
(x) => x)/つけない(x => x)の統一
PrettierにはLinterとしての機能はありません。コードを見やすくしてくれるだけです。Prettierはコード整形に特化しているため、ESLintではできない整形も行えます。
なぜ勘違いしてしまったのか？
ESLintとPrettierはどちらも「静的チェッカー」に分類されます。また、どちらも目的は違えど「コードを書き換える」ツールです。そのため、触ったことがない人に勘違いさせやすいです。実際、僕は勘違いしていました(リーダブルコード読んだしな〜とか思ってました)
また、ESLintの記事を読むと「コードの書き方を統一する」点が真っ先に挙げられ、静的チェックを非常に軽視した書き方がなされていることが多いです。今ESLintでパッとぐぐったところ、上位3つの記事のうち2つが「チーム内でのコードの統一ができる」という役割をさも重要かのように書いていました。これは明らかなミスリードです。ほんとうにやめていただきたい。
終わりに
ついでにいえば、Webpackについても色々といいたいことがありますが、これはまた今度書きたいと思います。ESLintは静的チェックをしてくれるのが最大の利点で、コード整形のために使うべきではありません
