【React】ViteでReact & TypeScript & ESLint, Prettier 基盤環境の構築（簡潔版）

$ yarn create vite my-app --template react-ts

$ cd my-app
$ yarn
$ yarn dev

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/7042217f-2ae0-8f86-0a32-bb843aab76bf.png)

### Eslint 初期設定
$ npx eslint --init

How would you like to use ESLint?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/4a841ed8-428d-ff15-0a61-3226a3e32b92.png)
What type of modules does your project use?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/a5b93923-a33b-e950-3002-27bbb1f67b5e.png)
Which framework does your project use?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/2d264b0e-8ce4-a63b-a4af-0881c00a0a0e.png)

Does your project use TypeScript?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/1135d728-e051-dcda-1b2f-2162ad904a20.png)

Where does your code run?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/c79a3bc7-756a-407f-e209-589ae85905e4.png)
How would you like to define a style for your project?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/b3d368d8-1da1-603a-6ba7-c32d7deb98c7.png)
Which style guide do you want to follow?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/91d20afd-780a-c28c-906c-38b1b941d25a.png)

What format do you want your config file to be in?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/18db2907-c38b-c7df-dd93-19f0bf8c065a.png)
必要なパッケージをインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/8ae85480-a28d-d649-937d-bd20aaccf871.png)
Which package manager do you want to use?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/fc318d4b-8177-a8e2-e564-263b61169f89.png)

すべてが完了したら.eslintrc.jsonが作られた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/581bea33-06b5-b9f5-0867-3ee603191488.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/acc1667c-38ac-d3f7-1019-845901b95d83.png)
.eslintrc.jsonが作られたので、デフォルトで作られた.eslintrc.cjsを削除する。

### .eslintrc.jsonを編集する
「/.eslintrc.json」を下記の様に修正します。

```diff:.eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
+       "plugin:@typescript-eslint/recommended",
+       "prettier"
    ],
+   "overrides": [],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
+       "@typescript-eslint"
    ],
    "rules": {
+       "react/react-in-jsx-scope": "off"
    },
+   "settings": {
+       "react": {
+           "version": "detect"
+       }
+   }
}

```

### prettierの設定
$ yarn add --dev prettier
.prettierrcファイルを手動で作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/4c17efaa-b5fb-b419-bcc0-9314acc1f331.png)

.prettierrcを編集する

```.eslintrc
{
  "endOfLine": "lf",
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "es5",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true
}
```

### eslint-config-prettier 設定
$ yarn add --dev eslint-config-prettier

package.jsonに下記を追加する。
①typeエラーがないか確認
②eslintとprettierの設定に重複（衝突）するものはないかを確認
③eslintでコードを確認し、修正可能なものは修正する
④prettierでコードをフォーマットする

```
"fix": "tsc && yarn conflict && yarn lint && yarn format"
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633322/8c994ee3-7b50-e476-e32e-d73bff13fb91.png)

これで環境構築は完了しました。