Setting up a new React or Next.js project can sometimes feel like a chore. You install ESLint, then Prettier, and soon they start conflicting over trivial matters like semicolons. You end up downloading eslint-config-prettier to resolve these conflicts, and before you know it, you've spent an hour just configuring your linting tools.😩

There is a better way. Meet Biome. 🚀

What is Biome?

Biome is a web toolchain designed to replace ESLint, Prettier, and more. Written in Rust, it offers incredible speed, but its true advantage lies in its simplicity. ✨

Biome combines formatting and linting into a single tool, eliminating plugin conflicts and the need for lengthy configuration files.

Why Switch to Biome?

1. One Configuration File

With Biome, you only need one file: biome.json. No more managing separate config files for your linter and formatter. They work seamlessly together from the start. 📂

2. Zero Config Defaults

Biome initializes with a modern set of recommended rules enabled by default. You don't need to manually activate rules like "no-unused-vars" or "react-hooks/exhaustive-deps". Biome knows what you need.

3. Ease of Use

Biome is strict enough to catch bugs but forgiving enough not to be annoying. Its error messages are helpful and easy to understand. 😊

How to Install Biome

If you're using a package manager like pnpm or npm, adding Biome is straightforward.

Step 1: Install the package

Run this in your terminal:

pnpm add --save-dev --save-exact @biomejs/biome

Step 2: Initialize configuration

Create the configuration file:

pnpm biome init

This generates a biome.json file in your project root, which looks like this:

{
  "$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",
    "lineWidth": 80
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

Notice the "recommended": true under linter rules? That’s doing all the heavy lifting for you! 💪

Migrating from ESLint & Prettier

Most React and Next.js templates come with ESLint pre-installed. You might worry about the hassle of switching.

Biome offers a dedicated command to help you migrate your existing ESLint configuration:

pnpm biome migrate eslint --write

This tool reads your existing ESLint config and migrates equivalent rules into your biome.json, handling much of the tedious mapping for you. 🔄

Common Migration Issue: "Calling module was not recognized"

If you're migrating from a Next.js project, you might encounter an error like this:

✖ Migration has encountered an error: `node` was invoked to resolve...
Error: Failed to patch ESLint because the calling module was not recognized.

This occurs due to how Next.js patches ESLint. Here's a quick fix:

1. Open node_modules/eslint-config-next/index.js

2. Find this line (usually heavily nested or near the top):

   require('@rushstack/eslint-patch/modern-module-resolution')
   

3. Comment it out:

   // require('@rushstack/eslint-patch/modern-module-resolution')
   

Run the migration command again, and it should work perfectly. You can uncomment it later if you plan to keep ESLint around (though you probably won't need to!).🛠️

Biome Setup In Production level apps :

VS Code Setup Guide⚡

To maximize the benefits of Biome, configure it to automatically fix your code every time you save in VS Code. Here's how:

1. Install the Biome extension for VS Code.

2. Create a .vscode folder in your project root.

3. Add a settings.json file inside it with the following content:

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

Now, every time you press SAVE the file, Biome will format your code and organize your imports instantly!

Production-Ready Config biome.json

While the default configuration is excellent, here's a more robust, "battle-tested" configuration which aligns formatting with common React standards (like using spaces instead of tabs) and customizes a few strict linting rules.

{
  "$schema": "https://biomejs.dev/schemas/2.3.10/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "lineEnding": "lf"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "a11y": {
        "useValidAnchor": "off",
        "noLabelWithoutControl": "off"
      },
      "complexity": {
        "noUselessFragments": "warn"
      },
      "style": {
        "noParameterAssign": "off",
        "useNamingConvention": "off"
      },
      "correctness": {
        "noUnusedVariables": "warn",
        "noChildrenProp": "off",
        "useExhaustiveDependencies": "off"
      },
      "suspicious": {
        "noConsole": "off",
        "noArrayIndexKey": "off",
        "noDuplicateJsxProps": "warn"
      }
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "es5",
      "semicolons": "always",
      "arrowParentheses": "always",
      "bracketSpacing": true,
      "bracketSameLine": false
    }
  }
}

Understanding the Configuration

Here's a breakdown of the configuration to help you understand the control you have:

• vcs (Version Control System):

  • "enabled": true and "clientKind": "git" ensure Biome respects your .gitignore file, avoiding linting on ignored files.

• formatter:

  • indentStyle: "space": Switches from tabs to spaces, preferred in the React ecosystem.

  • lineWidth: 100: Allows for slightly longer lines, accommodating modern wide screens better than the default 80 characters.

• linter.rules:

  • recommended: true: Keeps core safety checks active.

  • "off" rules: Disables rules like noConsole and strict accessibility checks (useValidAnchor) that might be excessive for internal apps or prototypes.

  • "warn" rules: Sets rules like noUnusedVariables to "warn" to catch your attention without breaking the build.

• javascript.formatter:

  • quoteStyle: "single": Enforces single quotes (') over double quotes.

  • trailingCommas: "es5": Adds trailing commas where valid in ES5, leading to cleaner git diffs when adding new items to a list.

Biome offers the best of both worlds: a zero-config start with full customization power when you're ready. Happy coding! 💻

Adding Script:

If your project explicitly runs ESLint via a lint script, replace it with Biome by updating the scripts section in your package.json.

"scripts": {
  ...,
  "format": "biome format --write ."
}

Conclusion

Developers often overcomplicate things by adding tool after tool in search of a "perfect" setup. Biome proves that less is more. It simplifies the development experience so you can focus on what truly matters: writing code. 💻

Try it in your next project. You won't look back! 🌟