ESLintとPrettierを一緒に使う理由は何ですか？

ESLintはコードのエラーやスタイルの違反を検出し、Prettierはコードのフォーマットを自動的に統一します。これにより、コードの品質を保ちながら一貫したスタイルを維持し、開発効率を向上させます。

PrettierとESLintの設定方法は？

PrettierとESLintを組み合わせるには、ESLintでPrettierの設定を拡張し、必要なパッケージをインストールします。設定ファイルに両方のルールを追加して、保存時に自動的にフォーマットを適用します。

ESLintとPrettierの競合はどのように解決しますか？

ESLintのルールとPrettierのフォーマット設定が競合する場合は、eslint-config-prettierを使用してESLintのフォーマットルールを無効化し、Prettierのフォーマットが優先されるようにします。

【Next.js】ESLint/Prettierの最適な設定 - コード品質とフォーマットを自動化

概要

Next.jsの開発において、ESLintとPrettierを併用することで、コードの品質とフォーマットを自動化し、効率的な開発環境を構築できます。ESLintはコードのエラーチェックやスタイルルールを提供し、Prettierは自動的にコードをフォーマットするツールです。本記事では、Next.jsプロジェクトでのESLintとPrettierの最適な設定方法を紹介します。

PrettierとESLintの違い

ESLint: JavaScriptやTypeScriptコードのエラーチェックを行い、スタイルルールを強制します。たとえば、変数名やコーディングスタイルに関するエラーを事前に検出できます。
Prettier: コードのフォーマットを一貫したスタイルで自動的に行います。特に、複数の開発者が関わるプロジェクトでは、コードスタイルの乱れを防ぎ、レビューがスムーズになります。

ESLintとPrettierのセットアップ

Step 1: 必要なパッケージをインストール

まず、ESLintとPrettierの両方をインストールします。

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

このコマンドで、ESLintとPrettier、および両者を統合するためのプラグインをインストールします。

Step 2: `.eslintrc.json`の設定

次に、プロジェクトのルートディレクトリに.eslintrc.jsonファイルを作成し、以下の設定を追加します。

{
  "extends": [
    "next/core-web-vitals", 
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "no-console": "warn"
  }
}

ここで、"prettier/prettier": "error"と設定することで、Prettierのフォーマットに違反する場合はESLintがエラーとして通知します。また、next/core-web-vitalsを拡張することで、Next.jsのベストプラクティスに基づいたルールが自動適用されます。

Step 3: Prettierの設定

.prettierrcファイルを作成し、次のようにフォーマットルールを設定します。

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2
}

この設定により、コードはシングルクォートで統一され、末尾のカンマやインデント幅なども一貫したスタイルが保たれます。

VSCodeでの自動フォーマット

VSCodeを使用している場合、保存時にコードを自動フォーマットするように設定できます。settings.jsonに以下を追加し、保存時にPrettierが自動的に動作するようにします。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

この設定により、ファイルを保存するたびにESLintとPrettierが自動で適用され、コードが自動的に整形されます。

HuskyとLint-stagedの導入

さらに、コードコミット前に自動でESLintとPrettierを実行するためにHuskyとLint-stagedを使うと便利です。

npm install --save-dev husky lint-staged

package.jsonに以下の設定を追加します。

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.js": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.ts": [
    "eslint --fix",
    "prettier --write"
  ]
}

この設定により、コードがコミットされる前にESLintとPrettierが自動で実行され、品質の高いコードが保たれます。

まとめ

ESLintとPrettierを組み合わせることで、Next.jsの開発環境におけるコード品質とフォーマットの一貫性を確保できます。これらのツールを適切に設定することで、コードのエラーチェックとスタイル統一が自動化され、開発スピードが向上します。VSCodeとの連携や、Huskyを用いたコミット前のチェックも活用して、さらに効率的なワークフローを構築しましょう。

概要