Biome.js: Why I Switched and You Should Too

Hi folks,
Welcome again! I hope you are doing well. I am thrilled to see you here. So today, we will discuss about the BiomeJs and why i switched.

Introduction

Biome.js is a Rust-powered powerhouse that is revolutionizing JavaScript and TypeScript workflows. It combines lightning-fast code formatting, linting, and project organization into a single, cohesive tool. As a senior frontend developer working on React and Angular projects, I’ve seen firsthand how fragmented toolchains—such as ESLint paired with Prettier—can slow down development sprints. Biome addresses this problem directly, delivering 10–100× speed improvements with almost zero configuration.

I finally abandoned my old setup last month after a particularly painful CI run that spent around 10 minutes on linting alone. With Biome, the same process completes in seconds. In this blog, we’ll explore why Biome deserves a spot in your workflow, from the basics to seamless code editor integration.

What Exactly is Biome.js?

Biome.js is a comprehensive, all-in-one toolchain purpose-built for modern web development. Emerging from the ashes of the Rome project in mid-2023, it was forked to prioritize stability and performance after Rome’s overly ambitious scope led to maintenance challenges. Written in Rust, Biome delivers blistering speed—often processing over a million lines of code per second—while supporting a broad range of formats, including JavaScript, TypeScript, JSX/TSX, CSS, JSON, GraphQL, and even Markdown for select diagnostics.

At its core, Biome unifies what would normally be several separate tools into a single binary: a Prettier-compatible formatter, an ESLint-style linter with over 400 built-in rules, a code organizer for import sorting, and an upcoming minifier. This batteries-included approach eliminates the friction of juggling multiple dependencies, plugins, and configuration files. With built-in Language Server Protocol (LSP) support, Biome provides real-time feedback directly in your editor, catching issues as you type—an especially powerful advantage for teams working on large monorepos or React and Angular applications with GraphQL integrations.

Additional benefits include 97% compatibility with Prettier’s output, ensuring near-seamless migrations, automatic fixes for most lint violations, and a remarkably small footprint at under 50MB installed.
In benchmarks, Biome consistently outperforms JavaScript-based tooling, making it an excellent choice for CI/CD pipelines where every second matters.

How It Stacks Up Against the Big Names

Get Started with Biome.js

Start a new project or add to existing:

Installation

Kick off with npm:

npm init @biomejs/biome@latest

This generates a biome.json file. A solid starting point for React/Angular:

{
  "$schema": "https://biomejs.dev/schemas/1.9.6/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "lineWidth": 100,
    "formatScriptSingleQuote": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "useFlatMap": "error",
        "noUselessCatch": "warn"
      }
    }
  },
  "organizeImports": { "enabled": true }
}

Formatting with BiomeJS

Got ugly code?
npx @biomejs/biome format –write src/

Example transformation on suboptimal JSX:

Before:

const items=[1,2].map(x=>x*2).flat();
const total=items.reduce((a,b)=>a+b,0);

After:

const items = [1, 2].flatMap((x) => x * 2);
const total = items.reduce((a, b) => a + b, 0);

Integrating Biome.js in Your Code Editor

Real power unlocks in your IDE—live diagnostics beat CLI waits.

VS Code and Cursor

1. Install the official “Biome” extension from the marketplace (supports LSP).
2. Update .vscode/settings.json:

{
  "[javascript][typescript][typescriptreact][json][jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",
    "source.fixAll": true
  },
  "biome.enabled": true,
  "biome.lint": true
}

Cursor (AI-powered VS Code fork) amplifies this: Biome’s errors feed into its autocomplete for instant fixes, ideal for rapid prototyping.

WebStorm

1. Preferences > Plugins > Marketplace > Search “Biome” > Install and restart.
2. Editor > Code Style > JavaScript/TypeScript > Set Formatter to “Biome”.
3. Enable on-save formatting and linting under Tools > Actions on Save.
   Link it to your biome.json for project-wide consistency—flawless for Angular CLI workspaces with TS strict mode.

Pro tip: In a sample React repo with 10k LOC, hot reloads now include instant linting, slashing feedback loops from minutes to milliseconds.

Conclusion

Look, if you’re still chaining ESLint plugins and cursing slow builds, give Biome a shot. It’s not perfect—ESLint’s ecosystem is unbeatable for edge cases—but for 90% of React/Angular work, it’s freed up my brain for actual features.

Try it: clone Biome’s examples repo, run biome check ., and time it. Drop your results below—what’s your current setup? Next post, I’ll dive into monorepo tricks and custom rules. Catch you then! 🚀

Hey, let’s stay in touch!

If you liked this blog, please share it with your friends and colleagues. Connect with FE competency on LinkedIn to read more about such topics.