Biome

Biome is a fast, all-in-one toolchain for web projects that provides formatting and linting in a single tool. It's built in Rust for maximum performance and serves as a drop-in replacement for ESLint and Prettier.

Installation

npm install -D @biomejs/biome

Basic Setup

Add Biome to your Denji hooks to automatically format and lint icons after adding them:

denji.json

{
  "output": "./src/icons.tsx",
  "framework": "react",
  "typescript": true,
  "hooks": {
    "postAdd": [
      "npx @biomejs/biome check --write ./src/icons.tsx"
    ]
  }
}

The check command runs both formatting and linting in a single pass, making Biome faster than running separate tools.

Configuration Examples

Format and Lint with Safe Fixes

denji.json

{
  "hooks": {
    "postAdd": [
      "npx @biomejs/biome check --write ./src/icons.tsx"
    ]
  }
}

Format Only

denji.json

{
  "hooks": {
    "postAdd": [
      "npx @biomejs/biome format --write ./src/icons.tsx"
    ]
  }
}

Lint Only

denji.json

{
  "hooks": {
    "postAdd": [
      "npx @biomejs/biome lint --write ./src/icons.tsx"
    ]
  }
}

Multiple Hooks

Run Biome after various operations:

denji.json

{
  "hooks": {
    "postAdd": [
      "npx @biomejs/biome check --write ./src/icons.tsx"
    ],
    "postRemove": [
      "npx @biomejs/biome check --write ./src/icons.tsx"
    ],
    "postClear": [
      "npx @biomejs/biome check --write ./src/icons.tsx"
    ]
  }
}

Apply Unsafe Fixes

For more aggressive fixes that might change code behavior:

denji.json

{
  "hooks": {
    "postAdd": [
      "npx @biomejs/biome check --write --unsafe ./src/icons.tsx"
    ]
  }
}

Use --unsafe with caution as it may apply fixes that change code behavior. Review changes carefully.

Common Commands

npx @biomejs/biome check --write ./src/icons.tsx

Runs formatting and linting with automatic safe fixes applied. This is the most common command.

npx @biomejs/biome format --write ./src/icons.tsx

Formats files without running the linter. Faster when you only need formatting.

npx @biomejs/biome lint --write ./src/icons.tsx

Lints files with automatic safe fixes, without formatting. Useful when formatting is handled separately.

npx @biomejs/biome ci ./src/icons.tsx

Runs checks without fixes and exits with error code on issues. Perfect for CI pipelines to ensure code quality.

Biome Commands

`check`

Runs both formatting and linting:

# Check and fix
npx @biomejs/biome check --write ./src/icons.tsx

# Check only (no fixes)
npx @biomejs/biome check ./src/icons.tsx

# Apply unsafe fixes
npx @biomejs/biome check --write --unsafe ./src/icons.tsx

# Check staged files
npx @biomejs/biome check --staged

`format`

Runs only formatting:

# Format files
npx @biomejs/biome format --write ./src/icons.tsx

# Check formatting
npx @biomejs/biome format ./src/icons.tsx

`lint`

Runs only linting:

# Lint with fixes
npx @biomejs/biome lint --write ./src/icons.tsx

# Lint without fixes
npx @biomejs/biome lint ./src/icons.tsx

# Apply unsafe fixes
npx @biomejs/biome lint --write --unsafe ./src/icons.tsx

`ci`

CI mode - checks without fixes:

npx @biomejs/biome ci ./src/icons.tsx

Package Manager Alternatives

{
  "hooks": {
    "postAdd": ["npx @biomejs/biome check --write ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["pnpm exec biome check --write ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["yarn exec biome check --write ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["bunx biome check --write ./src/icons.tsx"]
  }
}

Using Package Scripts

Define a script in package.json:

package.json

{
  "scripts": {
    "format": "biome check --write .",
    "format:icons": "biome check --write ./src/icons.tsx",
    "lint": "biome lint .",
    "check": "biome ci ."
  }
}

Reference it in your Denji config:

denji.json

{
  "hooks": {
    "postAdd": ["npm run format:icons"]
  }
}

Performance Comparison

Biome is significantly faster than traditional tooling:

5-10x faster than ESLint for linting
20-30x faster than Prettier for formatting
Single tool replaces both ESLint and Prettier
Zero config works out of the box

Biome's performance gains come from being written in Rust and designed from the ground up for speed.

Migration from ESLint/Prettier

Step 1: Remove Old Tools

npm uninstall eslint prettier eslint-config-prettier

Step 2: Install Biome

npm install -D @biomejs/biome

Step 3: Initialize Configuration

npx @biomejs/biome init

Step 4: Update Denji Config

denji.json

{
  "hooks": {
    "postAdd": [
      "npx @biomejs/biome check --write ./src/icons.tsx"
    ]
  }
}

Step 5: Update Package Scripts

package.json

{
  "scripts": {
    "format": "biome check --write .",
    "lint": "biome lint .",
    "check": "biome ci ."
  }
}

Performance Tips

Use check command - Runs formatting and linting in one pass:

"postAdd": ["npx @biomejs/biome check --write ./src/icons.tsx"]

Target specific file - Avoid unnecessary file scanning:

"postAdd": ["npx @biomejs/biome check --write ./src/icons.tsx"]

Use --changed flag - Only check modified files:

npx @biomejs/biome check --changed --write

Enable caching - Biome caches by default for faster subsequent runs

Troubleshooting

Biome Not Found

Install Biome as a dev dependency:

npm install -D @biomejs/biome

Different Formatting than Prettier

Biome aims for Prettier compatibility but may have minor differences. You can configure Biome to match your preferences in biome.json.

Hook Fails on First Run

If the icons file doesn't exist yet, use the --files-ignore-unknown flag:

{
  "hooks": {
    "postAdd": [
      "npx @biomejs/biome check --write --files-ignore-unknown ./src/icons.tsx"
    ]
  }
}

Unsafe Fixes Required

Some issues require unsafe fixes. Review the output and decide:

npx @biomejs/biome check --write --unsafe ./src/icons.tsx

Biome vs ESLint/Prettier

Feature	Biome	ESLint + Prettier
Speed	Very fast (Rust)	Slower (JavaScript)
Setup	Zero config	Requires configuration
Tools	All-in-one	Separate tools
Rules	200+ rules	1000+ rules (with plugins)
Compatibility	High Prettier compatibility	N/A
Ecosystem	Growing	Mature

Choose Biome for speed and simplicity. Choose ESLint if you need specific plugins or rules not yet available in Biome.

Ultracite Integration - Zero-config Biome preset
ESLint Integration - Alternative linter
Prettier Integration - Alternative formatter
Configuration - Denji configuration options

On this page