Nevermind

Goodbye Rome, Hello Biome: A New All-in-One Frontend Toolchain

2 min

1. “Tool Fatigue” in Frontend Development

In modern frontend development, a project usually needs a complex combination of tools to run smoothly:

  • Linter: ESLint checks the quality of JavaScript/TypeScript code.
  • Formatter: Prettier keeps code style consistent.
  • Compiler: Babel or TypeScript (tsc) transforms code.
  • Bundler: Webpack, Rollup, or Vite bundles the application.

Managing these tools’ configurations, plugins, versions, and interactions is a substantial job in itself. This is what is known as “tool fatigue.” For years, the community has explored the possibility of an all-in-one toolchain, hoping that one tool could solve every problem.

2. Rome’s Vision and the Birth of Biome

Rome was an ambitious project started by former Facebook employee and Babel author Sebastian McKenzie. It aimed to rewrite the entire frontend toolchain in TypeScript. Its vision was to provide a zero-configuration, high-performance unified tool. After years of development and attempts at commercialization, however, Rome Labs announced in 2023 that it would cease operations.

Fortunately, Rome’s core code was open source. The community acted quickly, creating a fork named Biome and placing it under the maintenance of a dedicated community organization to carry on and realize Rome’s original vision.

3. What Is Biome?

Biome is a high-performance frontend toolchain rewritten in Rust. It aims to provide a unified, extremely fast development experience that can replace a series of independent tools such as ESLint and Prettier.

By the end of 2023, Biome’s core functionality was focused mainly on its Linter and Formatter, where it had already demonstrated remarkable strength.

Main advantages:

  • Outstanding performance: Thanks to Rust, Biome runs far faster than ESLint and Prettier, which are written in JavaScript. For large codebases, the improvement can reach an order of magnitude.
  • Unified configuration: A single biome.json file manages the behavior of every tool, replacing scattered files such as .eslintrc, .prettierrc, and .editorconfig.
  • Detailed diagnostics: Biome’s Linter not only identifies errors but also provides extensive context and suggested fixes, helping developers understand the root cause.
  • Prettier compatibility: Biome’s formatter aims to be compatible with more than 95% of Prettier’s rules, keeping migration costs from Prettier very low.

4. Getting Started

You can quickly try Biome in your project through npx:

# 检查当前项目中的代码问题
npx @biomejs/biome check ./src

# 自动修复可修复的 lint 问题
npx @biomejs/biome check --apply ./src

# 格式化代码
npx @biomejs/biome format --write ./src

Create a biome.json file to customize rules and configuration:

{
  "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

5. Looking Ahead

Biome has a very clear roadmap: after stabilizing the Linter and Formatter, it plans to implement a Compiler, Bundler, Test Runner, and other features step by step, ultimately becoming a true all-in-one toolchain.

Although it is still young, Biome’s excellent performance, open community-driven model, and focus on developer experience have already made it a new force that cannot be ignored in frontend tooling. For teams seeking to simplify their tool stack and improve development efficiency, Biome offers a highly attractive option for the future.

Biome Rome Lint Formatter Tooling