From frontend-dev
Guides Biome 2.4 configuration for linting, formatting, and import organization in JavaScript, TypeScript, JSX, CSS, GraphQL. Covers type-aware linting, GritQL rules, ESLint/Prettier migration, IDE/CI setup.
npx claudepluginhub tenequm/claude-pluginsThis skill uses the workspace's default tool permissions.
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.
Lints and formats JS/TS/JSX/CSS/GraphQL code using Biome 2.4 with type-aware linting, GritQL rules, import organization, and ESLint/Prettier migrations. Use for config, CI checks, and custom rules.
Applies Biome linting for accessibility, complexity, correctness rules and code quality enforcement in JavaScript/TypeScript projects via check commands and config.
Configures Biome linting and formatting via biome.json or biome.jsonc, troubleshoots diagnostics, sets ignores and overrides, and replaces ESLint/Prettier in JS/TS projects.
Share bugs, ideas, or general feedback.
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.