Next.js周りのセットアップ ~フォーマッター完備~

今回扱う技術

• Next.js
• TypeScript
• ESLint
• Prettier
• Prisma
• NextAuth
• TailWindCSS

Prettierセットアップ編

今回は、Next.js プロジェクトで Prettier を使用してコード整形を行う方法について解説します。以下の手順に従ってセットアップを行います。

1. Prettier のインストール

まず、Prettier をインストールします。プロジェクトのルートディレクトリで以下のコマンドを実行してください。

npm install prettier

2. Prettier の設定ファイルを作成

次に、プロジェクトのルートディレクトリに .prettierrc ファイルを作成し、以下の内容を追加します。これにより、Prettier の設定をカスタマイズできます。

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2
}

3. プラグインのインストールと設定

Prettier プラグインを使用して、インポート順序を整理します。まず、必要なプラグインをインストールします。

npm install @ianvs/prettier-plugin-sort-imports

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

module.exports = {
  importOrder: [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "^(react-icons/(.*)$)|^(react-icons$)",
    "",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@local/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "",
    "^@/utils/(.*)$",
    "",
    "^@/components/(.*)$",
    "",
    "^@/styles/(.*)$",
    "",
    "^[./]",
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderBuiltinModulesToTop: true,
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  importOrderMergeDuplicateImports: true,
  importOrderCombineTypeAndValueImports: true,
  plugins: ["@ianvs/prettier-plugin-sort-imports"],
};

4. スクリプトの追加

package.json ファイルに Prettier を実行するスクリプトを追加します。これにより、コマンド一つでコードを整形できます。

"scripts": {
  "prettier": "prettier --write ."
}

5. 実行

最後に、以下のコマンドを実行してプロジェクト全体のコードを整形します。

npm run prettier

これで、Next.js プロジェクトに Prettier がセットアップされ、コード整形ができるようになりました。Prettier を使用することで、コードの一貫性を保ち、可読性を向上させることができます。