Leverage Biome for My Codebase

•
5min
•
0 views

I recently made a switch in my development setup that I'm pretty excited about. I've been using Biome instead of the usual ESLint and Prettier combo, and I wanted to share my experience with you.

Why I Chose Biome

I'll be honest, I was pretty comfortable with ESLint and Prettier. But when I heard about Biome's promises, I couldn't resist giving it a try:

  • Speed Demon: Biome is blazing fast! We're talking 35x faster than Prettier and 15x faster than ESLint. For someone like me who works on larger projects, this is a game-changer.
  • One Tool to Rule Them All: I love simplifying my workflow, and Biome does just that. It combines linting, formatting, and even import sorting into one tool. Fewer dependencies, less configuration headaches!
  • Smart Defaults: Biome comes with rules inspired by popular ESLint plugins, so I didn't feel like I was sacrificing functionality.
Biome simplifies my toolchain

Want to give it a shot? Here's how I set it up:

Install Packages

bun add --dev --exact @biomejs/biome

Initialize Configuration

Run the following command to create a biome.json configuration file:

bunx @biomejs/biome init

This will generate a basic biome.json file:

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

Migrate from ESLint & Prettier

Use these commands to migrate your existing ESLint and Prettier configurations:

bunx @biomejs/biome migrate eslint --write
bunx @biomejs/biome migrate prettier --write

For a more comprehensive migration, including ESLint-inspired rules, use:

bunx @biomejs/biome migrate eslint --write --include-inspired
bunx @biomejs/biome migrate prettier --write

Configure Biome

After migration, you can customize your biome.json file. Here's an example configuration. For a complete list of Biome's linting rules, check out their Rules Source.

biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80,
    "attributePosition": "auto",
    "ignore": [
      "**/dist",
      "**/node_modules",
      "**/.next",
      "**/build",
      "**/.contentlayer"
    ]
  },
  "organizeImports": {
    "enabled": true,
    "ignore": [
      "**/dist",
      "**/node_modules",
      "**/.next",
      "**/build",
      "**/.contentlayer"
    ]
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "a11y": {
        "noSvgWithoutTitle": "off"
      },
      "correctness": {
        "noUnusedVariables": "warn"
      },
      "nursery": {
        "useSortedClasses": "error"
      }
    },
    "ignore": [
      "**/dist",
      "**/node_modules",
      "**/.next",
      "**/build",
      "**/.contentlayer"
    ]
  }
}

Usage

To format your code with Biome, run:

bunx biome format --write .

References

PreviousMy Code Editor SetupNextWebsite Refresh