😺
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 を使用することで、コードの一貫性を保ち、可読性を向上させることができます。
Discussion