【Next15】ESLintとPrettierの設定方法（忘備録）

こんにちは！
これは、私がプロジェクトでESLintとPrettierを設定したときの備忘録です。コードの見た目を整えるのに役立つので、もしよかったら参考にしてみてください。
私が調べた時にPrettier周りが意外とあまり記事がなかったため、Nextのドキュメントを参考にしつつ、忘備録として書いてみました。

🛠️ まずはパッケージのインストール

ESLintとPrettierを使い始めるために、まず必要なパッケージをインストールしました。

npm i -D eslint prettier eslint-config-prettier

---

📝 ESLintの設定ファイル

ESLintの設定ファイルとして、eslint.config.mjsを作成しました。Next.jsプロジェクトだったので、以下のような内容にしました。

// eslint.config.mjs
import { dirname } from "path"
import { fileURLToPath } from "url"
import { FlatCompat } from "@eslint/eslintrc"

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const compat = new FlatCompat({
  baseDirectory: __dirname,
})

const eslintConfig = [
  ...compat.extends(
    "next/core-web-vitals",
    "next/typescript",
    "prettier",
  ),
]

export default eslintConfig

ここでポイントだったのは、"prettier"を追加して、ESLintとPrettierがうまく連携するようにしたことです。

---

💅 Prettierの設定ファイル

コードの自動整形にはPrettierを使いました。prettier.config.mjsというファイルに、私の好みのルールを設定しました。
ここは適当に各々設定して下さいね。

// prettier.config.mjs
const config = {
  printWidth: 60,
  tabWidth: 2,
  semi: false,
  singleQuote: false,
}

export default config

私は1行の文字数を60文字にしたり、セミコロンなし、ダブルクォーテーションを使う設定にしてみました。この辺は好みで変えるところですね。

---

⚙️ package.jsonのスクリプト

最後に、package.jsonにいくつか便利なスクリプトを追加しました。これでコマンド一つでコードのチェックや整形ができるようになりました。

// package.json (一部抜粋)
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "format": "prettier 'src/**/*.{js,jsx,ts,tsx,json}' --check",
    "format:fix": "prettier 'src/**/*.{js,jsx,ts,tsx,json}' --write",
    "check": "npm run format && npm run lint",
    "fix": "npm run format:fix && npm run lint:fix"
  },

これで、例えばnpm run fixを実行するだけで、コードの整形と修正がまとめてできるようになりました。すごく便利です。

---

🎉 終わりに

これが、私がESLintとPrettierを設定したときの簡単な記録です。もし誰かの役に立つことがあれば嬉しいですが、基本的には自分用のメモですね。

---