ReactのReduxTolkitの練習にて、Prettierのエラーを解消した方法のメモ

初めに

Reactを用いたWebアプリ開発中にエラーが起こりました。
多分、フレームワークに関係なく、VSCodeniteにて、Prettierを使って自動でコード整形をしようとした時にエラーが起こりましたので、eslint-config-prettierのバージョンが7以下の方はぜひ参考ください。

エラーについて

実行すると、[eslint] Cannot read config file: という以下のようなエラーがターミナル上に出てきます。

[eslint] Cannot read config file: 
/Users/ホームディレクトリ名/React/toolkit-todop/node_modules/eslint-config-prettier/@typescript-eslint.js

解決策

.eslintrc.jsonファイルのバージョンに関するエラーのようでした。Version 8.0.0 (2021-02-21)では、以下のように書かないとエラーになるようです。

eslint-config-prettierのバージョンを8.0.0以上に上げた人は注意が必要です。

.eslintrc.json

{
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier",
      "prettier/@typescript-eslint"
    ],
    "plugins": ["@typescript-eslint"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "sourceType": "module"
    },
    "env": { "browser": true, "node": true, "es6": true },
    "rules": {
      // 適当なルール
    }
  }

以下のように変更するとエラーが解消されます。

.eslintrc.json

{
   "extends": [
    "some-other-config-you-use",
    "prettier"
  ],
    "plugins": ["@typescript-eslint"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "sourceType": "module"
    },
    "env": { "browser": true, "node": true, "es6": true },
    "rules": {
      // 適当なルール
    }
  }

ぜひ、同じ境遇でお困りの方は、参考にしていただければと思います。

参考記事

• eslint-config-prettier
• Prettierの設定に躓いたので解消した方法をメモ