Prettierの設定に躓いたので解消した方法をメモ

挨拶

どうも、@yanteraです。
Prettierを使って自動でコード整形をしようとした時にハマったので、その時のメモになります。特に2021/2/21以前の記事を参考にしている人やeslint-config-prettierのバージョンが7以下の方向けの記事になります。

問題

このエラーは少し加工してますが、概ねこのようなエラーが発生しました。

$ yarn format:eslint && yarn format:prettier
$ eslint --fix "**/*.{js,jsx,ts,tsx}"

Oops! Something went wrong! :(

ESLint: 8.15.0

Error: Cannot read config file: /my-project/node_modules/eslint-config-prettier/react.js
Error: Cannot read config file: /my-project/node_modules/eslint-config-prettier/@typescript-eslint.js
Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21

結論

出来ればこのログを確認して下さい。
https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21

簡単に言うとVersion 8.0.0 (2021-02-21)の時点で

{
  "extends": [
    "some-other-config-you-use",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/babel",
    "prettier/flowtype",
    "prettier/react",
    "prettier/standard",
    "prettier/unicorn",
    "prettier/vue"
  ]
}

から

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

という風に書かないとエラーになるようになったらしいです。2021/02/21以前の情報を参考にして写経している人、eslint-config-prettierのバージョンを8に上げた人は注意が必要です。

最後に

ここまで読んで下さりありがとうございます。
もし間違いや改善点がある場合、ご意見を頂けますと幸いです。