【React】Vite+React & TypeScript & ESLint, Prettier Setup

# はじめに
`React`のセットアップを紹介します。

続いて、`TypeScript`, `Eslint`, `Prettier`の設定もしていきます。

`React`のプロジェクト作成には、爆速で有名な`Vite`を使ってセットアップしていきます。

* 構築環境

| tools | version |
| :-- | :----: |
| Vite | 3.2.0 |
| React | 18.2.0 |
| ESLint | 8.0.1 |
| Prettier | 2.7.1 |

## 目次
1. [Viteを使ってReactプロジェクトを作成](#viteを使ってreactプロジェクトを作成)
2. [Eslint 初期設定](#eslint-初期設定)
3. [Prettier 設定](#prettier-設定)
4. [eslint-config-prettier 設定](#eslint-config-prettier-設定)
5. [エラー 解決](#エラー-解決)
6. [husky 導入](#husky-導入)

# Viteを使ってReactプロジェクトを作成
[Vite](https://ja.vitejs.dev/config/server-options.html)は爆速です。
- 開発時はバンドルがないので開発サーバーの起動が早い。
- `Hot Module Replacement`が修正分だけを適応するので動作が早い。

プロジェクトを作成したいディレクトリで、下記コマンドを走らせます。

```
$ yarn create vite
```

プロジェクトの設定を入力・選択していきます。

- Project name
![スクリーンショット 2022-10-30 21.41.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/bb4cb701-4c83-999a-7054-e589aca26819.png)

- Select a framework
![スクリーンショット 2022-10-30 21.43.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/78007b03-85c0-bdb4-cf05-45df1d94d4f7.png)

- Select a variant
![スクリーンショット 2022-10-30 21.43.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/2b7e4779-583b-736c-dba5-5190f035947f.png)


このようになれば作成できました。
![スクリーンショット 2022-10-30 21.44.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/cb9c6372-f83a-602e-46b5-c54958ba699c.png)

プロジェクトが作成できたら、プロジェクトのディレクトリに移動しておいてください。
node_modulesの作成や、サーバーが立ち上がることも確認しておきます。

```
$ cd sample-app

$ yarn

$ yarn dev
```

ちなみに、`Vite`が使うローカルサーバー(localhost)のポートはデフォルトで`5173`になります。

# Eslint 初期設定

`Eslint`の初期設定を行なっていきます。

```
$ npx eslint --init
```

設定について質問されるので、選択していきます。

- How would you like to use ESLint?
![スクリーンショット 2022-10-28 16.38.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/d130eec8-959d-6792-0cab-d7a190e9a609.png)

- What type of modules does your project use?
![スクリーンショット 2022-10-28 16.39.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/9fea8a15-17b1-ae5d-878d-a4c60488a48d.png)


- Which framework does your project use?
![スクリーンショット 2022-10-28 16.39.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/699ca080-5be4-dc75-a3c7-3b44340ea359.png)


- Does your project use TypeScript?
![スクリーンショット 2022-10-28 16.39.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/b4d31333-7b95-118a-8b21-c006503fe63e.png)


- Where does your code run?
![スクリーンショット 2022-10-28 16.40.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/cd90af56-e28c-9a91-d356-84c8932226e0.png)


- How would you like to define a style for your project?
![スクリーンショット 2022-10-28 16.41.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/7fd152df-4ad3-f463-2ede-175b08097113.png)


- Which style guide do you want to follow?
![スクリーンショット 2022-10-28 16.41.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/c1efc210-fa32-a57c-df4f-22126f128b58.png)
今回は、Standardを選択しています。1番厳しいstyle guideとして、airbnbを選択することもあります。

- What format do you want your config file to be in?
![スクリーンショット 2022-10-28 16.41.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/284c8af3-7298-6ca3-58c2-c6d65ba7efbb.png)

今回はJavaScriptを選択していますが、お好きなものを選択してください。

- Would you like to install them now?
![スクリーンショット 2022-10-28 16.42.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/1bdfa43e-8c72-ade4-f278-de9738da2b82.png)

- Which package manager do you want to use?
![スクリーンショット 2022-10-28 16.43.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/be2d70a4-24fd-1c4a-99e9-1b95633adca8.png)

設定が完了できたら、`.eslintrc.cjs`が作成されていることを確認してください。

```
sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
+ └── .eslintrc.cjs
```

`.eslintrc.cjs`を編集していきます。

`React`のバージョンを指定することで、`Eslint`がそのルールに合わせてくれます。

今回は`React`のバージョンを`18.2.0`に設定しています。

```.eslintrc.cjs
  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended',
      'standard-with-typescript',
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['react'],
    rules: {
    },
+   settings: {
+     react: {
+       version: '18.2.0',
+     },
+   },
  };
```

次に、`.eslintignore`ファイルを作成します。

```
$ touch .eslintignore
```
```
sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
  ├── .eslintrc.cjs
+ └── .eslintignore
```
作成後、`.eslintignore`を編集していきます。

編集する中身についてはご自身のプロジェクトによって変わると思いますので、今回は参考として例を載せておきます。

```.eslintignore
node_modules
yarn.lock
public
```

# Prettier 設定

`Prettier`を導入していきます。

下記コマンドを入力して開発環境に`Prettier`を入れてください。

```
$ yarn add --dev prettier
```

導入が完了したら、`.prettierrc`ファイルを作成します。
```
$ touch .prettierrc
```
```
sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
  ├── .eslintrc.cjs
  ├── .eslintignore
+ └── .prettierrc
```

作成後、`.prettierrc`を編集していきます。

編集する中身についてはご自身のプロジェクトによって変わると思いますので、今回は参考として例を載せておきます。

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

続いて、`.prettierignore`ファイルを作成します。

```
$ touch .prettierignore
```
```
sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
  ├── .eslintrc.cjs
  ├── .eslintignore
  ├── .prettierrc
+ └── .prettierignore
```
作成後、`.prettierignore`を編集していきます。

`.prettierignore`の中身については`.eslintignore`と同じにしておきます。

こちらもご自身のプロジェクトに合わせて編集してください。

```.prettierignore
node_modules
yarn.lock
public
```

# eslint-config-prettier 設定

下記コマンドを入力して、`eslint-config-prettier`を導入していきます。

`Eslint`にもコードフォーマット機能がすでにあるのですが、`Prettier`にコードフォーマットを任せるので、競合を防ぐために、`eslint-config-prettier`が必要になります。

```
$ yarn add --dev eslint-config-prettier
```

導入が完了したら、`.eslintrc.cjs`を編集していきます。

`extends`に`prettier`を追加しました。

**`prettier`の追加は、`extends`内の最後に追加しないと設定が上書きされないことに注意してください。**

```.eslintrc.cjs
  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended', 
      'standard-with-typescript', 
+     'prettier'
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['react'],
    rules: {
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };
```

以上で、`TypeScript`, `Eslint`, `Prettier`の設定が完了しました。

`package.json`ファイルの中身を確認しておきましょう。

```package.json
{
  "name": "sample-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.22",
    "@types/react-dom": "^18.0.7",
    "@vitejs/plugin-react": "^2.2.0",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.31.10",
    "prettier": "^2.7.1",
    "typescript": "*",
    "vite": "^3.2.0"
  }
}

```

一度、`Eslint`を走らせてみましょう。

## `Eslint`でチェック

下記コマンドを入力して、`Eslint`を走らせます。
```
$ ./node_modules/.bin/eslint src/App.tsx
```

```
$ ~
$ ~
$ Oops! Something went wrong! :(

$ ESLint: 8.26.0

$ Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
$ ~
```
エラーの内容としては、parserOptions.projectにプロパティを入れてねって言われています。

`.eslintrc.cjs`を編集していきます。

```.eslintrc.js
  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended',
      'standard-with-typescript',
      'prettier',
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
+     project: ['./tsconfig.json'],
    },
    plugins: ['react'],
    rules: {
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };
```

これで`tsconfig.json`のルールに沿って`Eslint`が走ってくれるので、エラーは解決します。

再度、`Eslint`を走らせてみます。

![スクリーンショット 2022-10-30 23.10.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619375/d980e994-f601-1ed7-b774-68745ffc930e.png)

まだコーディング規約に対してエラーが出てますので、解決していきましょう。

```.eslintrc.js
  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended',
      'standard-with-typescript',
      'prettier',
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      project: ['./tsconfig.json'],
    },
    plugins: ['react'],
    rules: {
+     'react/react-in-jsx-scope': 'off',
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };
```

ほかにもエラーが出ている場合はご自身で解決してみてください。

また、`Eslint`のルールについては、ご自身のプロジェクトに合わせて、中身を編集・追加してください。

# 最後に
以上、`React`の環境構築に加えて、`TypeScript`, `Eslint`, `Prettier`の導入について紹介しました。

フロントの技術は日進月歩なので、やり方が古いや間違ってるといったことがあればコメントいただきたいです。

最後まで読んでいただきありがとうございました。

# 参照

- [React reference](https://ja.reactjs.org/docs/getting-started.html)
- [ESLint reference](https://eslint.org/docs/latest/)
- [Prettier reference](https://prettier.io/docs/en/index.html)