Vite + ReactプロジェクトをESLint、Prettierでしっかりめに運用してみた

## はじめに
[こちら](https://qiita.com/futaro0405/items/d8042854e6ab201845cc)の記事でVite + Reactのプロジェクト構築をしました。
この時点でViteはESlintの環境をそれとなく組み込んでくれています。
せっかくなのでESlintをしっかり整備して、ついでにPrettierも組み込んできれいに運用できるようにしたいと思います。

## ESLintを設定する
Viteは`npm create vite`を実行してプロジェクトを作成した時点でESlintをある程度設定してくれています。
準備されたものを更新してカスタマイズしていくのがお手軽ですが、0から導入したい場合は、`npm init @eslint/config`からeslintをインストールしてください。今回は割愛します。

設定したい人は[eslint公式](https://eslint.org/docs/latest/use/getting-started)を確認してください。

### `.eslintrc.cjs`ファイルを修正
eslintの設定ファイルを修正します。

修正前のファイルの内容はこちら。

```.eslintrc.cjs
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}
```

extendsとpluginsはよく使われるeslintの設定を継承する設定が書かれています。
ですので、ある程度の設定はすでに設定済みです。ここに必要な設定を追加していきます。

```diff_javascript:.eslintrc.cjs
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
+   'react/prop-types': 'off',
+   'react/no-unknown-property': [
+     "error",
+     { "ignore": ["css"] }
+   ],
+   'no-var': 'error',
+   'no-console': 'warn',
+   'camelcase': 'warn',
+ },
}

```

今回追加したルールの説明は以下です。皆さんで調べて自分好みのルールを設定してみてください。

#### react/prop-types
受け渡すpropsが適切に定義されているかチェックするルールですが、何かと不都合があるためoffにします。
こちらを参考にして設定しました。気になる方は目を通してみてください。

https://cpoint-lab.co.jp/article/202107/20531/
https://zenn.dev/nekoninaritai/articles/6a85b92182ed74

```
    'react/prop-types': 'off',
```

#### react/no-unknown-property
私はemotionでstyleをつけているのでこちらで`css`プロパティで出てしまうエラーを無効にしています。

```
    'react/no-unknown-property': [
      "error",
      { "ignore": ["css"] }
    ],
```

#### no-var
非推奨となっている`var`での変数宣言をerrorにします。

```
    'no-var': 'error',
```

#### no-console
debugように記載した`console.log`を消し忘れないように`warn`にしています。

```
    'no-console': 'warn',
```

#### camelcase
変数名がキャメルケースで宣言されているかチェックする。

```
    'camelcase': 'warn',
```

## Prettierを導入する
### 1.Prettierをインストール
こちらのコマンドでプロジェクト内にPrettierをインストールします。
個人的にインストールされるライブラリはバージョンを確定させておきたいので`--save-exact`を指定します。

```
npm install --save-dev --save-exact prettier
```

### 2. eslint-config-prettierをインストール
eslint-config-prettierは、eslintとprettierで競合する設定をeslint側でoffにしてくれるものです。

```
npm install --save-dev --save-exact eslint-config-prettier
```

### 3. .eslintrc.cjsファイルを修正
`.eslintrc.cjs`に先ほど追加した`eslint-config-prettier`の追記をします。
extendsに以下のように追加してください。
extendsは`eslint-config-`を省略して記載で来るため、`prettier`のみで問題ないです。

```.eslintrc.cjs
extends: [
  'eslint:recommended',
  'plugin:react/recommended',
  'plugin:react/jsx-runtime',
  'plugin:react-hooks/recommended',
  'prettier'
],
```

### 4. `.pretierrc`ファイルを作成
Prettierの設定ファイルを作成します。
ここでどのように整形するか決めることができます。
設定はお好みでどうぞ。私は以下のように設定しました。

```.pretierrc
{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "useTabs": false
}
```

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

### 5. `.prettierignore`ファイルを作成
Prettierを使用したくないファイルを指定します。
今回はbuildで生成されたフォルダ内とリセットCSSなどが格納されているassetsフォルダ内を除外します。
わかりやすいようにデフォルトの設定も記載していますがこの部分はなくても同じように動作します。

```.prettierignore
# default:
**/.git
**/.svn
**/.hg
**/node_modules

# Ignore artifacts:
build
dist

# Ignore assets folder:
src/assets/*
```

これでPrettierの設定は完了です。

## `package.json`を修正
導入したeslintとPrettierを`package.json`に記入して使いやすいようにします。
package.jsonのscriptに追記します。

```diff_json:package.json
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
-   "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+   "lint": "eslint src/ --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+   "lint:fix": "eslint src/ --fix --ext .js,.jsx",
+   "format": "prettier --write \"src/**/*.{js,jsx,json,css,scss}\""
  },
```

`npm run lint`でeslintがsrcフォルダ内をチェックしてくれます。
`npm run lint:fix`でeslintが修正できるエラーを自動で修正してくれます。
`npm run format`でprettierがsrcフォルダ内のjs,jsx,json,css,scssファイルを整形してくれます。

`npm run lint:fix`で整形してくれるエラーの内容は公式サイトのスパナマークのものが該当します。
https://eslint.org/docs/latest/rules/


## vscodeの拡張機能を有効にする
eslintとprettierの拡張機能をインストールします。
拡張機能をインストールしなくてもCLIから実行することで動作してくれますが、ファイルを保存したときに自動整形してくれたりいろいろと便利なので入れておきます。

### 1. eslint、prettierの拡張機能をインストール
eslint、prettierの拡張機能をインストールします。
インストールが完了していれば、eslintはエラーを赤く表示してくれます。
prettierはコマンドパレット（ctrl+shift+p）で「ドキュメントのフォーマット」が選択できるようになっています。

### 2-1. チーム開発用にプロジェクトごとに拡張機能の設定を共有する
ここは個人開発の場合は不要ですので飛ばして構いません。
チームで共通の開発環境を整えるために拡張機能の情報をプロジェクトに残しておきます。

eslint、prettierの拡張機能のインストール横の歯車から「ワークスペースの推奨事項に追加する」を選択します。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355772/1438643c-b568-0ca9-ab32-ee98e343f848.png)

`.vscode/extensions.json`ファイルが作成され、拡張機能の情報が保存されます。

```.vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}
```

新メンバーがこのプロジェクトをクローンした際に、拡張機能のインストールを進めるダイアログが表示されます。

### 2-2. プロジェクト共通の`settings.json`を設定
`.vscode/settings.json`フォルダを作成します。
ここにプロジェクト固有のsettings.jsonを記入します。
eslintとprettierの設定を記載しておきます。

```.vscode/settings.json
{
  // prettier:ファイル保存時に自動フォーマット
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[scss]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  // eslint
  "eslint.options": {
    "overrideConfigFile": ".eslintrc.cjs",
  }
}

```

これでPrettierとeslintの設定はおしまいです。
happy Hacking!