DEV Community

Cover image for Simplifying Code Quality with a Unified Biome Configuration
Reza Owliaei
Reza Owliaei

Posted on

Simplifying Code Quality with a Unified Biome Configuration

#linter #biome #eslint #prettier

Tired of juggling ESLint, Prettier, and import sorters just to keep your code clean? You’re not alone.

Modern development shouldn’t be slowed down by a fragmented toolchain.

This post introduces Biome: a fast, modern alternative to the legacy combo of ESLint + Prettier + plugins. With just one tool, one config, and one command, Biome handles formatting, linting, and organizing imports—without the overhead.

This guide is for developers looking to simplify tooling, increase speed, and write consistent code with fewer tools.

What Is Biome?

Biome is a single, unified CLI tool (written in Rust) that replaces:

  • ESLint + plugins
  • Prettier
  • lint-staged and husky scripts
  • Sorting tools like eslint-plugin-import

It provides:

  • Formatting
  • Linting (both bug-catching and style)
  • Import sorting
  • Git-aware checks (--staged, --changed, --since)
  • Fast performance out of the box

You configure it all in one place: biome.json.

Installing Biome

Install Biome using your preferred package manager:

Using Bun 

bun add -D -E @biomejs/biome
bunx @biomejs/biome init
Enter fullscreen mode Exit fullscreen mode

Using npm 

npm i -D -E @biomejs/biome
npx @biomejs/biome init
Enter fullscreen mode Exit fullscreen mode

This will create a base biome.json config in your project.

Biome in Action

Here are the main commands you’ll use:

  • biome check – runs formatting, linting, and import sorting together. Use --write to apply fixes.
  • biome format – formats only.
  • biome lint – lints only.
  • biome ci – read-only, used in CI pipelines.
  • Use --staged, --changed, or --since=origin/main with any command to scope it to Git changes.

Why I Chose Biome (Configuration Philosophy)

Biome solves real-world pain points from the old ecosystem:

  1. One tool, zero glue code. No more connecting Prettier to ESLint with plugins and linters to formatters.

  2. Catch real bugs, not nitpicks. Biome includes useful rules like:

  • noUndeclaredVariables
  • noDoubleEquals
  • noAccumulatingSpread

  1. Flexible rule levels. You can mark style rules as warnings and true problems as errors.

  2. Context-aware overrides. Need to allow console.log in tests or default export in Next.js pages? Overrides make that easy.

  3. Modern tooling mindset. Supports monorepos, CI-first workflows, Git-aware scanning, and blazing speed from Rust.

My Biome Config (from real projects)

You can find the complete, production-ready config I use here:

🔗 View the biome.json on GitHub Gist

Highlights include:

  • Tabs instead of spaces (accessibility-friendly)
  • 100 character line width
  • Git-aware scanning via vcs config

  • Overrides for:

    • test files (console.log allowed)
    • Next.js layouts/pages (default export allowed)
    • config files (vite.config.ts, etc.)

  • Global test functions like describe, it, expect, etc.

Feel free to copy and adapt it.

Suggested package.json Scripts

For smooth local dev experience:

{
  "scripts": {
    "check": "biome check .",
    "check:fix": "biome check --write .",
    "lint": "biome lint .",
    "lint:fix": "biome lint --write .",
    "fmt": "biome format .",
    "fmt:fix": "biome format --write .",
    "check:staged": "biome check --staged --write"
  }
}
Enter fullscreen mode Exit fullscreen mode

These commands let you quickly check everything or apply fixes, locally or in CI.

Pre-commit Hook with Husky

To prevent broken code from being committed, run Biome only on staged files:

npx husky-init && npm install
echo 'biome check --staged --write' > .husky/pre-commit
chmod +x .husky/pre-commit
Enter fullscreen mode Exit fullscreen mode

This ensures formatting, import order, and critical lint rules are enforced before every commit.

CI Integration (GitHub Actions)

Use this to run Biome on pull requests and pushes:

name: code-quality
on: [push, pull_request]

jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: biomejs/setup-biome@v2
      - run: biome ci --changed
Enter fullscreen mode Exit fullscreen mode

This checks only files changed in the PR, keeping CI fast and focused.

Editor Integration (VS Code)

Install the Biome VS Code Extension, then add the following to .vscode/settings.json:

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

This enables automatic formatting, import sorting, and rule fixes on save.

Monorepo Support (Nx / Turborepo)

Biome supports nested configuration out of the box.

Example setup:

At the root (biome.json) 

{
  "linter": { "rules": { "recommended": true } },
  "formatter": { "lineWidth": 100 }
}
Enter fullscreen mode Exit fullscreen mode

Inside a package (e.g., packages/web/biome.json) 

{
  "extends": ["//"],
  "root": false
}
Enter fullscreen mode Exit fullscreen mode

This allows per-package customizations while inheriting defaults from the root.

Final Thoughts

Biome is the next step in code quality:

  • No more endless plugins
  • No more syncing configs across tools
  • Just one file and one command to format, lint, and sort

For developers starting fresh, Biome offers a clean, modern, and efficient approach to code quality—and makes legacy stacks feel like a thing of the past.

Want help adopting Biome in your project? Have questions or examples to share? Let me know in the comments or reach out directly.

Top comments (0)