VSCode + Prettier + ESLint かんたん設定

# はじめに

前回の記事 [React + TypeScript + Webpackで開発環境セットアップ](https://qiita.com/hawaiiantime/items/40007145fcf7565d4eac) に続き、プロジェクトにコードフォーマットと静的解析を導入していきます。🤖

プロジェクトファイルは[こちら](https://github.com/hawaiiantime/react-template/tree/topic/lint_and_format)で公開中💁‍♂️
・説明に沿って導入を試したい場合はこのブランチ:`topic/basic_template`
・完成版を確認してみたい場合はこのブランチ:`topic/lint_and_format`

# プラグイン

まずは、VSCodeにプラグインをインストールしましょう。
・[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
・[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

# Prettier

```terminal
$ yarn add -D prettier
```

設定ファイルを作成。

```json:.prettierrc.json
{
  "arrowParens": "always",
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": true,
  "printWidth": 120
}
```

VSCodeの設定から、保存時にフォーマットをオンにする。
<img width="680" alt="Screen Shot 2020-03-15 at 20.04.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32359/8d5c69ec-2064-9257-3015-1fc0189f59d2.png">
`src/index.tsx`を開いて保存すると、フォーマットされましたね！

# ESLint

```terminal
$ yarn add -D eslint
$ yarn eslint --init
```

自分はこんな設定にしてみました。
<img width="733" alt="Screen Shot 2020-03-15 at 10.52.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32359/e9a80f6b-78a5-6d20-53cd-41b360ad6a99.png">

自分は`yarn`を使っているので、自動生成された`package-lock.json`は不要なので削除し、パッケージを改めてインストール。ちなみに`eslint --init`における`yarn`サポートが無い理由については、[このあたり](https://github.com/eslint/eslint/pull/9023)を読むとわかります。

```terminal
$ rm package-lock.json
$ yarn install
```

`src/index.tsx`でさっそくエラーが出ていますね。
<img width="533" alt="Screen Shot 2020-03-15 at 11.12.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32359/7c512c26-2e4c-09ef-c25e-bcc017a81d82.png">

`.tsx`でも`JSX`の記述を許可する為、設定ファイルの`rules`に以下を追記。

```json:.eslintrc.json
{
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }]
  }
}
```

もうひとつ、`webpack.config.js`にエラーが出ています。
どうやら`Prettier`のルールとバッティングしているので、`eslint`側のフォーマット関連ルールを`eslint-config-prettier`で無効にしましょう。

```terminal
$ yarn add -D eslint-config-prettier
```

`extends`の最後に`prettier`を追記すると、エラーが消えました。

```json:.eslintrc.json
{
  "extends": ["plugin:react/recommended", "airbnb", "prettier"]
}
```

# コマンド追加

`lint`コマンドを追加しておきます。

```package.json
"scripts": {
  "lint": "eslint '**/*.{js,ts,tsx}'"
}
```

# Lint時にコードフォーマットもチェック

試しに、VSCodeの"Format On Save"を無効にした後、`src/index.tsx`の4行目末尾のセミコロンを削除してみる。
<img width="364" alt="Screen Shot 2020-03-15 at 20.39.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32359/ce2cebc0-0fe1-56af-7b7f-5436e9f8aa78.png">

あら、lintを実行しても通ってしまいました。

```terminal
$ yarn lint
```

Prettierによるフォーマット関連のチェックもlintと同時にチェックしたいですね、ということで`eslint-plugin-prettier`を導入。

```terminal
$ yarn add -D eslint-plugin-prettier
```

`extends`の`prettier`を以下のように変更

```json:.eslintrc.json
{
  "extends": ["plugin:react/recommended", "airbnb", "plugin:prettier/recommended"]
}
```

再度`yarn lint`すると、エラーが検知されるようになりました！🕵🏻‍♂️

# コミットのタイミングでLint実行

ついでに、コミット直前に自動で`lint`するようにしておきます。

```terminal
$ yarn add -D husky
$ touch .huskyrc.json
```

設定ファイルには以下のように記述。

```json:.huskyrc.json
{
  "hooks": {
    "pre-commit": "yarn lint"
  }
}
```

`git commit`時に`yarn lint`が実行されるようになりました。ナイスです👍

# まとめ

今回は`React`&`TypeScript`なプロジェクトに導入する手順でしたが、基本的に`eslint --init`時の質問に答えていけば、自動で必要なパッケージがインストールされるので楽です。あとは、必要に応じてルールを追記/変更していけば良いですね！