Lint and format frontend code with Biome 2.4. Covers type-aware linting, GritQL custom rules, domains, import organizer, and migration from ESLint/Prettier. Use when configuring linting rules, formatting code, writing custom lint rules, or setting up CI checks. Triggers on biome, biome config, biome lint, biome format, biome check, biome ci, gritql, migrate from eslint, migrate from prettier, import sorting, code formatting, lint rules, type-aware linting, noFloatingPromises.
Fast, unified linting, formatting, and import organization for JavaScript, TypeScript, JSX, CSS, and GraphQL. Biome 2.4 provides type-aware linting without the TypeScript compiler, GritQL plugins for custom rules, and domain-based rule grouping. Single binary, zero config by default, 97% Prettier compatibility.
biome check, not separate lint + formatbiome check runs formatter, linter, and import organizer in one pass. Never call biome lint and biome format separately in CI - use biome check (or biome ci for CI mode).
Every project needs one biome.json at the root. Monorepo packages use nested configs with "extends": "//" to inherit from root. Never use relative paths like "extends": ["../../biome.json"].
--write to apply fixes, not --fixbiome check --write . # Apply safe fixes
biome check --write --unsafe . # Apply all fixes (review changes)
pnpm add --save-dev --save-exact @biomejs/biome@latest
pnpm biome migrate --write
pnpm add --save-dev --save-exact @biomejs/biome
pnpm biome init # Creates default biome.json with recommended rules
VS Code - Install biomejs.biome extension:
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports.biome": "explicit"
}
}
Zed - Biome extension available natively. The inline_config feature (v2.4) lets editors override rules without affecting biome.json:
{
"formatter": { "language_server": { "name": "biome" } },
"lsp": {
"biome": {
"settings": {
"inline_config": {
"linter": { "rules": { "suspicious": { "noConsole": "off" } } }
}
}
}
}
}
pnpm biome ci . # No writes, non-zero exit on errors
pnpm biome ci --reporter=default --reporter=github . # GitHub Actions annotations
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"include": [
"src/**/*.ts", "src/**/*.tsx",
"tests/**/*.ts", "**/*.config.ts", "**/*.json"
],
"ignore": [
"*.d.ts", "**/generated", "**/components/ui"
]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 120
},
"linter": {
"enabled": true,
"rules": { "recommended": true },
"domains": { "react": "recommended" }
},
"javascript": {
"formatter": { "quoteStyle": "double" }
},
"assist": {
"enabled": true,
"actions": {
"source": { "organizeImports": "on" }
}
}
}
Key options: indentStyle ("space"/"tab"), indentWidth, lineWidth, lineEnding ("lf"/"crlf"), trailingNewline. JS-specific: quoteStyle, trailingCommas, semicolons, arrowParentheses, bracketSpacing.
Rules use severity levels "error", "warn", "info", or "off". Some accept options:
{
"linter": {
"rules": {
"recommended": true,
"style": {
"noRestrictedGlobals": {
"level": "error",
"options": {
"deniedGlobals": {
"Buffer": "Use Uint8Array for browser compatibility."
}
}
},
"useComponentExportOnlyModules": "off"
}
}
}
}
The import organizer (Biome Assist) merges duplicates, sorts by distance, and supports custom grouping:
{
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": {
"level": "on",
"options": {
"groups": [
{ "source": "builtin" },
{ "source": "external" },
{ "source": "internal", "match": "@company/*" },
{ "source": "relative" }
]
}
}
}
}
}
}
Root biome.json holds shared config. Package configs inherit with "extends": "//":
{
"$schema": "../../node_modules/@biomejs/biome/configuration_schema.json",
"extends": "//"
}
Override specific rules per package by adding a linter.rules section alongside "extends": "//".
Search order: biome.json -> biome.jsonc -> .biome.json -> .biome.jsonc -> platform config home (~/.config/biome on Linux, ~/Library/Application Support/biome on macOS).
Domains group lint rules by technology. Enable only what your stack needs:
{
"linter": {
"domains": {
"react": "recommended",
"next": "recommended",
"test": "recommended",
"types": "all"
}
}
}
| Domain | Purpose | Auto-detected |
|---|---|---|
react | React hooks, JSX patterns | react dependency |
next | Next.js-specific rules | next >= 14.0.0 |
solid | Solid.js rules | solid-js dependency |
test | Testing best practices (any framework) | - |
playwright | Playwright test rules | @playwright/test |
project | Cross-file analysis (noImportCycles, noUnresolvedImports) | - |
types | Type inference rules (noFloatingPromises, noMisusedPromises) | - |
Activation levels: "recommended" (stable rules only), "all" (includes nursery), "none" (disable).
The project domain enables rules needing the module graph. The types domain (v2.4) enables rules requiring type inference. Both trigger a file scan that adds a small overhead.
Biome 2.0 introduced type-aware linting without the TypeScript compiler. Biome has its own type inference engine in Rust - no typescript dependency needed.
Enable the types domain to activate file scanning and type inference. Performance impact is minimal compared to typescript-eslint because inference runs natively.
| Rule | What it catches |
|---|---|
noFloatingPromises | Unhandled promises (missing await/return/void) |
noMisusedPromises | Promises in conditionals, array callbacks |
useAwaitThenable | Awaiting non-thenable values |
noUnnecessaryConditions | Conditions that are always true/false |
useRegexpExec | string.match() where regexp.exec() is better |
useFind | array.filter()[0] instead of array.find() |
useArraySortCompare | Array.sort() without compare function |
The most impactful type-aware rule. Detects unhandled promises:
// ERROR: floating promise
async function loadData() {
fetch("/api/data");
}
// VALID: awaited
async function loadData() {
await fetch("/api/data");
}
// VALID: explicitly voided (fire-and-forget)
async function loadData() {
void fetch("/api/data");
}
Detects ~75% of cases compared to typescript-eslint, improving each release.
GritQL is a declarative pattern-matching language for custom lint rules. Create .grit files and register them as plugins.
{ "plugins": ["./lint-rules/no-object-assign.grit"] }
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."
)
}
register_diagnostic() arguments:
severity - "hint", "info", "warn", "error" (default: "error")message (required) - diagnostic messagespan (required) - syntax node to highlightSupported target languages: JavaScript (default), CSS, JSON (v2.4). Profile with biome lint --profile-rules ..
// biome-ignore lint/suspicious/noConsole: needed for debugging
console.log("debug info");
// biome-ignore-all lint/suspicious/noConsole: logger module
// biome-ignore-start lint/style/useConst: legacy code
let x = 1;
let y = 2;
// biome-ignore-end lint/style/useConst
const a = 4; // this line IS checked
biome-ignore-end is optional - omit to suppress until end of file. Biome requires explanation text after the colon.
pnpm biome migrate eslint --write
pnpm biome migrate eslint --write --include-inspired # Include non-identical rules
Supports legacy and flat configs, extends resolution, plugins (typescript-eslint, react, jsx-a11y, unicorn), .eslintignore.
pnpm biome migrate prettier --write
Maps tabWidth -> indentWidth, useTabs -> indentStyle, singleQuote -> quoteStyle, trailingComma -> trailingCommas.
pnpm biome migrate eslint --write
pnpm biome migrate prettier --write
pnpm remove eslint prettier eslint-config-prettier eslint-plugin-prettier \
@typescript-eslint/parser @typescript-eslint/eslint-plugin
rm .eslintrc* .prettierrc* .eslintignore .prettierignore
Enable VCS integration since ESLint respects gitignore by default:
{ "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true } }
biome check . # Check all files
biome check --write . # Apply safe fixes
biome check --write --unsafe . # Apply all fixes
biome check --changed . # Only VCS-changed files
biome check --staged . # Only staged files
biome ci . # No writes, exit code on errors
biome ci --reporter=github . # GitHub annotations
biome ci --reporter=sarif --reporter-file=report.sarif . # SARIF output
biome lint --only=suspicious/noDebugger . # Single rule
biome lint --skip=project . # Skip domain
biome lint --only=types . # Only type-aware rules
biome lint --error-on-warnings . # Warnings become errors
biome format --write . # Format only
biome search '`console.$method($args)`' . # GritQL pattern search
biome rage # Debug info for bug reports
biome explain noFloatingPromises # Explain a rule
biome check as your single command - combines format, lint, and import organizationrecommended: true - disable individual rules as neededreact, next, test, types based on your stack.gitignore, enables --changed/--stagedbiome ci in pipelines - never writes files, clear exit codesbiome migrate --write after every upgrade--staged in pre-commit hooks: biome check --staged --write --no-errors-on-unmatched .biome lint --profile-rules (v2.4)For detailed lint rules by category with code examples, see rules-reference.md.