ESLint + Prettierの競合を回避する(2022年2月版) #React

はじめに

eslintとprettierを共存させる時の設定を調べたのでまとめます。

環境

Node v14.18.0
React v7.17.0.2
ESLint v7.32.0
Prettier v2.5.0

結論

色々あるけど、現在（2022年2月）はeslint-config-prettierを導入するのがベストプラクティスらしい。
eslint-plugin-prettierを紹介している過去の記事があるが、現在は非推奨なので要注意。

ESLint vs Prettier

雑談程度に..

Linterには2つの大きな目的（ルールカテゴリ）がある。

コードをフォーマットする（インデント幅や改行など）
コードの品質を維持する（未使用変数や未使用importなど）

Prettierは「コードをフォーマットする」に徹し、ESLintは「コードの品質を維持する」徹すべきらしい。
（Prettierの公式がそう言っている）

前述した非推奨のeslint-plugin-prettierは、ESLintでフォーマットもしてしまおう的なやつなので、非推奨なのだと思われる。
ちなみにeslint-config-prettierは、ESLint側のフォーマットに関するルールをoffにするというもの。

導入手順

eslintとprettierの導入は割愛します。

①ESLint内でpluginを使うにはnpmパッケージが必要なのでインストール

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

②.eslintファイルに設定を追加

eslint.js

{
  extends: [
    "some-other-config-you-use",
    "prettier" // これを追加
  ]
}

③(必要であれば)VSCodeの設定を変更する

設定例:

settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

他にもeditor.codeActionsOnSaveのoptionはあるので、拡張機能: ESLintを参考に設定する

終わりに

普段何気なく使っているけど、いざ自分が設定するという立場になって、やっと仕組みを理解できた！