laurigates/biome-tooling

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 init

Essential 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 noUnusedVariables

Configuration (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/