ESLint - Prettier連携のやり方と仕組み

ESLint - Prettier連携のやり方と仕組み:

メモ代わりに関係ない情報も色々含めた。

これまでのあらすじ

ESLint is 何

JSのLinter。めっちゃカスタマイズできる。
eslint --fixコマンドでフォーマットもできる。

Prettier is 何

JSのフォーマッター。eslint --fixよりも強いらしい。

具体例で言うと、「1行80字超えのコードを適切に改行してくれる」らしい。

やたらこの例を推してくる。他の例を知りたい。

Prettier only ダメ is なぜ

フォーマットしかできない

Linterのルールには2種類ある。

1. フォーマットに関するルール
2. コードの品質に関するルール

「後者はLinterの仕事。Prettier、ソウイウノ、ヤラナイ。」的なことが公式で案内されている。

カスタマイズ性に乏しい

ESLintほど充実していない。

よりカスタマイズできる版を提供しようっていうフォークプロジェクトがあるぐらい。

応援したい。でも開発止まってるっぽい。

Why don't you ESLintとPrettierを併用？

Yes, I am.

併用 is どうやる

prettierをかましてからeslint --fixをかます。

Code ➡️ prettier ➡️ eslint --fix ➡️ Formatted Code ✨
prettier/prettier-eslint

公式リポジトリにそういうプロジェクトがあるぐらいなので、アリっぽい。

個人的にはそれで良いのか感がすごい。

Prettier流のフォーマットがどれだけ上書きされてるのか知りたい。

やはりPrettierの優位な点をリストアップした資料とかが欲しい。

「80字超え対処」しか強みがないならこれで良いと思う。

ESlintをカスタマイズしてPrettierと連携させる。

prettier/eslint-config-prettier
prettier/eslint-plugin-prettier

この辺を組み込む。すると、eslint --fixをした時にprettier準拠でフォーマットがされることになる。

以下、この辺の仕組みの解説。

本題

ESLintの設定について

概要

ソース内コメントや設定ファイルによって色々カスタマイズできる。

設定ファイルは、package.json内にeslintConfigフィールドを設けて記述するパターンと、.eslintrc.{js|json|yaml}ファイルを作るパターンがある。

設定の優先順位

高い順に

1. コメント
2. CLIコマンドのオプション
3. 設定ファイル
   
   
   • 
     .eslintrc.*を置いたフォルダの子フォルダに更に.eslintrc.*を置いたりできる。
     
     
     • チェックするjsファイルについて、近い階層に置いてある.eslintrc.*の設定ほど優先して採用される。
     • 
       .eslintrc.*内でroot: trueを指定すると、それより親フォルダの.eslintc.*は無視される。
   • 
     .eslintrc.*とeslintConfigを記載したpackage.jsonの両方が同じ階層にある場合、eslintConfigは無視される。

上記のどれか１つしか採用されないわけではなく全部採用される。競合する設定について優先順位が考慮されるイメージ。

オブジェクト指向的にいえば、設定をどんどんオーバーライドしていってる感じ。

また、ホームディレクトリに.eslintrc.*があるとフォールバックとして働く。

上記の3つが全部無かった時のみここの設定が反映される。

設定できることの一例：ルールのON/OFF

eslintrc.js

module.exports = { 
    "rules": { 
        // ==を使おうが===を使おうが気にしない。 
        "eqeqeq": "off", 
        // if文などで{}を略したらwarning。 
        "curly": "warn", 
        // ダブルクォートを使う。シングルクォートを使ってたらLinterエラー。 
        "quotes": ["error", "double"] 
        // セミコロンは必須。無かったらLinterエラー。 
        "semi": ["error", "always"] 
    } 
} 

他には、環境（ECMAいくつか、nodeかbrowserか、jQuery使ってるか、etc...）、グローバル変数の設定など。

設定の共有

eslint-config-*という名前でnpmモジュールとして設定を共有できる。

例えば、eslint-config-standardは以下の記述で取り込むことができる。

eslintrc.json

{ 
    "extends": "standard" 
} 

ただし、記述するだけでなくnpmで自分で落としてこないといけない。

ESLintを入れた場所がプロジェクトローカルならプロジェクトローカルに、グローバルならグローバルに。同じレベルに落とさないと使えない。

複数の設定を取り込むこともできる。

eslintrc.json

{ 
    "extends": [ 
        "eslint:recommended", 
        "standard" 
    ] 
} 

後のやつが前の設定をどんどんオーバーライドしていく。

取り込んだ後、更に自分でrulesとか設定しだすのもオーバーライドになる。

設定のプラグイン

eslint-plugin-*という名前でnpmモジュールとしてプラグインを作成できる。

ルールを増やしたりできる。共有設定を含めることもできる。

例えば、eslint-plugin-reactは以下の記述で取り込むことができる。

eslintrc.json

{ 
    "plugins": ["react"] 
} 

プラグイン内のルールは以下のように指定する。

eslintrc.json

{ 
    "plugins": ["react"], 
    "rules": { 
        "react/no-set-state": "error" 
    } 
} 

プラグイン内の共有設定は以下のように取り込む。

eslintrc.json

{ 
    "plugins": ["react"], 
    "extends": ["plugin:react/recommended"] 
} 

Prettier連携

方針

eslint --fixの仕様についてはちゃんと調べていないが、おそらく「ルール」の中には「どう直すか」も含まれている。

ということは、ESLintの組み込みルールを全部無効にし、Prettierのプラグインルールに差し替えまくればいいことになる。

上の方で、ルールには2種類あると書いた。

1. フォーマットに関するルール
2. コードの品質に関するルール

Prettierの担当範囲は前者である。

なので、前者に関するESLintの組み込みルールを全部オフにする。

eslint-config-prettierの使い方

共有設定prettierを取り込むことで、Prettierと競合しそうなESLintの組み込みルールを全部OFFにしてくれる。
reactプラグインの分をOFFにする共有設定prettier/react等、細かい追加分もある。

eslint-config-pluginの使い方

これを取り込むことで、Prettierのルールが代わりに追加される。されるのだが...。

なんと、

eslintrc.json

{ 
    "plugins": ["prettier"], 
    "rules": { 
       "prettier/prettier": "error" 
    } 
} 

prettierというルール1つしか追加されない。

Prettierが扱う全ルールが、この1つにまとめられている。

つまり、ルール毎にON/OFFを細かく設定できない。

全部offか、全部warningか、全部errorかしかない。

しかし、全くカスタマイズが効かないというわけではない。

例えば、ESLint組み込みのindentルールは、ルールのON/OFFだけでなくインデント幅のルールも設定できる。

eslintrc.js

module.exports = { 
    "rules": { 
        // インデント幅が2でなければLinterエラー。 
        "indent": ["error", 2] 
    } 
} 

同じノリで、prettierルールもオブジェクトを使って色々ルールを設定できる。

eslintrc.js

module.exports = { 
    "plugins": ["prettier"], 
    "rules": { 
        // シングルクォートを使う。セミコロンは無し。 
        "prettier/prettier": ["error", {"singleQuote": true, "semi": false}] 
    } 
} 

無理やり感がすごい。

ちなみに.prettierrcってファイルで設定する方法もあるらしい。

なお、このプラグインには共有設定recommendedも含まれている。

eslintrc.json

{ 
    "extends": ["plugin:prettier/recommended"] 
} 

上記により、下記と同じ効果が得られる。

eslintrc.json

{ 
    "extends": ["prettier"], 
    "plugins": ["prettier"], 
    "rules": { 
        "prettier/prettier": "error" 
    } 
} 

逆にいうとそれだけ。

手順まとめ

shell.sh

npm install --save-dev eslint 
npm install --save-dev eslint-config-prettier 
npm install --save-dev eslint-plugin-prettier 
npm install --save-dev prettier 

Prettier本体は雰囲気で入れてるけど、本当に必要なのかは未検証。

eslintrc.js

module.exports = { 
    "extends": ["prettier"], 
    "plugins": ["prettier"], 
    "rules": { 
        "prettier/prettier": [ 
            "error", 
            { 
                // 各種設定 
            } 
        ] 
    } 
} 

他に取り込みたい共有設定があれば、prettierより前にextendする。（prettierでルールOFFにする方が優先順位が高いので。）

愚痴

JavaScript Standard Styleに合わせたいのだが、PrettierにspaceBeforeFunctionParenオプション（関数名と引数名の間にスペースを空ける。ex. function name (arg) { ... }）が無いため合わせられない。

• フォークプロジェクト頑張ってほしい。
• というか普通にPrettierがカスタマイズ性上げてほしい。
• というかStandard Styleはこの仕様だけマイナーなのでやめてほしい。
• というかセミコロン無しのStyleでもっと良いの出てきてほしい。