create-react-appでReact+Redux+Typescriptのアプリのひな形を作る

create-react-app で React + Redux + Typescript のアプリのひな形を作るときのメモ

環境は WSL2 + VSCode

追加で行う設定は以下

1. Prettier の設定を追加
2. import に絶対パスを使う

create-react-app

practice のところに自分のアプリ名を入れる

npx create-react-app practice --template redux-typescript
cd practice

Prettier

Prettierを追加

yarn add -D prettier

Prettierの設定を行う

設定は .prettierrc ではなく package.json に追加するのが好きなので、全部 package.json に書く。
あと VSCode とか使っていない人がチームにいたりするので、scripts にコマンドを追加しておく。

package.json

{
  "scripts": {
    "format": "prettier --write src/**/*.{ts,tsx}"
  },
  "prettier": {
    "arrowParens": "avoid",
    "printWidth": 120,
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true
  }
}

import の絶対パス指定

https://create-react-app.dev/docs/importing-a-component/#absolute-imports を参考に設定。
"include": ["src"] は最初から追加されていた

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}