Loading...
Loading...
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.
npx skill4agent add tenequm/skills biomefiles.ignorefiles.includesfiles.includessfiles.ignorefiles.includesfiles.excludeFound an unknown keyfilesincludesmaxSizeignoreUnknownexperimentalScannerIgnoresfiles.includes{
"files": {
"includes": ["**", "!**/routeTree.gen.ts", "!**/generated/**"]
}
}overrideslinter/formatter/assists: { enabled: false }files.includesbiome checkbiome checkbiome lintbiome formatbiome checkbiome cibiome.json"extends": "//""extends": ["../../biome.json"]--write--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 --writepnpm add --save-dev --save-exact @biomejs/biome
pnpm biome init # Creates default biome.json with recommended rulesbiomejs.biome{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports.biome": "explicit"
}
}inline_configbiome.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": {
"includes": [
"src/**/*.ts", "src/**/*.tsx",
"tests/**/*.ts", "**/*.config.ts", "**/*.json",
"!**/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" }
}
}
}indentStyle"space""tab"indentWidthlineWidthlineEnding"lf""crlf"trailingNewlinequoteStyletrailingCommassemicolonsarrowParenthesesbracketSpacing"error""warn""info""off"{
"linter": {
"rules": {
"recommended": true,
"style": {
"noRestrictedGlobals": {
"level": "error",
"options": {
"deniedGlobals": {
"Buffer": "Use Uint8Array for browser compatibility."
}
}
},
"useComponentExportOnlyModules": "off"
}
}
}
}{
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": {
"level": "on",
"options": {
"groups": [
{ "source": "builtin" },
{ "source": "external" },
{ "source": "internal", "match": "@company/*" },
{ "source": "relative" }
]
}
}
}
}
}
}linterformatterassistincludesfiles.includes{
"files": {
"includes": ["**", "!**/dist"]
},
"linter": {
"includes": ["**", "!**/components/ui"]
},
"formatter": {
"includes": ["**", "!**/components/ui"]
}
}dist/components/uicomponents/uiincludess{
"overrides": [
{
"includes": ["**/components/ui/**"],
"linter": {
"rules": {
"suspicious": { "noDocumentCookie": "off" },
"style": { "useComponentExportOnlyModules": "off" }
}
}
},
{
"includes": ["**/*.test.ts"],
"linter": {
"rules": {
"suspicious": { "noConsole": "off" }
}
}
}
]
}biome.json"extends": "//"{
"$schema": "../../node_modules/@biomejs/biome/configuration_schema.json",
"extends": "//"
}linter.rules"extends": "//"biome.jsonbiome.jsonc.biome.json.biome.jsonc~/.config/biome~/Library/Application Support/biome{
"linter": {
"domains": {
"react": "recommended",
"next": "recommended",
"test": "recommended",
"types": "all"
}
}
}| Domain | Purpose | Auto-detected |
|---|---|---|
| React hooks, JSX patterns | |
| Next.js-specific rules | |
| Solid.js rules | |
| Testing best practices (any framework) | - |
| Playwright test rules | |
| Cross-file analysis (noImportCycles, noUnresolvedImports) | - |
| Type inference rules (noFloatingPromises, noMisusedPromises) | - |
"recommended""all""none"projecttypestypescripttypes| Rule | What it catches |
|---|---|
| Unhandled promises (missing await/return/void) |
| Promises in conditionals, array callbacks |
| Awaiting non-thenable values |
| Conditions that are always true/false |
| |
| |
| |
// 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");
}.grit{ "plugins": ["./lint-rules/no-object-assign.grit"] }Object.assign`$fn($args)` where {
$fn <: `Object.assign`,
register_diagnostic(
span = $fn,
message = "Prefer object spread instead of `Object.assign()`"
)
}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()severity"hint""info""warn""error""error"messagespanbiome 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 checkedbiome-ignore-endpnpm biome migrate eslint --write
pnpm biome migrate eslint --write --include-inspired # Include non-identical rulesextends.eslintignorepnpm biome migrate prettier --writetabWidthindentWidthuseTabsindentStylesingleQuotequoteStyletrailingCommatrailingCommaspnpm 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{ "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 filesbiome ci . # No writes, exit code on errors
biome ci --reporter=github . # GitHub annotations
biome ci --reporter=sarif --reporter-file=report.sarif . # SARIF outputbiome 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 errorsbiome format --write . # Format only
biome search '`console.$method($args)`' . # GritQL pattern search
biome rage # Debug info for bug reports
biome explain noFloatingPromises # Explain a rulebiome checkrecommended: truereactnexttesttypes.gitignore--changed--stagedbiome cibiome migrate --write--stagedbiome check --staged --write --no-errors-on-unmatched .biome lint --profile-rulesfiles.ignorefiles.includefiles.excludefiles.includessFound an unknown keyorganizeImportsassist.actions.source.organizeImportsoverrideslinterformatterassistfiles.includesoverridesincludessincludefiles.includesbiome check --writecheck --write--fix--write--fix