【React】Testing LibraryへのESLintとPrettierの導入

前回の記事に引き続き、Testing LibraryにLinter(ESLint)とFormatter(Prettier)を導入しました。

https://qiita.com/suzuki0430/items/656213ca221ad75aaee4

#ESLintとPrettier
ESLintはJavaScript用のLinterです。

Linterは書かれているコードが記述ルール(ex. 変数が定義前に使われていないか、存在しないファイルがインポートされていないか)に反していないかどうかを解析(静的解析)するもので、複数エンジニアがいるチームでコードスタイルを統一するために使用されます。

https://eslint.org/

一方、Prettierは、JavaScriptで使われるFormatterです。

Formatterはインデントやスペースを加えてくれるなどコードを読みやすいように形成してくれるものです。
Linterのように、書かれているメソッドをより最適なものに置き換えてくれるものではありません。

https://prettier.io/docs/en/index.html

#導入
Testing Libraryとjest-domのESLintプラグインをインストールします。

```
npm install eslint-plugin-testing-library eslint-plugin-jest-dom
```

設定ファイルを別途作成するので、`package.json`から以下の記述を削除します。

```json
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
```

プロジェクト直下に`.eslintrc.json`を作成して以下の内容を記述します。

pluginsで使用するプラグイン、extendsでプラグインが提供する推奨設定を指定します。
"plugin:jest-dom/recommended"は、jest-domプラグインのrecommended設定という意味です。

```json:.eslintrc.json
{
  "plugins": ["testing-library", "jest-dom"],
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}
```

VSCodeで作成しているプロジェクトにLintのルールを適用するために、プロジェクト直下に.vscodeフォルダを作成し、その中に`settings.json`を作成します。

`"eslint.validate": ["javascript", "javascriptreact"]`と記述することで、`.js` `.jsx`ファイルでLintが実行されるようになり、`editor.codeActionsOnSave`でファイル保存時にコードを修正してくれるようになります。

```json:settings.json
{
  "eslint.options": {
    "configFile": ".eslintrc.json"
  },
  "eslint.validate": ["javascript", "javascriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

VSCodeのESLintの拡張機能をインストールします。
![スクリーンショット 2021-05-30 21.13.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/9f7374d8-9a09-145f-b744-2ed12a8a61b6.png)

VSCodeの下部にあるESLintを押して適用します。
![スクリーンショット 2021-05-30 21.20.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/f6573692-c2fe-2b8f-eae5-612380d4abd1.png)

`App.test.js`を確認すると、Lintが実行されて以下のような表示が出ます。
![スクリーンショット 2021-05-30 21.13.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/b0048ca0-485b-3fb3-e452-bacf11fde13a.png)

ファイルを上書き保存すると該当箇所を自動で修正してくれます。
![スクリーンショット 2021-05-30 21.18.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/7f6f09c1-b89f-12c3-88a0-41575c64f38d.png)

特定のプロジェクトだけではなく、VSCodeで作成するすべてのプロジェクトにLintを適用するにはOSにあわせて以下のフォルダに`settings.json`を配置します。

- Windows %APPDATA%\Code\User\settings.json
- macOS $HOME/Library/Application Support/Code/User/settings.json
- Linux $HOME/.config/Code/User/settings.json

https://code.visualstudio.com/docs/getstarted/settings#:~:text=Depending%20on%20your%20platform%2C%20the,%2FCode%2FUser%2Fsettings

Prettierについても同様に、VSCodeの拡張機能をインストールします。

![スクリーンショット 2021-05-30 21.30.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/15359d26-99d3-dd8b-6f99-aeec3fe6e991.png)

`settings.json`に以下を追記します。

```json
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
```

最後に、余計なファイルがコミットされないように、`.gitignore`に以下を追記します。

```
.vscode
.eslintcache
```

#参考資料

https://www.udemy.com/share/1040ZSCEEZd11VRno=/

https://qiita.com/official-events/b9ad63394fa2635dfca9