linter/formatter を eslint + prettier から biome に統一 - #63
Merged
Merged
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
CustomExitScreen だけが biome を使っていたため、残り10テンプレートも biome に統一しました。これでリポジトリ全体が単一のツールチェーンになります。
#62(Vite 移行)の後続作業です。
変更内容
eslint/eslint-config-prettier/eslint-plugin-react/@typescript-eslint/*/prettier/npm-run-allを削除し、@biomejs/biome2.3.13 を追加.eslintrc.jsonを削除差分の大半は biome フォーマッタによるタブインデントへの再整形です(CustomExitScreen に合わせています)。
biome の指摘への対応
biome の推奨ルールは従来の eslint 設定より広く、66件の指摘が出ました。機械的で意味を変えないものはこのPRで修正しています。
jsx: react-jsx配下ではimport Reactは不要です。従来の eslint 設定はreact-in-jsx-scopeにより逆に必須としていました<button>にtype="button"を付与 — うち CustomProfileModal の3つはonSubmitの無い<form>の内側にあり、クリックするとフォーム送信が走ってページがリロードされる既存バグでした。これも同時に解消していますuseOptionalChain/useTemplate/noBannedTypesの修正を適用@ts-ignore2箇所を削除 — 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