Biome Tooling
Biome is a modern, performant toolchain for JavaScript, TypeScript, and related web languages. It combines formatting, linting, and import organization into a single tool that's 15-20x faster than ESLint/Prettier.
When to Use This Skill
| Use this skill when... | Use another approach when... |
|---|---|
| Starting a new JS/TS project | Need specific ESLint plugins (React hooks, a11y) |
| Want zero-config formatting/linting | Have complex custom ESLint rules |
| Need fast CI/CD pipelines | Need framework-specific rules (Next.js, Nuxt) |
| Migrating from ESLint+Prettier | Legacy codebase with heavy ESLint customization |
Hybrid approach: Use Biome for formatting, ESLint for specialized linting.
Core Expertise
What is Biome?
- All-in-one toolchain: Linter + formatter + import sorter
- Zero-config: Works out of the box with sensible defaults
- Fast: Written in Rust, processes files in parallel
- Compatible: Matches Prettier formatting 97%+
- Supports: JavaScript, TypeScript, JSX, TSX, JSON, CSS
Installation
# Project-local (recommended)
bun add --dev @biomejs/biome
# Verify installation
bunx biome --version
# Initialize configuration
bunx biome initEssential Commands
# Format files
bunx biome format --write src/
# Lint with fixes
bunx biome lint --write src/
# Check everything (format + lint + organize imports)
bunx biome check --write src/
# Check without changes (CI mode)
bunx biome check src/
# CI mode (exits with error on issues)
bunx biome ci src/
# Migrate from ESLint/Prettier
bunx biome migrate eslint --write
bunx biome migrate prettier --write
# Explain a rule
bunx biome explain noUnusedVariablesConfiguration (biome.json)
Minimal Setup (Zero Config)
Biome works without configuration. For basic customization:
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false,
"ignore": ["dist", "build", "node_modules", ".next", "coverage"]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 100
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"organizeImports": {
"enabled": true
}
}Rule Categories
| Category | Purpose | Example Rules |
|---|---|---|
recommended | Essential rules everyone should enable | Most rules marked "recommended" |
correctness | Prevent bugs and logic errors | noUnusedVariables, noUnreachable |
suspicious | Detect code that might be wrong | noExplicitAny, noDoubleEquals |
style | Enforce consistent style | useConst, noVar |
complexity | Reduce code complexity | noForEach, useFlatMap |
performance | Optimize performance | noAccumulatingSpread |
a11y | Accessibility best practices | noSvgWithoutTitle, useAltText |
security | Security vulnerabilities | noDangerouslySetInnerHtml |
Common Patterns
Ignore Files and Directories
Via biome.json:
{
"files": {
"ignore": [
"dist",
"build",
"node_modules",
"**/*.config.js",
"scripts/legacy/**"
]
}
}Via.gitignore (automatic):
{
"vcs": {
"enabled": true,
"useIgnoreFile": true
}
}Performance Comparison
| Tool | Time (1000 files) | Notes |
|---|---|---|
| Biome | 0.5s | Rust, parallel processing |
| ESLint | 8-10s | Node.js, single-threaded |
| Prettier | 3-5s | Node.js, formatting only |
| ESLint + Prettier | 11-15s | Sequential execution |
Agentic Optimizations
| Context | Command |
|---|---|
| Quick check | bunx biome check src/ |
| Fix all | bunx biome check --write src/ |
| Format only | bunx biome format --write src/ |
| Lint only | bunx biome lint --write src/ |
| CI mode | bunx biome ci src/ |
| Errors only | bunx biome check --diagnostic-level=error src/ |
| Limited output | bunx biome check --max-diagnostics=10 src/ |
| GitHub reporter | bunx biome check --reporter=github src/ |
| JSON output | bunx biome check --reporter=json src/ |
| Migrate ESLint | bunx biome migrate eslint --write |
| Migrate Prettier | bunx biome migrate prettier --write |
Quick Reference
| Flag | Description |
|---|---|
--write | Apply fixes/formatting |
--reporter=github | GitHub annotations format |
--reporter=json | JSON output |
--diagnostic-level=error | Errors only |
--max-diagnostics=N | Limit output count |
--verbose | Show detailed diagnostics |
--no-errors-on-unmatched | Ignore unmatched files |
ci | CI mode (check + exit code) |
For detailed examples, advanced patterns, and best practices, see REFERENCE.md.
References
- Official docs: https://biomejs.dev
- Configuration: https://biomejs.dev/reference/configuration/
- Rules: https://biomejs.dev/linter/
- Migration guide: https://biomejs.dev/guides/migrate-eslint-prettier/
- Editor integration: https://biomejs.dev/