VScodeにESLint+typescript-eslint+Prettierを導入する

Qiita記事(https://qiita.com/madono/items/a134e904e891c5cb1d20)を参考にESLint+typescript-eslint+Prettierを導入しようと試みたが、導入後に必要な設定があったためメモ。

■.eslintrc.jsonを以下のように書き換える

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

■eslint-config-prettier/@typescript-eslint.jsを以下のように書き換える
　※has been〜をコメントアウト

throw new 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
);

■yarn startで「Failed to load config "react-app" to extend from」が検出された場合は以下のコマンドを実行する

yarn add eslint-config-react-app