フォーマットしかできないLinterのルールには2種類ある。フォーマットに関するルールコードの品質に関するルール「後者はLinterの仕事。Prettier、ソウイウノ、ヤラナイ。」的なことが公式で案内されている。カスタマイズ性に乏しいESLintほど充実していない。カスタマイズできる版を提供しようっていうフォークプロジェクトがあるぐらい。開発止まってるっぽい。✨prettier/prettier-eslint公式リポジトリにそういうプロジェクトがあるぐらいなので、アリっぽい。個人的にはそれで良いのか感がすごい。Prettier流のフォーマットがどれだけ上書きされてるのか知りたい。Prettierの優位な点をリストアップした資料とかが欲しい。「80字超え対処」しか強みがないならこれで良いと思う。ESlintをカスタマイズしてPrettierと連携させる。prettier/eslint-config-prettierprettier/eslint-plugin-prettierこの辺を組み込む。--fixをした時にprettier準拠でフォーマットがされることになる。以下、この辺の仕組みの解説。本題ESLintの設定について概要ソース内コメントや設定ファイルによって色々カスタマイズできる。設定ファイルは、package.json内にeslintConfigフィールドを設けて記述するパターンと、.eslintrc.{js|json|yaml}ファイルを作るパターンがある。高い順にコメントCLIコマンドのオプション設定ファイル.eslintrc.*を置いたフォルダの子フォルダに更に.eslintrc.*を置いたりできる。チェックするjsファイルについて、近い階層に置いてある.eslintrc.*の設定ほど優先して採用される。trueを指定すると、それより親フォルダの.eslintc.*は無視される。.eslintrc.*とeslintConfigを記載したpackage.jsonの両方が同じ階層にある場合、eslintConfigは無視される。上記のどれか1つしか採用されないわけではなく全部採用される。競合する設定について優先順位が考慮されるイメージ。オブジェクト指向的にいえば、設定をどんどんオーバーライドしていってる感じ。ホームディレクトリに.eslintrc.*があるとフォールバックとして働く。上記の3つが全部無かった時のみここの設定が反映される。==を使おうが===を使おうが気にしない。if文などで{}を略したらwarning。ダブルクォートを使う。シングルクォートを使ってたらLinterエラー。無かったらLinterエラー。}}他には、環境(ECMAいくつか、nodeかbrowserか、jQuery使ってるか、etc...)、グローバル変数の設定など。設定の共有eslint-config-*という名前でnpmモジュールとして設定を共有できる。eslint-config-standardは以下の記述で取り込むことができる。"standard"}ただし、記述するだけでなくnpmで自分で落としてこないといけない。ESLintを入れた場所がプロジェクトローカルならプロジェクトローカルに、グローバルならグローバルに。同じレベルに落とさないと使えない。複数の設定を取り込むこともできる。]}後のやつが前の設定をどんどんオーバーライドしていく。取り込んだ後、更に自分でrulesとか設定しだすのもオーバーライドになる。設定のプラグインeslint-plugin-*という名前でnpmモジュールとしてプラグインを作成できる。ルールを増やしたりできる。共有設定を含めることもできる。eslint-plugin-reactは以下の記述で取り込むことができる。["react"]}プラグイン内のルールは以下のように指定する。}}プラグイン内の共有設定は以下のように取り込む。--fixの仕様についてはちゃんと調べていないが、おそらく「ルール」の中には「どう直すか」も含まれている。いうことは、ESLintの組み込みルールを全部無効にし、Prettierのプラグインルールに差し替えまくればいいことになる。上の方で、ルールには2種類あると書いた。フォーマットに関するルールコードの品質に関するルールPrettierの担当範囲は前者である。前者に関するESLintの組み込みルールを全部オフにする。共有設定prettierを取り込むことで、Prettierと競合しそうなESLintの組み込みルールを全部OFFにしてくれる。reactプラグインの分をOFFにする共有設定prettier/react等、細かい追加分もある。eslint-plugin-prettierの使い方これを取り込むことで、Prettierのルールが代わりに追加される。}}prettierというルール1つしか追加されない。Prettierが扱う全ルールが、この1つにまとめられている。ルール毎にON/OFFを細かく設定できない。全部offか、全部warningか、全部errorかしかない。カスタマイズが効かないというわけではない。ESLint組み込みのindentルールは、ルールのON/OFFだけでなくインデント幅のルールも設定できる。インデント幅が2でなければLinterエラー。}}同じノリで、prettierルールもオブジェクトを使って色々ルールを設定できる。シングルクォートを使う。}}無理やり感がすごい。ちなみに.prettierrcってファイルで設定する方法もあるらしい。このプラグインには共有設定recommendedも含まれている。["plugin:prettier/recommended"]}上記により、下記と同じ効果が得られる。}}逆にいうとそれだけ。prettierPrettier本体は雰囲気で入れてるけど、本当に必要なのかは未検証。}}他に取り込みたい共有設定があれば、prettierより前にextendする。(prettierでルールOFFにする方が優先順位が高いので。Styleに合わせたいのだが、PrettierにspaceBeforeFunctionParenオプション(関数名と引数名の間にスペースを空ける。})が無いため合わせられない。フォークプロジェクト頑張ってほしい。いうか普通にPrettierがカスタマイズ性上げてほしい。Styleはこの仕様だけマイナーなのでやめてほしい。いうかセミコロン無しのStyleでもっと良いの出てきてほしい。Ikenaga@ikngtty580日ぐらい無職やりました。http://ikngtty.hatenablog.com/Follow株式会社リアルグローブ「世界のすべてをWebAPI化する」ことを目指す技術ベンチャーです。upLoginユーザーは見つかりませんでした。