Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

俺がESLintを勘違いしていたのはお前らが悪い!

ESLintというツールをご存知でしょうか?これは「コードスタイルを統一するためのツール」です。そのため、

  • リーダブルコードを読んだことがある人
  • コードの整形について知っている人
  • if文まわりの改行について一家言ある人

には必要ありません。 〜完〜




違います!これはESLintの一側面を取り上げただけであり、ESLintのメリットのごく一部にすぎません。

このような先入観による悲しい勘違いは他のツールでも起こっているので、これ以上被害が広がる前に撲滅したいと思います。

ESLintはLinterである

そもそもLinterとはコードフォーマッターではありません。コードの静的なチェック(コードを実行せずに調べること)をするプログラムです。たとえば次のようなチェックができます。

  • 使用されていない変数がある場合に警告する
  • if文内で=演算子を使っていないか(if (message = someFunc())を禁止)
  • switchの各caseがきちんとbreakを含んでいるか

Linterはこのようなバグの原因になりやすい書き方を静的にチェックしてくれます。今見たように、ESLintはコードスタイルを統一するだけのツールではありません。というより、そういう役割はPrettierのほうが適しています。ESLintはLinterなのですから

PrettierとESLintは役割が全然ちがう

さて、Prettierが出てきたので、ついでにこれも説明します。

Prettierは直訳すれば「美しくする」です。その名のとおりコードを整形します。たとえば、

  • クォートをシングル/ダブルに統一
  • インデントのためのスペースの個数
  • 必ずセミコロンをつける/不要なセミコロンはつけない
  • アロー関数の引数にカッコをつける((x) => x)/つけない(x => x)の統一

PrettierにはLinterとしての機能はありません。コードを見やすくしてくれるだけです。しかし、ESLintよりもコード整形に特化しているので、ESLintではできない整形も行えます。

なぜ勘違いしてしまったのか?

ESLintとPrettierはどちらも「静的チェッカー」に分類されます。また、どちらも目的は違えど「コードを書き換える」ツールです。そのため、触ったことがない人に勘違いさせやすいです。実際、僕は勘違いしていました。

また、ESLintの記事を読むと「コードの書き方を統一する」点が真っ先に挙げられ、静的チェックを非常に軽視した書き方がなされていることが多いです。今ESLintでパッとぐぐったところ、上位3つの記事のうち2つが「チーム内でのコードの統一ができる」という役割をさも重要かのように書いていました。これは明らかなミスリードです。ほんとうにやめていただきたい。

終わりに

ついでにいえば、Webpackについても色々といいたいことがありますが、これはまた今度書きたいと思います。ESLintは静的チェックをしてくれるのが最大の利点で、コード整形のために使うべきではありません