ESLint と Prettier の導入

# はじめに
ESLint と Prettier の導入手順のメモです。

開発環境は以下の通りです。

- Windows11
- VSCode
- Vite 4.1.0

# ESLint
まずはESLintをインストールします。
[公式ドキュメント](https://eslint.org/docs/latest/use/getting-started)に沿って、以下のコマンドでインストールします。

```
npm init @eslint/config
```
インストールの途中でいくつか質問されます。

スタイル（フォーマット）は、Prettierに任せたいので、`To check syntax and find problems` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/f19d0329-59e5-6743-3d91-5360d1fe6cff.png)
`tsconfig.json` の `"module"` は `ESNext` なので、`JavaScript modules（import/export）` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/0b621e8f-9172-7c30-6978-8af883faf974.png)
`React` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/1a71ab78-780a-7392-63cd-7dc8405f5a50.png)
`TypeScript` を利用しているので、`Yes` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/2581b2e6-2a8b-a72f-90d9-50bfcdc2d6f1.png)
`Browser` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/406515c5-dfc3-5751-a665-28de9551b7c5.png)
`JSON` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/c2a2fb56-1e8b-609c-8a76-04d3c7b2a28f.png)
ReactやTypeScript向けのプラグインのインストールを求められるので、`Yes` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/dbd69113-dfe6-1127-cdad-42e7b096b2b7.png)
`yarn` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/187cb393-7931-1c6d-dc30-7cd04a178c87.png)

これでインストールが完了します。

:::note
インストール時の質問内容については、_[Setting up ESLINT in your JavaScript Project with VS Code](https://dev.to/devdammak/setting-up-eslint-in-your-javascript-project-with-vs-code-2amf)_ で解説されています。
:::
インストールが完了すると、新たに `.eslintrc.json` が作成されます。
```.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {}
}
```

また、`package.json` の `devDependencies` には、以下の4つが追加されます。
- ` "@typescript-eslint/eslint-plugin": "^5.52.0"`
- `"@typescript-eslint/parser": "^5.52.0"`
- `"eslint": "^8.34.0"`
- `"eslint-plugin-react": "^7.32.2"`

```package.json
"devDependencies": {
  "@types/react": "^18.0.27",
  "@types/react-dom": "^18.0.10",
  "@typescript-eslint/eslint-plugin": "^5.52.0",
  "@typescript-eslint/parser": "^5.52.0",
  "@vitejs/plugin-react": "^3.1.0",
  "eslint": "^8.34.0",
  "eslint-plugin-react": "^7.32.2",
  "typescript": "^4.9.3",
  "vite": "^4.1.0"
}
```

:::note
ESLintが正しくインストールされたか、以下のコマンドでバージョンを表示して確認できます。
```
npx eslint -v
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/c67e6ed9-440d-e475-f5c6-36f08457db97.png)
:::

# Prettier
Prettierの設定をしていきます。
[公式ドキュメント](https://prettier.io/docs/en/install.html)に沿って、以下のコマンドでインストールします。

```
yarn add --dev --exact prettier
```

:::note
Prettierが正しくインストールされたか、以下のコマンドでバージョンを表示して確認できます。
```
yarn prettier -v
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/785a5a6f-0078-6da3-6c52-050968fdae76.png)
:::

次にプロジェクトルートに設定ファイルとして、`.prettierrc.json` を作成します。
加えて、フォーマット対象外のファイルを指定するために `.prettierignore` を作成します。
それぞれ設定したい内容がある場合、各ファイルに記載します。

# eslint-config-prettierの追加
ここまでの手順でESLintとPrettierの導入はできました。
ただ、このままでは、ESLintとPrettierのフォーマットルールが競合してしまいます。

そのため、最後にその対策を行います。
Prettierの公式ドキュメントには、フォーマットはPrettierを、バグ検知はリンターを使うということが記載してあります。

>use **Prettier for formatting** and **linters for catching bugs!**
([Prettier vs. Linters](https://prettier.io/docs/en/comparison.html))

したがって、ESLintのフォーマット機能を無効にします。
方法は簡単で [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) を利用します。

まず以下のコマンドでインストールします。
```
yarn add --dev eslint-config-prettier
```
その後、`.eslint.json` の `extend` の**最後**に `"prettier"` を追加すれば完了です！
```
"extends": [
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:@typescript-eslint/recommended",
  "prettier"
],
```

# 参考
- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)
- [ESLintでTypeScriptのコーディング規約チェックを自動化しよう](https://typescriptbook.jp/tutorials/eslint)
- [ESLint のススメ](https://zenn.dev/yhay81/articles/def73cf8a02864)
- [Getting Started with ESLint](https://eslint.org/docs/latest/use/getting-started)
- [Install - Prettier](https://prettier.io/docs/en/install.html)
- [Prettier vs. Linters](https://prettier.io/docs/en/comparison.html)
- [Prettierでコード整形を自動化しよう](https://typescriptbook.jp/tutorials/prettier)
- [Setting up ESLINT in your JavaScript Project with VS Code](https://dev.to/devdammak/setting-up-eslint-in-your-javascript-project-with-vs-code-2amf)