Help us understand the problem. What is going on with this article?

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は無視される。

上記のどれか1つしか採用されないわけではなく全部採用される。競合する設定について優先順位が考慮されるイメージ。
オブジェクト指向的にいえば、設定をどんどんオーバーライドしていってる感じ。

また、ホームディレクトリに.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-plugin-prettierの使い方

これを取り込むことで、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でもっと良いの出てきてほしい。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした