ESLintとPrettierをどう扱うべきかの考察（2018年12月版）

ESLintとPrettierをどう扱うべきかの考察（2018年12月版）:

はじめに

Prettier が ver.1.15 で Vue.js に対応したことにより、Vue.js で開発していた私は ESLint とPrettier の併用である懸念が起きうることを知ることになりました。

あまり情報が広まっていないようなので、これから使おうと思っている開発者に向けてまとめてみました。

ESLintとPrettier

まず、ESLint と Prettier の違いを知る必要があります。

ESLint とは、JavaScript の構文を静的解析し、問題のありそうな箇所を指摘・修正してくれるツールです。

使用していない変数だとかグローバル変数の宣言といった、不具合の原因になりそうな箇所を指摘してくれます。

次に、Prettier とは、JavaScript の構文を静的解析し、コードのフォーマット違反のある箇所を指摘・修正してくれるツールです。

ESLint と違ってフォーマットしか検証しませんが、統一されたきれいなコードをもたらしてくれます。

（ESLint もフォーマットをチェックしてくれますが、より細かくチェックしてくれます）

この通り、それぞれの検証範囲が違うので、併用するのが一般的とされます。

一方で、ESLint と Prettier を併用すると、それぞれのフォーマットチェックがバッティングしてしまうという問題がよく知られています。

それを回避するために、Prettier が eslint-plugin-prettier と eslint-config-prettier というのを提供しています。

これらを使うと特定のルールを ESLint で無効化させて、代わりに Prettier がチェックすることになります。

それぞれの哲学

ここで、ESLint と Prettier の掲げている哲学に注目してみたいと思います。

ESLint の哲学として

Everything is pluggable 
Every rule 
Additionally 
The project 

の4つを掲げています。

平たく言うと、ルールは決めているけど、それを適用するかどうかはみんな自分で決めていってね、という方針ですね。

Prettier の哲学は

By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. 

です。

すべての議論を止める、つまり Prettier がすべてのフォーマットルールを決めてくれるということです。

Prettier の哲学としては自分たちのフォーマットさえあれば大丈夫、ESLint としても他で適用したければしたらいいよ、というスタンスは一見噛み合っています。

が…

起きうる懸念

Prettier 開発者は三項演算子のフォーマットについて

We can't play the cat-and-mouse game of produce code that works with all editor plugins.

と言っています。

これ自体は、まあそうだよね。と思うんですが、他の Plugin のルールには合わせないという哲学は ESLint の Plugin でルールを組み上げるという哲学とバッティングするのです。

どういうことかというと、ESLint で Vue.js の構文をチェックする eslint-plugin-vue という Plugin は eslint-plugin-vue @4.7.1 の時点で Prettier の変更に 2018/12/9 時点では対応していません。

（Prettier の設定を優先するためのレイアウトルールをすべて無効にする issue は作られています）

一方で、eslint-plugin-vue のチェック内容を eslint-config-prettier @3.3.0 は無効化できていません。

そのため、Prettier がルールの範囲を広げていくことにより、他の Plugin のルールと重複してしまい、お互いが修正し合ってエラーが解消されない現象が発生してしまっています。

Prettier が他の Plugin のルールに合わせないつもりなら eslint-config-prettier でちゃんとルールを無効化するべきなのでしょうねぇ…。

どう適用していくべきか

個人的な意見ですが、Formatter と Linter の棲み分けは不可能なように思えます。

なので、以下の3つが現実的なのではないでしょうか。

1. ESLint のみを使う
2. Prettier のみを使う
3. 併用するが、レイアウトルールはすべて Prettier に任せる

ESLint のみを使う場合、設定を個別に適用していくため設定ファイルが長くなる問題があります。が、自分が好きなスタイルを定義したい人は ESLint を選ぶべきでしょう。

Prettier のみを使う場合、個別に変更したいという気持ちは捨てたほうが良いです。Prettier に身を任せると幸せになれることでしょう。

併用する場合、Plugin のバージョンに注意を払う必要があります。が、現時点ではレイアウトルールを Prettier に任せさえすれば、それぞれのいいところを享受できるでしょう。

以上、みなさんのプロジェクト開発が幸せになれますように。