Skip to content

linter/formatter を eslint + prettier から biome に統一 - #63

Merged
kira924age merged 2 commits into
developfrom
feature/biome-migration
Aug 10, 2026
Merged

kira924age merged 2 commits into
developfrom
feature/biome-migration

Conversation

@kira924age

@kira924age kira924age commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

概要

CustomExitScreen だけが biome を使っていたため、残り10テンプレートも biome に統一しました。これでリポジトリ全体が単一のツールチェーンになります。

#62(Vite 移行)の後続作業です。

変更内容

  • devDependencies から eslint / eslint-config-prettier / eslint-plugin-react / @typescript-eslint/* / prettier / npm-run-all を削除し、@biomejs/biome 2.3.13 を追加
  • .eslintrc.json を削除
  • lint スクリプト6本を CustomExitScreen と同じ2本に集約
"lint:tsc":   "tsc --noEmit",
"lint:biome": "biome check src",
"lint":       "npm run lint:tsc && npm run lint:biome",
"lint-fix":   "biome check --write src",

差分の大半は biome フォーマッタによるタブインデントへの再整形です(CustomExitScreen に合わせています)。

biome の指摘への対応

biome の推奨ルールは従来の eslint 設定より広く、66件の指摘が出ました。機械的で意味を変えないものはこのPRで修正しています。

  • 未使用の import / 関数引数を削除jsx: react-jsx 配下では import React は不要です。従来の eslint 設定は react-in-jsx-scope により逆に必須としていました
  • 31箇所の <button>type="button" を付与 — うち CustomProfileModal の3つは onSubmit の無い <form> の内側にあり、クリックするとフォーム送信が走ってページがリロードされる既存バグでした。これも同時に解消しています
  • useOptionalChain / useTemplate / noBannedTypes の修正を適用
  • OverlayModal の無意味な @ts-ignore 2箇所を削除 — biome が @ts-expect-error に書き換えた結果、何も抑制していないため tsc が TS2578 で落ちました。eslint も以前から同じ指摘をしていた箇所です

残る36件はプロダクト側の判断が必要なもの(svg/iframe/label のアクセシブル名、hook の依存配列、リストの安定キー)なので、biome.json で該当ルールを warn に落としました。npm run lint の出力には残り続けるので可視性は保ちつつ、別途対応できます。

{
  "linter": {
    "rules": {
      "recommended": true,
      "a11y": { "noSvgWithoutTitle": "warn", ... },
      "correctness": { "useExhaustiveDependencies": "warn" },
      "suspicious": { "noArrayIndexKey": "warn" }
    }
  }
}

同じ biome.json を CustomExitScreen にも置いて11プラグインで統一しています。あわせて CustomExitScreen に元々あったフォーマット違反(develop 時点で npm run lint が失敗していました)も整形しました。

動作確認

全11プラグインで build ✅ / test ✅ / lint:biome ✅。

lint:tsc は CustomChatButton / CustomEntryPanel / CustomProfileModal の3つが失敗しますが、いずれもデモ用 src/App.tsx が必須 props を渡していない既存のエラーで、今回の変更対象外です(内容は #62 のときと同一であることを確認済み)。

AdditionalToolbarButton はブラウザで実際にモーダルの開閉まで確認し、CSS Modules のクラス適用と type="button" の付与を検証しました。

レビュー時の注意

biome は SCSS をサポートしていません(決定事項)。

biome 2.3.13 に .scss を渡すと These paths were provided but ignored として無視されます(エラーにもなりません)。.css は対応しています。prettier は src/**/*.{js,jsx,ts,tsx,css,scss} を対象にしていたため、35ファイルの .scss は今回からフォーマット対象外になります。CustomExitScreen が素の .css を使っているため、既存構成ではこのギャップが表面化していませんでした。

prettier を .scss 限定で残す案も検討しましたが、ツールチェーンを biome 1本に統一することを優先して見送っています。SCSS のフォーマットが必要になった場合は、後から lint:prettier.scss スコープで追加できます。

🤖 Generated with Claude Code

kira924age and others added 2 commits August 10, 2026 16:49
CustomExitScreen already used biome; this brings the other ten
templates onto it so the whole repo shares one toolchain. Removes
eslint, its plugins, prettier and npm-run-all, drops .eslintrc.json,
and replaces the six lint scripts with the CustomExitScreen pair
(lint:biome / lint-fix).

Most of the diff is biome's formatter reindenting to tabs, matching
CustomExitScreen.

Biome's recommended rules are broader than the previous eslint config,
so 66 findings surfaced. The mechanical, semantics-preserving ones are
fixed here:

- Removed unused imports and function parameters. `import React` is no
  longer needed under jsx: react-jsx; the old eslint config actually
  required the opposite via react-in-jsx-scope.
- Added type="button" to 31 buttons. In CustomProfileModal three of
  these sit inside a <form> with no onSubmit, so clicking them
  submitted the form and reloaded the page — that is now fixed.
- Applied useOptionalChain, useTemplate and noBannedTypes fixes.
- Deleted two no-op @ts-ignore directives in OverlayModal that biome
  rewrote to @ts-expect-error, which then failed tsc as unused. eslint
  had been reporting the same thing.

The remaining 36 findings need product decisions (accessible names for
svg/iframe/label, hook dependency arrays, stable list keys), so
biome.json demotes those rules to warn. They stay visible in
`npm run lint` output without failing it, to be burned down separately.

`npm run lint` now passes in every template except the three with
pre-existing tsc errors in their demo App.tsx (CustomChatButton,
CustomEntryPanel, CustomProfileModal), which are unchanged.

Note: biome does not support SCSS, so .scss files are no longer
formatted by the lint task. Prettier used to cover them.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
- CustomOverlay README showed `interface CustomOverlayProps {}` while
  biome's noBannedTypes fix had rewritten the source to a type alias.
  Copying the README snippet would have failed the repo's own linter.
- Filled in the missing demo props in the three App.tsx harnesses that
  had pre-existing tsc errors (CustomChatButton, CustomEntryPanel,
  CustomProfileModal). `lint` is now `lint:tsc && lint:biome`, which
  short-circuits, so those tsc failures meant biome never ran in those
  templates.

`npm run lint` now passes in all eleven templates.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@kira924age kira924age self-assigned this Aug 10, 2026
@kira924age
kira924age merged commit 7c877bb into develop Aug 10, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant