What's up with Biome

Introduction to Biome

Biome is a fast, modern toolchain for web development that aims to replace Babel, ESLint, webpack, Prettier, and more. It’s built with Rust, offering exceptional performance and an all-in-one solution for formatting, linting, and more.

Why Choose Biome Over Prettier & ESLint? I’ve Got You Covered!

When it comes to choosing a tool for code formatting and linting, Biome offers several compelling advantages over Prettier and ESLint that make it a standout choice:

1. Performance: Biome is built on a Rust-based foundation, which provides it with exceptional speed. It is reported to be up to 95% faster than Prettier and significantly faster than ESLint. This speed advantage can greatly benefit projects that need quick and efficient formatting and linting, especially in large codebases.

2. All-in-One Tool: Biome combines the functionalities of both a formatter and a linter into a single tool. This eliminates the need to juggle multiple tools (like Prettier and ESLint), which simplifies the setup and reduces the complexity of managing multiple configurations and dependencies.

3. Consistency and Precision: Unlike Prettier, which sometimes exhibits inconsistent behavior with specific code structures, Biome enforces stricter and more consistent formatting rules. For example, Biome handles parentheses and formatting for complex TypeScript constructs more precisely, which can help maintain code quality and avoid potential errors.

4. Lightweight and Scalable: Biome’s lightweight design means it adds minimal overhead to your project, making it ideal for both small and large projects. It scales well, maintaining performance even as project size and complexity increase.

5. Easy to Adopt: Biome is designed to be user-friendly with a minimal learning curve. Its default configuration works out of the box without the need for additional plugins, making it accessible for developers at all levels.

6. Improved Developer Experience: Biome provides enhanced error reporting, making it easier to diagnose and fix issues in your code. Its comprehensive documentation and active community support further enhance the overall developer experience.

7. Future-Ready: Biome is continuously evolving, with plans to expand its language support and introduce features like a transpiler in the future. This forward-looking approach ensures that Biome will continue to be a relevant and powerful tool in the web development ecosystem.

These factors make Biome a strong candidate for developers looking to streamline their development process with a fast, reliable, and comprehensive tool for both linting and formatting.

Quick Comparison

Feature	Biome	Prettier + ESLint
Speed	Very fast (Rust-based)	Slower (JavaScript-based)
Setup	Single tool	Multiple tools
Configuration	Minimal	Often complex
Functionality	Formatter + Linter	Separate tools
Language Support	Growing	Extensive

Potential Limitations of Biome

While Biome offers many advantages, it’s important to consider potential drawbacks:

1. Ecosystem Maturity: As a newer tool, Biome’s ecosystem is less mature compared to ESLint and Prettier.
2. Plugin Availability: Fewer plugins are available compared to ESLint’s extensive collection.
3. Language Support: While expanding, Biome currently supports fewer languages than Prettier.

Getting Started with Biome in a New Project

Let’s walk through how to set up Biome in a new Next.js project. If you’re integrating Biome into an existing project, feel free to skip the initial setup steps.

1: Create a Next.js App

First, create a new Next.js application:

npx create-next-app@latest

During setup, choose any settings you prefer, but make sure to disable ESLint since Biome will take care of that for us.

Afterwards, navigate to your project directory:

cd my-app

2: Add Biome

Next, install Biome and initialize it:

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

After running the above commands, Biome will provide some helpful information:

2.1. Set up an editor extension:

Get live error feedback as you type and format on save. Learn more.

2.2. Try a command:

biome check checks formatting, import sorting, and lint rules. biome --help displays available commands.

2.3. Migrate from ESLint and Prettier:

biome migrate eslint migrates your ESLint configuration to Biome. biome migrate prettier migrates your Prettier configuration to Biome.

2.4. Read the documentation:

Explore the Biome documentation for more guides and details.

2.5. Get involved with the community:

Ask questions and contribute on GitHub. Seek help on Discord.

3: Install the Biome VSCode Extension

For this example, we’ll use the Biome extension for VSCode. Install it from the Visual Studio Marketplace.

4: Configure Editor Settings

4.1 To enable Biome in VSCode, update your settings.json file:

• If you want to use Biome for all your projects, modify your global VSCode settings.
• If you prefer to use Biome only in specific workspaces, create a .vscode/settings.json file in your project.

Add the following configuration:

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": true
  }
}

4.2 To enable Biome in Zed, update your settings.json file:

{
  "formatter": {
    "external": {
      "command": "./node_modules/@biomejs/biome/bin/biome",
      "arguments": ["check", "--write", "--stdin-file-path", "{buffer_path}"]
    }
  }
}

Formatter can also be added to specific language:

{
  "languages": {
    "Svelte": {
      "formatter": {
        ...
      }
    }
  }
}

Biome Zed extension reference
Biome Zed extension.
Use biome as custom formatter #6673.

You’re All Set!

Your setup is complete. For further configuration and customization, check out the Biome Documentation.