第265章：Lint ルールのカスタマイズ
この章では、Biome の Lint（コードの注意・バグっぽい所を見つけるやつ） を「プロジェクトに合う性格」に調整していくよ〜！🧩💡 React 開発だと「ここは厳しめにしたい」「ここはゆるくしたい」が絶対出るので、カスタマイズできるとめちゃ安心😌🫶
1) まずは全体像：どこで何を設定するの？🗺️
Biome のルール設定は、基本 biome.json / biome.jsonc の linter.rules に書くよ✍️
ルールは「グループ（カテゴリ）」に分かれてて、代表的にはこんな感じ👇（a11y / correctness / style / suspicious…など）(Biome)
- ✅ recommended：おすすめセット（デフォルトで有効）(Biome)
- 🎛️ グループ単位で ON/OFF や severity（warn/error など）を一括調整
- 🎯 ルール単体で severity（warn/error/off など）や options を指定
- 🧷 overrides で「特定フォルダ・特定拡張子だけ」設定を変える（超重要！）(Biome)
図にするとこんな流れだよ👇
2) ルールの「強さ（severity）」を知ろう🔥➡️🧊
グループ（例：a11y）は 文字列で severity を一括指定できるよ！
使える値は on/off/info/warn/error など。on は「ルール本来のデフォルト強さで出してね」って意味✨(Biome)
たとえば「アクセシビリティ系は今は軽めに info で見たいな〜」ならこう👇
{
"linter": {
"enabled": true,
"rules": {
"a11y": "info"
}
}
}
3) “おすすめセット” を軸にして、必要なルールだけ追加する🥗➕🍖
✅ デフォルトは recommended が ON
linter.rules.recommended はデフォルト true（おすすめルールが有効）だよ(Biome)
ここを軸にして、「おすすめに入ってないけど欲しい」ルールを足していくのが超やりやすい🧠✨
4) 実践①：console を禁止したい（でも error/warn は許したい）🧯🪵
フロントって、つい console.log() 置きがちだよね😂
Biome には noConsole があって、これは おすすめではないので自分で有効化が必要だよ〜(Biome)
4-1) まずは “禁止（error）” にする🚫
{
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"suspicious": {
"noConsole": "error"
}
}
}
}
4-2) でも console.error とかは許したい🙆♀️
noConsole は options で「許可するメソッド」を指定できるよ🧰✨(Biome)
{
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"suspicious": {
"noConsole": {
"level": "error",
"options": {
"allow": ["assert", "error", "info", "warn"]
}
}
}
}
}
}
これで
console.logは怒られるけど、console.errorはOKにできるよ🙂↕️✨
5) 実践②：未使用の引数は “error” に格上げしたい（チームで厳しめ）👀⚡
Biome のルールページには「どう設定するか」の例が載ってることが多いよ！
たとえば noUnusedFunctionParameters はこうやって correctness グループに書くのが基本形👇(Biome)
{
"linter": {
"rules": {
"correctness": {
"noUnusedFunctionParameters": "error"
}
}
}
}
ちなみにこのルール、「使わない引数は
_で始めるとOK」みたいな逃げ道も用意されてるのが優しい🥹🫶(Biome)
6) 実践③：React Hooks の依存配列チェックを “自分のカスタムフック” にも効かせたい🪝✨
useEffect の依存配列をチェックしてくれる useExhaustiveDependencies は、カスタムフックにも対応できるよ！
設定例（hooks 配列で「どの引数が closure / deps か」を指定）👇(Biome)
{
"linter": {
"rules": {
"correctness": {
"useExhaustiveDependencies": {
"options": {
"hooks": [
{ "name": "useLocation", "closureIndex": 0, "dependenciesIndex": 1 },
{ "name": "useQuery", "closureIndex": 2, "dependenciesIndex": 0 }
]
}
}
}
}
}
}
「うちのプロジェクトのフックにもちゃんとチェック効かせたい！」ってとき超便利🥰🧠
7) overrides：テストファイルだけ “ゆるく” したい（あるある）🧪🍡
テストって console.log でデバッグしたくなったり、any 的な妥協が出たり…あるよね😂
そんなときは overrides が最強！
上に書いた基本設定を、特定パスだけ上書きできるよ。さらに 順番が超大事で、最初にマッチしたものだけが使われるよ🧷(Biome)
例：**/*.test.tsx と **/*.spec.tsx だけ noConsole を OFF にする👇
{
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"suspicious": {
"noConsole": "error"
}
}
},
"overrides": [
{
"includes": ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"],
"linter": {
"rules": {
"suspicious": {
"noConsole": "off"
}
}
}
}
]
}
8) “この1行だけ黙ってて！”（最終手段）🤫🩹
「分かってるけど今回は意図的！」って時は、抑制コメント（suppression）も使えるよ。
useExhaustiveDependencies の例だと、こんな biome-ignore があるよね👇(Biome)
// biome-ignore lint/correctness/useExhaustiveDependencies(a): suppress dependency a
useEffect(() => {
console.log(a);
}, []);
⚠️ ただし、依存配列の抑制はバグりやすいから「コードで直せるなら直す」が基本だよ〜😖💦(Biome)
9) ルールの探し方：困ったら biome explain 🧠🔍
「このルール何？」「デフォルト強さは？」ってなったら、CLI の biome explain が便利！
Biome の設定ドキュメントでも explain コマンドが案内されてるよ🧾✨(Biome)
biome explain noDebugger
10) ミニ演習（10〜15分）⏱️🎀
演習A：console ルールを入れてみよう🧯
noConsoleを error で有効化（console.logが怒られる）- options で
error/warn/infoだけ許可してみる（console.errorはOK）
（設定の形はこの章の例そのままでOK🙆♀️）(Biome)
演習B：テストだけ console OK にしよう🧪
overridesで**/*.test.tsxだけnoConsole: offにしてみる （「最初にマッチした overrides だけが使われる」も意識！）(Biome)
演習C：biome lint を “一部だけ” 走らせて動作確認しよう🏃♀️
CLI には lint コマンドがあって、対象を絞れるオプションもあるよ（--only など）(Biome)
※細かい使い方は次章以降でさらに活躍するよ〜！
まとめ🎉✨
- まずは recommended を軸にして、必要なルールだけ足すのがラク🧠
- ルール単体は
group: { ruleName: "warn" }みたいに書く🧩(Biome) - overrides で「テストだけ」「特定フォルダだけ」ゆるくできる（順番大事！）🧷(Biome)
- 困ったら
biome explainで調べる🔍(Biome)
次の **第266章（CI/CD への組み込み）**では、このルールたちを GitHub Actions などで自動チェックして「通らないとマージできない」みたいにしていくよ〜💪😺