biome
by @tenequm
Lint and format frontend code with Biome 2.4. Covers type-aware linting, GritQL custom rules, domains, import organizer, and migration from ESLint/Prettier....
Ban Object.assign:
$fn($args) where {
$fn <: Object.assign,
register_diagnostic(
span = $fn,
message = "Prefer object spread instead of Object.assign()"
)
}
CSS - enforce color classes:
language css;
$selector { $props } where {
$props <: contains color: $color as $rule,
not $selector <: r"\.color-.*",
register_diagnostic(
span = $rule,
message = "Don't set explicit colors. Use .color-* classes instead."
)
}
Plugin API
register_diagnostic() arguments:
severity - "hint", "info", "warn", "error" (default: "error")message (required) - diagnostic messagespan (required) - syntax node to highlightSupported target languages: JavaScript (default) and CSS, plus JSON since v2.4 (the v2.4 release blog adds JSON; the linter/plugins/ reference page may still mention only JS/CSS - the blog is authoritative). Profile rule and plugin execution with biome lint --profile-rules ..
1. Use biome check as your single command - combines format, lint, and import organization
2. Start with recommended: true - disable individual rules as needed
3. Enable relevant domains - react, next, test, types based on your stack
4. Enable VCS integration - respects .gitignore, enables --changed/--staged
5. Use biome ci in pipelines - never writes files, clear exit codes
6. Pin exact versions - avoid surprise rule changes between releases
7. Run biome migrate --write after every upgrade
8. Use --staged in pre-commit hooks: biome check --staged --write --no-errors-on-unmatched .
9. Profile slow rules with biome lint --profile-rules (v2.4)
10. Use GritQL plugins for project-specific patterns instead of disabling rules globally
clawhub install biome