DEV Community

Alex Spinov
Alex Spinov

Posted on

Biome Has a Free All-in-One Toolchain That Replaces ESLint and Prettier

#biome #eslint #prettier #javascript

Your JavaScript project has ESLint, Prettier, their configs, their plugins, and all their conflicts. Biome replaces all of it with a single Rust-powered tool that is 35x faster.

The Problem 

// A typical project devDependencies
"eslint": "^9.0.0",
"prettier": "^3.0.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-react": "^7.0.0",
"eslint-plugin-import": "^2.0.0",
"@typescript-eslint/parser": "^7.0.0",
"@typescript-eslint/eslint-plugin": "^7.0.0"
Enter fullscreen mode Exit fullscreen mode

7 packages. Conflicting configs. Slow.

The Biome Solution 

npm install --save-dev @biomejs/biome
npx biome init
Enter fullscreen mode Exit fullscreen mode

One package. One config. Done.

Speed Comparison 

# Format 2,000 files
prettier: 4.2 seconds
biome:    0.12 seconds  # 35x faster

# Lint 2,000 files
eslint:   8.1 seconds
biome:    0.23 seconds  # 35x faster
Enter fullscreen mode Exit fullscreen mode

Biome is written in Rust and uses parallel processing.

Configuration 

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": { "enabled": true },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noForEach": "warn",
        "useFlatMap": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn"
      },
      "style": {
        "useConst": "error",
        "noNonNullAssertion": "warn"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "semicolons": "always"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Commands 

# Format files
npx biome format --write ./src

# Lint files
npx biome lint ./src

# Both at once
npx biome check --write ./src

# CI mode (no writes, exit code on errors)
npx biome ci ./src
Enter fullscreen mode Exit fullscreen mode

280+ Lint Rules

Biome includes rules from:

  • ESLint core
  • TypeScript ESLint
  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-plugin-jsx-a11y
  • eslint-plugin-unicorn
  • eslint-plugin-import

...all built-in, no plugins to install.

Import Sorting 

// Before
import { z } from "zod";
import React from "react";
import { db } from "./db";
import path from "node:path";
import { Button } from "./components";

// After (biome format --write)
import path from "node:path";
import React from "react";
import { z } from "zod";
import { Button } from "./components";
import { db } from "./db";
Enter fullscreen mode Exit fullscreen mode

Automatic import organization — built-in, not a plugin.

Editor Integration

  • VS Code: Biome extension (real-time linting + format on save)
  • IntelliJ: Biome plugin
  • Neovim: LSP support
  • Zed: Built-in support

Migration from ESLint + Prettier 

# Auto-migrate your ESLint config
npx biome migrate eslint --write

# Auto-migrate your Prettier config  
npx biome migrate prettier --write
Enter fullscreen mode Exit fullscreen mode

Biome reads your existing configs and generates equivalent biome.json.

Need help optimizing your development workflow? I build developer tools and data solutions. Email spinov001@gmail.com or check my Apify tools.

Top comments (0)