Biome
Biomeは、JS、TS、JSX、JSON、CSSのための唯一のフォーマッター兼リンターです。SCSSは例外で、Biome 2.5はパースしないため、stylelintが.scssを処理します(scss-bem参照)。ESLintもPrettierも使いません。
テンプレートのルートbiome.jsonが唯一の情報源です。プラグインフックは、Claudeがファイルを編集した後、そのファイルの上にbiome.jsonが存在する場合、pnpm exec biome check --write <file>を実行します。
ルール
-
ルート
biome.jsonは1つだけ、スキーマはインストールされたバージョンに固定する。"$schema": "https://biomejs.dev/schemas/2.5.15/schema.json"とし、@biomejs/biomeもワークスペースカタログで同じバージョンに固定します。スキーマが一致しないと、エディターで新しいオプションや名前変更されたオプションが非表示になります。アップグレード時は、pnpm exec biome migrate --writeを実行し、両方を更新します。 -
gitに無視するものを決定させる:
vcs.useIgnoreFile: true。 次に、files.includesで!!を使用してビルド出力を強制無視します(!!**/.next、!!**/.turbo、!!**/dist、!!**/coverage)。これにより、Biomeがそれらのフォルダーをスキャンするのも防止できます。単一の!は処理から除外しますが、インデックスは維持します。files.ignoreUnknown: trueは、.scssやその他のサポートされていないファイルが報告されるのを防ぎます。 -
フォーマッター:2スペース、幅100、LF、ダブルクォート、セミコロン、末尾カンマ。 これらはすべてのリポジトリで固定されており、差分がスタイルをめぐって競合しないようにします。パッケージごとにフォーマッターのオーバーライドを追加しないでください。
-
リンター:
preset: "recommended"、a11y: "error"、ドメインreactとnextをrecommendedで。rules.recommended: trueは古い表記で非推奨です:rules.presetを使用してください。a11yはerrorにします。なぜなら、nuvuiは自身のコンポーネントのアクセシビリティを処理するため、残ったもの(独自のマークアップにおけるalt、ラベル、ボタンタイプ)が正しくなければならないからです。nextドメインはnoImgElementなどのルールを追加し、reactはフックルールを追加します。 -
Nurseryはオフのままにする。 Nurseryルールはパッチリリース間で変更される可能性があり、Biomeのアップグレード時にCIを壊す可能性があります。意図的に1つ有効にする場合は、名前を指定し、理由をコメントで記述し、アップグレードのたびに再確認してください。
-
noConsoleは警告(warn)で、errorとwarnは許可する。 構造化エラーログ(instrumentation.ts)はconsole.errorを使用します。迷子のconsole.logはキャッチされます。 -
インポートは手動ではなく、アシストでソートする。
assist.actions.source.organizeImports: "on"。biome check --writeが適用し、biome ciはソートされていないインポートを失敗させます。 -
グロブによるオーバーライドをテストファイルなどに使用する。 テンプレートは
*.test.ts(x)/*.test-d.tsに対してのみtestドメインを有効にします。他のファイルタイプの違いも、個別の設定ではなく、ここに記述します。 -
ネストされた設定は、実際に異なるパッケージのみに使用し、ルートを拡張する。
// packages/legacy-widget/biome.json { "extends": "//", "linter": { "rules": { "style": { "noNonNullAssertion": "off" } } } }"extends": "//"は「ルート設定」を意味し、"root": falseを暗に示します。他のネスト設定はすべて"root": falseを設定する必要があります。共有の@repo/biome-configパッケージは使用しません。ルートファイルと//で、ビルドや依存関係なしにカバーできます。 -
ローカルでは
biome check --write、CIではbiome ci。pnpm lintはbiome check .(書き込みなし)を実行します。pnpm lint:fixはbiome check --write .を実行します。CIはpnpm exec biome ci --reporter=github .を実行し、書き込みは行わず、フォーマット、リント、インポート順序で失敗し、PRに注釈を付けます。フル実行が遅くなる場合のみ、--changed --since=origin/mainを追加してください。現在はミリ秒単位です。 -
1行だけ抑制し、理由を添える。
// biome-ignore lint/suspicious/noExplicitAny: サードパーティのコールバックが上流でanyと型付けされているため1つのファイルを通すためにリポジトリ全体でルールを無効にしないでください。ルールがリポジトリにとって間違っている場合は、
biome.jsonを変更し、そのコミットに理由を記述してください。 -
よくある問題は、黙らせるのではなく修正する。
useImportType:修正を実行します。verbatimModuleSyntaxで必要です。noExplicitAny:unknownを使用してパースします(typescript-production参照)。useButtonType、noSvgWithoutTitle、useAltText:実際のアクセシビリティバグです。noImgElement:next/imageを使用します。useExhaustiveDependencies:依存関係リストを修正するか、値をコンポーネントの外に移動します。
-
VS Code:Biomeがデフォルトのフォーマッターで、保存時に修正する。 テンプレートの
.vscode/settings.jsonは、editor.defaultFormatter: "biomejs.biome"、source.fixAll.biomeとsource.organizeImports.biomeを保存時に設定し、biome.requireConfiguration: trueで拡張機能がBiomeのないリポジトリで静かになるようにします。SCSSはstylelint拡張機能を維持します。.vscode/extensions.jsonに両方を推奨します。 -
ESLint/Prettierからの移行:移行してから削除する。 references/migration.mdを参照してください。最終状態:
eslint*、prettier*、@typescript-eslint/*パッケージはなく、.eslintrc*、eslint.config.*、.prettierrc*、.prettierignoreもありません。
Biomeがカバーしないもの
| ファイル | ツール |
|---|---|
.scss | stylelint(scss-bem) |
.yaml(ワークフロー、Helm) | ワークフローにはactionlint、チャートにはhelm lint + kubeconform |
.md | 強制なし |
| 型エラー | tsc --noEmit(pnpm typecheck) |
確認
pnpm lint # biome check . && stylelint
pnpm exec biome ci --reporter=github . # CIが実行するもの
pnpm exec biome rage # 解決された設定を出力(何かが無視されているように見える場合)
出典
- https://biomejs.dev/reference/configuration/
- https://biomejs.dev/guides/big-projects/
- https://biomejs.dev/linter/domains/
- https://biomejs.dev/linter/rules/
- https://biomejs.dev/reference/cli/
- https://biomejs.dev/reference/vscode/
- https://biomejs.dev/guides/migrate-eslint-prettier/
- https://biomejs.dev/internals/language-support/