【初心者向け】Next.js/TypeScriptプロジェクトにおけるESLintとPrettierの導入方法

# TL;DR
最近、Next.js/TypeScriptのプロジェクトに、どうやってESLintとPrettierを設定したっけ？となったので、自分なりのESLintとPrettier導入する方法とESLintのルール追加の方法をまとめました。

# ESLint/Prettierとは
### ESLint
JavaScript/TypeScriptのコードが、スタイルガイドラインなどに指定したルールに違反していないかをチェックしてくれる静的解析ツールです。もしルールに違反している場合は、指摘してくれたり修正してくれたりします。

### Prettier
コードフォーマッターです。インデントや改行などの記述方法を自動で統一してくれるツールです。

# 導入手順
### Next.jsのプロジェクト作成
Next.jsのプロジェクトを作成します。本記事ではTypeScirptを利用するため`--typescript`フラグを付与しています。
```
yarn create my-app --typescript
```

:::note info
上記コマンドを実行すると対話形式でプロジェクト名を設定できるので、任意の名前を設定してください
:::

### ESLintのインストール


### ESLintの初期設定
my-appディレクトリに移動しESLintの初期設定を行います。
```
cd my-app
yarn run eslint --init
```
こちらのコマンドを実行すると、以下のように対話形式でESLintの設定を行うことができるので、ご自身の環境に合わせて設定をしてください。
```
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn
```
### yarn lint
lintのエラーを確認するためには`yarn lint`というコマンドを使います。
実際に`yarn lint`コマンドを実行すると以下のようなエラーが出ます
```
./pages/index.tsx
8:5  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope
9:7  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope
...
```
こちらは
```typescript
import React from 'react';
```
というimport文を追加することで解消します。
エラーのでている`./pages/_app.tsx`と`./pages/index.tsx`に上記のimport文を追加し`yarn lint`を実行するとエラーが解消されていることがわかるかと思います。
### .eslintrc.jsの設定
.eslintrc.jsで細かいルールの設定ができます。eslintrc.jsで設定できるルールはたくさんあるので詳しくは[eslint公式サイト](https://eslint.org/docs/latest/rules/)をご覧ください。
ここではいくつかピックアップしてルール設定を行いたいと思います。

#### [semi](https://eslint.org/docs/latest/rules/semi)
"semi"は末尾にセミコロンを書くか書かないかを一貫させるルールです。
.eslintrc.jsは以下の`rules`に以下の設定を追加しましょう
```diff_javascript
"rules": {
+        "semi": "error",
    }
```
この状態で`yarn lint`を実行するとセミコロンが必要な箇所にエラーが出ていることがわかるかと思います。
#### [eqeqeq](https://eslint.org/docs/latest/rules/eqeqeq)
"eqeqeq"は厳密等価演算子を書くか書かないかを一貫させるルールです。
等価演算子と厳密等価演算子の違いはこちらの記事をご覧ください。
[「==」（等価演算子）と「===」（厳密等価演算子）の違いを解説してみた](https://qiita.com/bokutano26/items/658460e9cc4af08e97a0)
.eslintrc.jsは以下の`rules`に以下の設定を追加しましょう
```diff_javascript
"rules": {
+        "eqeqeq": "error",
    }
```

### Prettierの設定方法
#### Prettierをインストールします。
```
yarn add --save-dev prettier eslint-config-prettier
```
`eslint-config-prettier`は ESLintのコードフォーマットに関連するルールを無効化し、バグを検出するルールのみを有効にするプラグインです。

#### .eslintrc.jsにPrettierの項目を追加します
```diff_javascript
"extends": [
        ...,
+        "prettier",
    ],
```
#### vscodeの設定
vscodeの拡張機能で`ESLint`と`Prettier-Code formatter`をインストールします。
![スクリーンショット 2022-10-09 10.03.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194603/842fed5c-671d-4f0d-cd70-15814b126feb.png)
![スクリーンショット 2022-10-09 10.03.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194603/9db43c58-83e0-5a80-6269-587389731f69.png)

vscodeのsettingsから以下2つの設定を行います。こちらを設定することでファイル保存時にコードが整形されるようになります。
・`defaultFormatter`を`esbenp.prettier-vscode`に変更
・`formatOnSave`を`true`に変更


# まとめ
- Next.jsのプロジェクトにESLint, Prettierを設定する方法を解説しました。
- eslintrc.jsファイルにESLintのルール追加をする方法を解説しました。

# 参考文献
https://nextjs.org/docs
https://eslint.org/