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

はじめに

こちらの記事でVite + Reactのプロジェクト構築をしました。
この時点でViteはESlintの環境をそれとなく組み込んでくれています。
せっかくなのでESlintをしっかり整備して、ついでにPrettierも組み込んできれいに運用できるようにしたいと思います。

ESLintを設定する

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

設定したい人はeslint公式を確認してください。

.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の設定を継承する設定が書かれています。
ですので、ある程度の設定はすでに設定済みです。ここに必要な設定を追加していきます。

.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
}

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に追記します。

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の拡張機能のインストール横の歯車から「ワークスペースの推奨事項に追加する」を選択します。

.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!