Biome 완벽 가이드: 초고속 린터 & 포맷터

Biome (formerly Rome) is a high-performance toolchain for JavaScript, TypeScript, JSX, TSX, JSON, and CSS. Written in Rust, it combines formatting, linting, and import sorting into a single binary that runs up to 35x faster than ESLint and Prettier combined. Biome provides 97% Prettier compatibility for formatting, over 280 lint rules including many from ESLint and TypeScript-ESLint, and requires zero configuration to get started. If you want one fast tool to replace your entire code quality pipeline, Biome is the leading choice in 2026.

What Is Biome?

Biome is an open-source toolchain for web development that provides a formatter, linter, and import organizer for JavaScript, TypeScript, JSX, TSX, JSON, CSS, and GraphQL. It was created as a continuation of the Rome project and released its first stable version (1.0) in August 2023. The project is maintained by the Biome core team and a growing community of contributors.

Unlike the traditional JavaScript tooling stack where you need ESLint for linting, Prettier for formatting, and eslint-plugin-import or trivial-import-sort for organizing imports, Biome handles all three in a single binary. This eliminates dependency conflicts, simplifies configuration, and dramatically reduces execution time. Biome parses your code once and runs all checks in a single pass.

Why Is Biome So Fast?

Biome is written in Rust, a systems programming language known for memory safety and zero-cost abstractions. Rust allows Biome to achieve performance that is impossible in JavaScript-based tools. The key technical reasons for its speed are:

• Rust compiled binary: Biome compiles to native machine code. There is no JavaScript runtime overhead, no V8 JIT warm-up, and no garbage collection pauses during execution.
• Single-pass architecture: Biome parses each file once into a concrete syntax tree (CST) and runs formatting, linting, and import sorting on that same tree. ESLint + Prettier parse the file twice with separate ASTs.
• Parallel processing: Biome processes multiple files simultaneously using Rust threads. JavaScript tools are limited by the single-threaded nature of Node.js unless they spawn worker processes.
• Zero-copy parsing: The Biome parser operates on string slices without copying data, reducing memory allocations and cache misses compared to JavaScript object-based ASTs.
• No plugin overhead: Unlike ESLint where each plugin adds visitor traversals and rule evaluations, Biome rules are compiled into the binary and execute without dynamic dispatch.

Installation and Getting Started

Biome can be installed as a project dependency or used standalone. The recommended approach is to install it as a dev dependency so that every team member uses the same version.

# Install as a dev dependency (recommended)
npm install --save-dev --save-exact @biomejs/biome

# Or with other package managers
pnpm add --save-dev --save-exact @biomejs/biome
yarn add --dev --exact @biomejs/biome
bun add --dev --exact @biomejs/biome

# Initialize biome.json
npx @biomejs/biome init

# Run formatter
npx @biomejs/biome format --write ./src

# Run linter
npx @biomejs/biome lint ./src

# Run everything (format + lint + import sorting)
npx @biomejs/biome check --write ./src

biome.json Configuration

The biome.json file is the single configuration file for all Biome features. It controls formatter settings, linter rules, import sorting behavior, and file handling. Biome works with zero configuration, but biome.json lets you customize every aspect.

You can generate a starter biome.json by running biome init. The file supports JSON with comments for documentation purposes. Configuration is organized into top-level sections: formatter, linter, organizeImports, javascript, typescript, json, and css.

// biome.json - Complete configuration example
{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",

  // Formatter settings
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "lineEnding": "lf"
  },

  // Linter settings
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "suspicious": {
        "noExplicitAny": "warn",
        "noDoubleEquals": "error"
      },
      "style": {
        "useConst": "error",
        "noVar": "error",
        "useTemplate": "error"
      },
      "complexity": {
        "noForEach": "warn"
      }
    }
  },

  // Import sorting
  "organizeImports": {
    "enabled": true
  },

  // JavaScript-specific options
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "all",
      "semicolons": "always",
      "arrowParentheses": "always"
    }
  },

  // Files configuration
  "files": {
    "ignore": [
      "dist/",
      "build/",
      "node_modules/",
      "*.min.js",
      "coverage/"
    ],
    "maxSize": 1048576
  }
}

Formatting Rules and Options

The Biome formatter is 97% compatible with Prettier output. It supports all the formatting options that Prettier provides, including indent style, indent width, line width, quote style, semicolons, and trailing commas. The formatter works on JavaScript, TypeScript, JSX, TSX, JSON, and CSS files.

Unlike Prettier, Biome does not require a separate .prettierrc file. All formatting options live in biome.json under the formatter and language-specific sections. If you are migrating from Prettier, Biome can read your .prettierrc and convert it automatically.

// Formatting options in biome.json
{
  "formatter": {
    "indentStyle": "space",     // "space" | "tab"
    "indentWidth": 2,           // 1-24 (default: 2)
    "lineWidth": 80,            // 1-320 (default: 80)
    "lineEnding": "lf"          // "lf" | "crlf" | "cr"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",   // "double" | "single"
      "jsxQuoteStyle": "double",// "double" | "single"
      "semicolons": "always",   // "always" | "asNeeded"
      "trailingCommas": "all",  // "all" | "es5" | "none"
      "arrowParentheses": "always", // "always" | "asNeeded"
      "bracketSpacing": true,   // true | false
      "bracketSameLine": false  // true | false
    }
  }
}

// Run formatter in check mode (no writes)
// npx @biomejs/biome format ./src

// Run formatter and apply changes
// npx @biomejs/biome format --write ./src

Linting Rules

Biome provides over 280 lint rules organized into groups. Each group focuses on a specific category of code quality. Rules can be enabled, disabled, or set to warn level. Many rules include safe automatic fixes that can be applied with the --write flag.

• recommended: A curated set of rules enabled by default that catch common bugs and enforce best practices. This is the default when no rules are explicitly configured.
• suspicious: Rules that detect code patterns that are likely bugs, such as duplicate object keys, comparisons with NaN, or confusing void expressions.
• correctness: Rules that catch definitely incorrect code, such as unreachable code, invalid constructors, or void type returns in non-void functions.
• style: Rules that enforce consistent code style, such as using const over let, template literals over string concatenation, and optional chaining.
• complexity: Rules that flag overly complex code patterns like excessive nesting, long parameter lists, and unnecessary type assertions.
• performance: Rules that catch potential performance issues like accumulating spread in loops, forcing layout reflows, and unnecessary re-renders.
• a11y: Accessibility rules for JSX that check for missing alt attributes, invalid ARIA roles, missing form labels, and other WCAG violations.
• security: Rules that detect security issues like dangerouslySetInnerHTML usage without sanitization and open redirect vulnerabilities.

// Linter configuration examples in biome.json
{
  "linter": {
    "enabled": true,
    "rules": {
      // Enable all recommended rules
      "recommended": true,

      // Customize individual groups
      "suspicious": {
        "noExplicitAny": "warn",
        "noDoubleEquals": "error",
        "noShadowRestrictedNames": "error",
        "noImplicitAnyLet": "error"
      },
      "correctness": {
        "noUnusedVariables": "error",
        "noUnusedImports": "error",
        "useExhaustiveDependencies": "warn"
      },
      "style": {
        "useConst": "error",
        "noVar": "error",
        "useTemplate": "error",
        "useOptionalChain": "error",
        "useNullishCoalescing": "error"
      },
      "performance": {
        "noAccumulatingSpread": "error",
        "noDelete": "warn"
      },
      "a11y": {
        "useAltText": "error",
        "useAriaPropsForRole": "error",
        "noBlankTarget": "error"
      }
    }
  }
}

// Run linter
// npx @biomejs/biome lint ./src

// Run linter and apply safe fixes
// npx @biomejs/biome lint --write ./src

// Run linter with unsafe fixes (may change semantics)
// npx @biomejs/biome lint --write --unsafe ./src

Import Sorting

Biome includes built-in import sorting that replaces eslint-plugin-import-sort, trivial-import-sort, and similar tools. When enabled, Biome automatically groups and sorts import statements according to a consistent convention. It separates external dependencies from internal modules and sorts alphabetically within each group.

Import sorting is enabled by default when you run biome check --write or biome format --write. You can configure it in biome.json under the organizeImports section. The sorting respects side-effect imports (bare imports like "import ./polyfills") and keeps them in their original position.

// Before: unsorted imports
import { useState, useEffect } from "react";
import "./styles.css";
import { Button } from "@/components/Button";
import axios from "axios";
import { z } from "zod";
import { formatDate } from "@/utils/date";
import React from "react";

// After: Biome-sorted imports
import React, { useEffect, useState } from "react";
import axios from "axios";
import { z } from "zod";

import { Button } from "@/components/Button";
import { formatDate } from "@/utils/date";

import "./styles.css";

// biome.json import sorting config
// {
//   "organizeImports": {
//     "enabled": true
//   }
// }

Migrating from ESLint and Prettier

Biome provides a dedicated migrate command that reads your existing ESLint and Prettier configuration files and converts them into biome.json equivalents. This automates the most tedious part of the migration process.

The migration tool handles .eslintrc (JSON, YAML, JS), eslint.config.js (flat config), .prettierrc, and prettier.config.js files. It maps ESLint rules to their Biome equivalents where they exist and warns about rules that have no Biome counterpart.

After migration, you can remove eslint, prettier, and their plugin dependencies from your package.json. This typically removes 10-30 packages from your dependency tree, simplifying maintenance and reducing install times.

# Step 1: Install Biome
npm install --save-dev --save-exact @biomejs/biome

# Step 2: Migrate ESLint config to biome.json
npx @biomejs/biome migrate eslint
# Reads .eslintrc.json / eslint.config.js and updates biome.json

# Step 3: Migrate Prettier config to biome.json
npx @biomejs/biome migrate prettier
# Reads .prettierrc and updates biome.json formatter section

# Step 4: Verify no regressions
npx @biomejs/biome check ./src

# Step 5: Apply formatting with Biome
npx @biomejs/biome check --write ./src

# Step 6: Remove old dependencies
npm uninstall eslint prettier eslint-config-prettier \
  eslint-plugin-react eslint-plugin-react-hooks \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin \
  eslint-plugin-import

# Step 7: Update package.json scripts
# Replace:
#   "lint": "eslint . && prettier --check ."
# With:
#   "lint": "biome check ./src",
#   "lint:fix": "biome check --write ./src"

# Step 8: Delete old config files
# rm .eslintrc.json .prettierrc .eslintignore .prettierignore

CI/CD Integration

Biome integrates seamlessly into CI/CD pipelines. The biome ci command is specifically designed for continuous integration environments. It runs the formatter in check mode (reporting errors without modifying files), runs all enabled lint rules, and verifies import sorting. The command exits with a non-zero code if any check fails.

Biome also provides a GitHub Action (biomejs/setup-biome) that installs and caches the Biome binary for fast CI runs. The action supports version pinning and works with all GitHub-hosted runners.

# GitHub Actions workflow (.github/workflows/ci.yml)
name: CI
on: [push, pull_request]

jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Biome
        uses: biomejs/setup-biome@v2
        with:
          version: latest

      - name: Run Biome checks
        run: biome ci ./src

# Or using npm in your CI pipeline:
# npx @biomejs/biome ci ./src
#
# biome ci exits with code 1 if any check fails:
#   - Formatting violations
#   - Lint errors
#   - Unsorted imports

Pre-commit Hook

# Using Husky + lint-staged for pre-commit
# package.json
{
  "lint-staged": {
    "*.{js,ts,jsx,tsx,json,css}": [
      "biome check --write --no-errors-on-unmatched"
    ]
  }
}

# Or using lefthook (lefthook.yml)
pre-commit:
  commands:
    biome:
      glob: "*.{js,ts,jsx,tsx,json,css}"
      run: npx @biomejs/biome check --write --no-errors-on-unmatched --staged {staged_files}

Editor Integration

Biome provides official extensions for VS Code, IntelliJ-based IDEs, and Neovim. The VS Code extension is the most feature-complete, offering real-time linting diagnostics, format-on-save, quick-fix code actions, and import sorting.

VS Code

Install the Biome extension from the VS Code marketplace. Then add these settings to your .vscode/settings.json to enable format-on-save and make Biome the default formatter for supported languages.

// .vscode/settings.json
{
  // Set Biome as default formatter
  "editor.defaultFormatter": "biomejs.biome",

  // Format on save
  "editor.formatOnSave": true,

  // Enable code actions on save
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },

  // Language-specific overrides
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[css]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

Neovim

For Neovim, Biome supports the Language Server Protocol (LSP). You can configure it with nvim-lspconfig or any LSP client. The LSP provides diagnostics, formatting, code actions, and import sorting.

-- Neovim LSP config for Biome (nvim-lspconfig)
require("lspconfig").biome.setup({
  cmd = { "npx", "@biomejs/biome", "lsp-proxy" },
  root_dir = require("lspconfig.util").root_pattern("biome.json"),
  single_file_support = false,
})

-- Format on save with Biome
vim.api.nvim_create_autocmd("BufWritePre", {
  pattern = { "*.js", "*.ts", "*.jsx", "*.tsx", "*.json", "*.css" },
  callback = function()
    vim.lsp.buf.format({ async = false })
  end,
})

Biome vs ESLint + Prettier

Understanding the trade-offs between Biome and the traditional ESLint + Prettier stack helps you decide which tool is right for your project.

Choose Biome if speed, simplicity, and minimal configuration are priorities and you do not need custom ESLint rules or framework-specific plugins beyond React. Choose ESLint + Prettier if you need Vue/Angular/Svelte plugins, custom rules, or the full ESLint ecosystem. Many teams use Biome for new projects and ESLint for existing projects with complex plugin dependencies.

Advanced Configuration

Biome supports advanced configuration patterns for monorepos, per-directory overrides, and language-specific settings. The overrides section in biome.json lets you apply different rules to different file patterns, similar to ESLint flat config.

// biome.json - Advanced overrides
{
  "linter": {
    "rules": {
      "recommended": true
    }
  },

  "overrides": [
    {
      // Relax rules for test files
      "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.test.tsx"],
      "linter": {
        "rules": {
          "suspicious": {
            "noExplicitAny": "off"
          },
          "complexity": {
            "noForEach": "off"
          }
        }
      }
    },
    {
      // Different formatting for JSON config files
      "include": ["*.json"],
      "formatter": {
        "indentWidth": 4
      }
    },
    {
      // Disable formatting for generated files
      "include": ["src/generated/**"],
      "formatter": { "enabled": false },
      "linter": { "enabled": false }
    }
  ]
}

Monorepo Setup

In a monorepo, you can place a biome.json at the root for shared settings and use the extends property in package-specific biome.json files to inherit and override rules. Biome automatically discovers the nearest biome.json when processing a file.

// Root biome.json (shared settings)
{
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "linter": {
    "rules": {
      "recommended": true
    }
  },
  "organizeImports": { "enabled": true }
}

// packages/frontend/biome.json
{
  "extends": ["../../biome.json"],
  "linter": {
    "rules": {
      "a11y": {
        "useAltText": "error",
        "useAriaPropsForRole": "error"
      }
    }
  }
}

// packages/api/biome.json
{
  "extends": ["../../biome.json"],
  "linter": {
    "rules": {
      "a11y": {
        "recommended": false
      }
    }
  }
}

Performance Benchmarks

Biome consistently outperforms ESLint and Prettier in benchmarks across projects of all sizes. On a typical React project with 1,000 TypeScript files, Biome completes formatting and linting in under 500ms while ESLint + Prettier takes 10-15 seconds. The speed advantage grows with project size.

In CI environments, Biome reduces code quality check times from minutes to seconds. Teams report 90-95% reduction in lint/format CI step duration after migrating to Biome. This directly translates to faster feedback loops and shorter PR review cycles.

# Benchmark: 1,000 TypeScript files (React project)
#
# Tool                    Time         Files/sec
# ----                    ----         ---------
# Biome (format+lint)     0.45s        2,222
# Prettier (format)       4.2s         238
# ESLint (lint)           8.7s         115
# ESLint+Prettier         12.9s        78
#
# Speedup: Biome is ~29x faster than ESLint+Prettier
#
# CI impact (real-world monorepo, 5,000 files):
#   Before (ESLint+Prettier): 47s
#   After (Biome):            1.8s
#   Reduction:                96%

Best Practices

• Start with the recommended rule preset and customize from there. The defaults are well-chosen and catch the most important issues without being overly strict.
• Enable import sorting from the start. It eliminates merge conflicts in import blocks and keeps your codebase consistent.
• Use biome check --write in your pre-commit hook to auto-format, auto-fix, and sort imports before every commit.
• Pin the Biome version in your package.json to avoid formatting differences between team members using different versions.
• Use the biome ci command in your CI pipeline. It is optimized for non-interactive environments and provides clear error output.
• Configure your editor extension to format on save. This catches issues immediately and prevents CI failures.
• Review Biome release notes with each update. New rules and formatter improvements are added regularly.
• Use the overrides section for test files that need relaxed rules, such as allowing magic numbers or console statements.

Frequently Asked Questions