Companion Tools: ReactプロジェクトにおけるESLintとPrettierの統合

Reactプロジェクトにおいて、ESLintとPrettierを統合することでコード品質を保ち、スタイルを一貫させることができます。これにより、エラーの早期発見や保守性の向上が可能になります。

ESLintとPrettierとは何か

ESLintはJavaScriptコードのエラーチェックやスタイルルールを適用するためのリントツールです。Prettierはコードフォーマッターで、コードの書式を自動的に整えることができます。

ESLintとPrettierをインストール

プロジェクトディレクトリで以下のコマンドを実行し、ESLintとPrettierをインストールします。

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

ESLintの設定ファイルを作成

`.eslintrc.json`ファイルを作成し、以下のように設定します。

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

Prettierの設定ファイルを作成

`prettier.config.js`ファイルを作成し、以下のように設定します。

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 80,
};

ESLintとPrettierの競合を防ぐ

`eslint-config-prettier`を利用することで、ESLintとPrettierのルールが競合しないようにします。

VSCodeでESLintとPrettierを統合

VSCodeの拡張機能マーケットプレイスからESLintとPrettierをインストールし、設定ファイルを以下のようにします。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.alwaysShowStatus": true
}

ESLintとPrettierをスクリプトに追加

`package.json`に以下のスクリプトを追加します。

{
  "scripts": {
    "lint": "eslint src/**/*.{js,jsx}",
    "format": "prettier --write src/**/*.{js,jsx}"
  }
}

プロジェクトのコードをリント・フォーマット

以下のコマンドでプロジェクト全体のコードをリントおよびフォーマットします。

npm run lint
npm run format

Pre-commitフックで自動適用

Huskyを使用して、コミット時に自動的にESLintとPrettierを実行するように設定します。

npm install --save-dev husky lint-staged

HuskyとLint-Stagedの設定

`package.json`に以下を追加します。

{
  "lint-staged": {
    "*.{js,jsx}": ["eslint --fix", "prettier --write"]
  }
}

エディタでリアルタイムエラーチェック

VSCodeのエディタ上でESLintのエラーチェックをリアルタイムで表示する設定を有効にします。

CI/CDでESLintとPrettierを適用

GitHub ActionsやJenkinsを使用して、CI/CDパイプラインでESLintとPrettierを実行します。

- name: Run ESLint
  run: npm run lint

- name: Run Prettier
  run: npm run format

共通設定ファイルの作成

複数のプロジェクトで共通のESLintとPrettier設定を使用する場合、設定ファイルを共有リポジトリに保存して再利用します。

ルールのカスタマイズ

必要に応じてESLintやPrettierのルールをプロジェクトの要件に合わせてカスタマイズします。

まとめ

ESLintとPrettierをReactプロジェクトに統合することで、コード品質と一貫性が向上し、開発者がより効率的に作業できる環境を構築できます。設定ファイルを適切に管理し、CI/CDで自動化することで、より効果的に運用できます。