Redux Toolkit[環境構築]

Redux・TypeScript作成方法

$ npx create-react-app アプリ名 --template redux-typescript

Git Hubはこちらから

VScodeにESLint+Prettier追加します。

設定が反映されている方はしなくて大丈夫です。

この記事を参考に作成していきます。

eslint

$ yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

prettier

$ yarn add -D prettier eslint-config-prettier

アプリの直下に.eslintrc.json作成

.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": {
     "適当なルール なければ書かなくてもいいです。"
  }
}

settings.jsonに追記する

(command + ,)で設定が開いて右上のファイルマークを押すと
settings.json変更できます。記述がなければ変更してください。

settings.json

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

作成アプリに必要なものインストール

$ yarn add node-sass
$ yarn add react-hook-form
$ yarn add @material-ui/core
$ yarn add @material-ui/icons

これで環境構築は完成です。