ESLintとPrettierを組み合わせて使う (長いものを整理してから巻かれる 2021春)

2021/3/15

Tech

何この記事？

ESLint と Prettier を組み合わせて使う方法とその根拠(公式ドキュメント)を整理して、安心して長いものに巻かれるようになる記事

package	記事作成時の latest version
eslint	v7.22.0
prettier	v2.2.1

ESLint でリント、しますよね。 Prettier でフォーマットも、しますよね。 ESLint(eslint --fix .) と Prettier (prettier --write .) は行うことが一部重複しているので、連携手段に関する記事も色々出ています。

そもそもなぜ ESLint を使うか、なぜ Prettier を使うか、なぜ両方を使うか… は置いておいて、これら 2 つを活用して開発を進めたい(長いものに巻かれたい)。出来れば長いもののご意見を伺って安心して巻かれたい。

そのために、公式ドキュメントを確認していきます。

Prettier はなんて言っているの？

まず Prettier の役割についてですが、Prettier は Prettier vs. Linters で ↓ の通り言及しています(意訳に注意)。

Linter は 2 種類のルールをもつ

フォーマットに関するルール

コード品質に関するルール

それぞれの目的は

一貫性のあるルールでコードをフォーマットする

コードからバグを発見する

Prettier はフォーマットのために使用して、バグを発見するには(Prettier 以外の)Linter を使用する。

つまり、「Prettier はフォーマットを行う。 Linter が持つ 2 種類のルールのうち、コード品質に関するのルールのみを Linter で行う」という棲み分けが、Prettier が主張する組み合わせの方針です。この「組み合わせ」について、Prettier は Integrating with Linters で ↓ の通り言及しています(意訳に注意)。

Prettier と ESLint を組み合わせるために、競合するルールを off にする

Linters は “code quality rules” だけでなく、“stylistic rules”も含んでいる。

Prettier を使うときは、Linters の”stylistic rules”が不要だし、競合してしまう。

eslint-config-prettier などを使って、不要なルールを off に出来る。

Prettier と Linters の関連(連携?)プロジェクトがいくつか見つかるはずだけど、一般的には推奨しない、でも一部の状況では便利かも

eslint-plugin-prettier などは Linter 経由で Prettier を実行出来て便利だけど…

エディターに赤線(Lint エラー)がめっちゃ出る

直接 Prettier を実行するより遅い

レイヤーを１つ追加している分、壊れる可能性が高くなる

prettier-eslint などは Prettier と Linters が競合して使えない時に便利だけど…

直接 Prettier を実行するよりめっちゃ遅い

つまり、「組み合わせ(連携)のために、 eslint-config-prettier (競合する Lint ルールを off) のみ使用する」ことを Prettier は推奨しています。

ESLint 側はなんて言っているの？

公式ドキュメントを検索すると、Prettier に関する FAQ の更新しか記述がありませんでした。対象の commit (c0c331e) を見てみると(意訳注意)、

Q. Prettier は ESLint の代わりになるの？

A. ならない

ESLint は traditional lintingとstyle checkingを両方持っている。

両方のために ESLint を使えるし、

フォーマットのために Prettier、エラーの可能性を見付けるために ESLint を組み合わせることも出来る。

つまり、「両方使うかどうかはお任せ」までの言及にとどまっています。

結局、どうするの？

Prettier の言及に従って、↓ の方針で使用します。

コードフォーマットは Prettier で行う
コード品質のチェックは ESLint で行う
ESLint が持っているコードフォーマットのルールは eslint-config-prettier で off にする
その他の連携ツールは使用しない (コードフォーマット(Prettier)とコード品質のチェック(ESLint)はそれぞれ別のものとして実行する)

.eslintrc

extends の最後に eslint-config-prettier を設置して、 Prettier のルールとは競合しない ESLint の設定を行います (eslint-config-line#Installation 参照)。

{
  "extends": [
    "eslint-config-hoge",
    "eslint-config-fuga",
    "eslint-config-prettier"
    // ここ以降に他のconfigをさらに継承すると、Prettierのルールと衝突する危険性がある
  ]
}

npm script

Prettier の package.json を参考に check format, check code-quality 用の npm script を定義します。

{
  "lint:eslint": "  eslint .",
  "lint:prettier": "prettier . --check",
  "fix:eslint": "  yarn lint:eslint --fix",
  "fix:prettier": "yarn lint:prettier --write"
}

組み合わせの核は eslint-config-prettier のみです。 Prettier の実際のルールと eslint-config-prettier が off にするルールがちゃんと 1:1 になっている必要があります。 ~~え、それどうやって確認するの…?~~

すっきり！ 💪