Next.jsのESLint+Prettier+ Huskyテンプレート

はじめに

Next.jsは、Reactアプリケーションの開発を簡素化するフレームワークです。ESLintとPrettierは、コードのエラーを識別し、フォーマットを整えるのに役立ちます。Huskyを使用すると、Gitのコミットフックを利用してコードの品質を自動的に管理できます。サンプルコードはこちらです。

手順

1. Next.jsとTypeScriptの環境構築

まず、新しいNext.jsプロジェクトを作成します。

$ npx create-next-app my-next-app
$ cd my-next-app

2. Visual Studio Codeの設定

.vscodeディレクトリの作成

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

• extensions.json

  {
    "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
  }
  

• settings.json

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

3. ESLintとPrettierの設定

TypeScript用のESLintプラグインとPrettier関連のパッケージをインストールします。

npm install @typescript-eslint/eslint-plugin --save-dev
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

.eslintrc.jsonの設定

プロジェクトのルートに.eslintrc.jsonファイルを作成し、ESLintの設定を記述します。

{
    "plugins": ["@typescript-eslint"],
    "extends": [
      "next/core-web-vitals",
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier"
    ],
    "rules": {
      "no-console": "warn"
    }
}

.prettierrc.jsonの設定

Prettierの設定ファイル.prettierrc.jsonをプロジェクトルートに作成します。

{
    "semi": true,
    "trailingComma": "es5",
    "singleQuote": false,
    "jsxSingleQuote": false,
    "tabWidth": 2,
    "useTabs": false
}

設定ファイルはチームや個人ごとに適切なものを設定してください。

4. Huskyの設定

Huskyとlint-stagedをインストールして、コミット前に自動的にリントとフォーマットを実行できるようにします。

npm install husky lint-staged --save-dev

package.jsonの設定

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

• scriptsにprepareを追加：

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prepare": "husky install"
  }
  

• lint-stagedの設定を追加：

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

.husky/pre-commitの設定

Huskyを初期化するために、次のコマンドを実行します。

npm run prepare
or
npx husky install

npx husky add .husky/pre-commit "npx lint-staged"

.husky/pre-commitフックを作成し、以下のコマンドを追加します。

npx lint-staged→node_modules/.bin/lint-stagedに変更する

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

node_modules/.bin/lint-staged

これで、Next.jsプロジェクトにESLint、Prettier、およびHuskyの統合が完了しました。これにより、コードの整合性が保たれ、開発プロセスがスムーズになります。