ESLint was a game-changer in 2013, significantly shifting the development flow into a new paradigm, and has since become an essential tool. However, it's also been a pain to work with, plagued by its own set of problems.

A decade later, Biome has arrived, addressing those issues and positioning itself to take ESLint's place.

Bold statement?

I thought so too, until I implemented Biome at my previous company and witnessed its greatness firsthand.

ESLint

Linting is a necessary tool in modern web development, and ESLint is one of the most well-known and popular options. However, despite its usefulness, ESLint can be a source of frustration for developers. Some common pain points include:

• Complex setup: Configuration can be cumbersome, with compatibility issues arising from certain libraries, plugins, and IDEs.
• Overwhelming options: The vast number of configuration options can be daunting, especially for beginners creating custom configurations.
• Performance overhead: ESLint can slow down development workflows, particularly in large codebases. Frequent runs, especially when integrated into CI/CD pipelines, can take up to 5-20 seconds.
• Rules conflicts: Different rules or plugins can cause conflicts, requiring additional configuration and troubleshooting.
• Steep learning curve: ESLint can be challenging for new JavaScript developers to learn and master.
• Additional dependencies: Formatters like Prettier must be installed separately, adding to the overall setup complexity.

As you can see, frustrations run deep within the community.

Biome

• Written in Rust
• Linter & formatter in one
• Faster than Prettier when formatting (~35x)
• Total of 303 rules, more than ESLint
• Automatic fix, distinguishes between safe and unsafe code fixes
• Zero configuration needed to get started
• Simple migration from ESLint

How to Implement

1. Delete ESLint and Prettier extensions in VSCode
2. Install Biome from npm in project repo
3. Install Biome extension
4. Set default formatter in VSCode to Biome and update settings.json
5. A basic setup is done just like that!

Checkout the official Biome Documentation

Here's a basic example of what the default Biome.json looks like in the project root

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": { "ignoreUnknown": false, "ignore": [] },
  "formatter": { "enabled": true, "indentStyle": "tab" },
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": { "recommended": true }
  },
  "javascript": { "formatter": { "quoteStyle": "double" } }
}

Congratulations! With Biome, your entire organization can now reap the benefits. Say goodbye to waiting 20 seconds every time you commit and another 20 seconds during merges in your CI pipeline. In my previous role, I implemented Biome and saw commit times drop to just 1-2 seconds.