.gitとpackage.jsonが同じディレクトリにない時のESLint+Prettier+husky+lint-staged導入

🧠なぜ書いたか

• 私と同じように沼る人が必ずいるから
• これ以外のやり方を知りたいから（教えてください）
• 何回もするようなことではないので忘れないように備忘録代わり

💻環境

• Next.js - 14.0.3
• node - 20.9.0
  下記のように.gitとpackage.jsonが同じディレクトリにないリポジトリ

|--.git/
|--...
|--...
└──next/
    |--.../
    └──package.json

🔥本題

⓪nodeのバージョン確認　

^18.18.0、^20.9.0、または>=21.1.0ならオッケー

①ESLintのインストール

⏬️実行して自分の環境に合わせて質問に答えてく

npm init @eslint/config@latest

⏬️動くか確認したかったら

npm run lint 

②Prettierのインストール

⏬️実行すると何か言われた気がする

npm install --save-dev --save-exact prettier

⏬️空の設定ファイルと.prettierignoreファイル作成

node --eval "fs.writeFileSync('.prettierrc','{}\n')"
node --eval "fs.writeFileSync('.prettierignore','#Ignore artifacts:\nbuild\ncoverage\n')"

⏬️動くか確認したかったら

npx prettier . --check　//prettierを実行できてるか確認できる
npx prettier . --write  //実行できちゃう（カスタムルール決めてからにしよう）

③ESLintとPrettierの連携

⏬️eslint-config-prettierをインストール

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

⏬️eslint.config.~~ファイルに追記する

import eslintConfigPrettier from "eslint-config-prettier";

export default [
  eslintConfigPrettier,
];

④huskyとlint-stagedインストール

⏬️lint-stagedをインストール

npm install --save-dev husky lint-staged

⏬️huskyを^8でインストール（👈🏻突っ込まないで&&^9で出来る方法教えてください）

npm i -D husky@^8
npx husky init

⏬️.gitないよ〜〜〜と言われますが無視して、 package.jsonを書き換える

"scripts": {
    "prepare": "husky install"
  },

// この部分をを下のように

 "scripts": {
    "prepare": "cd .. && husky install next/.husky" // next/はディレクトリ構成に合わせる
  },

npm installが実行された後にprepareスクリプトが自動で走り、カレントディレクトリ(next/)から一つ上(.git/があるとこ)に移動してからhuskyのGithooksをnext/.huskyディレクトリにセットアップする

⏬️てことでnpm install!!!!

npm i

⏬️作成されたnext/.husky/pre-commitファイルに記述

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

npx lint-staged

⏬️package.jsonに追記する

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

ESLint のフォーマットルール（Prettier と重複する部分）を無効化し、Prettier が最終的なコード整形を担当する

⑤動作確認

適当にコミットしてみる
できたら好みにカスタマイズ〜〜〜〜🙌🏽

⭐️最後に

沼ったおかげで公式ドキュメントめちゃくちゃ読めたのは良かった！！！！

• これ以外のやり方
• 最新バージョンでのやり方

誰か教えてください、今の私に色々試す気力は残ってません

👼🏻私を沼から救ってくれたもの

Prettier公式doc
ESLint公式doc
eslint-config-prettier
.git と package.json が同一ディレクトリにいないプロジェクトで husky をつかう