Biome: The All-in-One Toolchain for Modern Frontend Projects

Frontend developers know the pain of managing multiple tools for code quality. You need ESLint for linting, Prettier for formatting, and often additional plugins for specific frameworks or features. Each tool requires its own configuration, can conflict with others, and slows down your development workflow.

Biome offers a different approach: a unified, high-performance toolchain that replaces multiple tools with a single solution. Built in Rust and designed for speed, this biome js linter combines formatting, linting, and import organization into one cohesive package.

This article explores what makes Biome compelling for modern frontend projects, how it compares to existing tools, and whether it’s ready for your production workflow.

What is Biome and Why It Matters

Biome is a fast, unified toolchain for web development that originated as a fork of the now-defunct Rome project. It provides three core features:

• Code formatting (similar to Prettier)
• Linting (similar to ESLint)
• Import organization (automatically sorts and groups imports)

The key difference is performance and simplicity. Written in Rust with multi-threading support, Biome processes files significantly faster than JavaScript-based alternatives while requiring minimal configuration.

The Performance Advantage

Biome’s Rust foundation delivers measurable speed improvements:

• 25x faster formatting than Prettier
• 15x faster linting than ESLint
• Multi-threaded processing for large codebases
• Near-instant feedback in development

These performance gains become especially noticeable in large projects where traditional tools can create noticeable delays during development and CI/CD processes.

How Biome Compares to ESLint and Prettier

Formatting: Biome vs Prettier

Biome’s formatter produces output that’s largely compatible with Prettier, maintaining familiar formatting patterns that teams already expect. The key differences:

Advantages:

• Dramatically faster processing
• Built-in import organization
• Unified configuration with linting

Limitations:

• Limited language support (no HTML, Markdown, or SCSS)
• Partial support for Vue, Astro, and Svelte
• Fewer customization options

Linting: Biome vs ESLint

The biome js linter includes rules inspired by ESLint and other popular linters, organized into logical categories:

{
  "linter": {
    "rules": {
      "correctness": {
        "noUnusedVariables": "error"
      },
      "style": {
        "useConst": "warn"
      },
      "security": {
        "recommended": true
      },
      "a11y": {
        "recommended": true
      }
    }
  }
}

Advantages:

• Faster analysis and error reporting
• Clear, actionable error messages
• Built-in security and accessibility rules
• Safe vs unsafe fix categorization

Limitations:

• Smaller rule ecosystem compared to ESLint
• JSON-only configuration (no JavaScript config files)
• Limited plugin system

Getting Started with Biome

Installation and Setup

Install Biome as a development dependency:

npm install --save-dev --save-exact @biomejs/biome

The --save-exact flag ensures consistent behavior across team members by pinning to a specific version.

Initialize Biome in your project:

npx biome init

This creates a biome.json configuration file with sensible defaults:

{
  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "tab",
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "organizeImports": {
    "enabled": true
  }
}

Basic Commands

Format code:

npx biome format --write ./src

Lint code:

npx biome lint ./src

Run both formatting and linting:

npx biome check --write ./src

Configuring Biome for Your Project

Essential Configuration Options

Most projects will want to customize these key settings:

{
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingComma": "es5",
      "semicolons": "always"
    }
  },
  "files": {
    "ignore": ["dist/**", "build/**", "*.min.js"]
  }
}

Migrating from Existing Tools

Biome includes migration commands to port existing configurations:

# Migrate from ESLint
npx biome migrate eslint --write

# Migrate from Prettier
npx biome migrate prettier --write

These commands read your existing configuration files and translate compatible settings to Biome’s format.

IDE Integration and Workflow

Visual Studio Code

Install the official Biome extension and configure it in your settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit"
  }
}

Git Hooks and CI/CD

Set up pre-commit hooks using Husky:

{
  "scripts": {
    "lint:staged": "biome check --staged"
  }
}

For GitHub Actions, use the official setup action:

name: Code Quality
on: [push, pull_request]
jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: biomejs/setup-biome@v2
        with:
          version: latest
      - run: biome ci .

Language and Framework Support

Fully Supported

• JavaScript (ES5+)
• TypeScript
• JSX/TSX
• JSON/JSONC
• CSS (basic support)

Partial Support

• Vue (template syntax limitations)
• Svelte (component-specific issues)
• Astro (mixed content challenges)

Not Supported

• HTML
• Markdown
• SCSS/Sass
• YAML

This limited language support is Biome’s biggest constraint for teams working with diverse file types.

When to Choose Biome

Ideal Use Cases

Biome works well for:

• TypeScript/JavaScript-heavy projects
• Teams prioritizing performance
• New projects without legacy tooling
• Monorepos with consistent file types
• Projects seeking simplified configuration

Consider Alternatives If

Stick with ESLint/Prettier if:

• You heavily use unsupported file types
• You depend on specific ESLint plugins
• You need complex, dynamic configurations
• You’re working with legacy codebases

Performance Impact in Real Projects

Based on community benchmarks and real-world usage:

• Small projects (< 1000 files): Minimal difference in developer experience
• Medium projects (1000-10000 files): Noticeable improvement in save-time formatting
• Large projects (> 10000 files): Significant CI/CD time savings and faster development feedback

The performance benefits become more pronounced as project size increases, making Biome particularly attractive for large-scale applications.

Conclusion

Biome represents a significant step forward in frontend tooling by unifying linting and formatting into a single, high-performance solution. Its speed advantages and simplified configuration make it compelling for teams tired of managing multiple tools.

However, its limited language support and smaller ecosystem mean it’s not yet a universal replacement for ESLint and Prettier. The decision to adopt Biome depends on your project’s specific needs and file type requirements.

For TypeScript/JavaScript-focused projects, Biome offers a cleaner, faster development experience. For projects with diverse file types, a hybrid approach using Biome for supported files and traditional tools for others might be the best strategy.

FAQs