Biome v2가 프론트엔드 툴체인의 표준이 된 이유

2025년 6월 출시된 Biome v2 "Biotype"은 프론트엔드 개발의 고질병이었던 "ESLint + Prettier + 무수한 플러그인 + 충돌하는 설정 파일" 조합을 단일 도구로 통합하는 데 성공했습니다. 2026년 1월 기준 v2.3까지 발전하면서 423개 이상의 린트 규칙, 타입 인식 린팅(type-aware linting), 플러그인 시스템, 도메인 기반 규칙 자동 활성화 기능까지 갖춘 완전체로 자리잡았습니다. Rust로 작성된 덕분에 ESLint 대비 최대 56배, Prettier 대비 약 40배 빠른 속도를 보여주며, 10,000개 파일 린트가 0.8초, 포맷팅이 0.3초 만에 끝납니다. Vercel, Astro, Trivago, American Express 등 실제 프로덕션 환경에서 채택률이 가파르게 상승하고 있습니다.

Biome v1과 v2의 결정적 차이

v1까지는 "빠른 ESLint/Prettier 대체재" 정도였다면, v2부터는 진짜 "차세대 툴체인"이 됐습니다. 핵심 변화 세 가지를 살펴보겠습니다.

1) 타입 인식 린팅 (Type-Aware Linting)

v2의 가장 큰 진전은 TypeScript 컴파일러 없이도 타입 기반 검사를 수행한다는 점입니다. Biome 자체가 .d.ts 파일을 스캔해 모듈 그래프와 추론된 타입 정보를 만들어내는 Scanner를 내장하기 때문에, 외부 도구 의존 없이 다음과 같은 고급 규칙을 사용할 수 있습니다.

// 타입 인식 규칙 예시 (v2부터 가능)
// noFloatingPromises - 처리되지 않은 Promise 감지
async function fetchUser() {
  return fetch('/api/user'); // ✅ OK
}

fetchUser(); // ❌ noFloatingPromises: Promise를 await/then 처리 안 함

// noImportCycles - 순환 참조 감지
// a.ts → b.ts → a.ts 같은 구조 자동 탐지

// noUnresolvedImports - 존재하지 않는 모듈 import
import { foo } from './nonexistent'; // ❌ 컴파일러 없이도 감지

2) 도메인(Domains) 기반 자동 활성화

프로젝트의 package.json 의존성을 분석해서 적합한 규칙을 자동으로 켭니다. React 프로젝트라면 React 관련 규칙, Next.js라면 Next.js 규칙이 알아서 활성화됩니다.

{
  "linter": {
    "domains": {
      "react": "recommended",
      "next": "recommended",
      "test": "all",
      "project": "recommended"
    }
  }
}

3) 플러그인 시스템 (GritQL 기반)

v2부터 GritQL 패턴 매칭 언어로 커스텀 규칙을 작성할 수 있습니다. 정규표현식보다 훨씬 표현력이 강해서 AST 레벨 패턴을 한 줄로 표현 가능합니다.

설치와 초기 설정

Biome는 npm/pnpm/yarn/bun 모든 패키지 매니저에서 동일한 방식으로 설치합니다. CI 환경에서 npx 형태로 실행해도 첫 다운로드 후 바이너리 캐싱이 잘 됩니다.

# 설치 (개발 의존성)
npm install --save-dev --save-exact @biomejs/biome
# 또는
pnpm add --save-dev --save-exact @biomejs/biome
bun add --dev --exact @biomejs/biome

# 초기 설정 파일 생성
npx @biomejs/biome init
# → 프로젝트 루트에 biome.json 생성됨

biome.json 실전 설정

아래는 React + TypeScript 프로젝트에서 바로 쓸 수 있는 권장 설정입니다. 단일 파일로 .eslintrc.js, .prettierrc, .eslintignore, .prettierignore를 모두 대체합니다.

{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "includes": ["src/**", "tests/**"],
    "ignoreUnknown": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "double",
      "semicolons": "always",
      "trailingCommas": "all",
      "arrowParentheses": "always"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "error",
        "noUnusedImports": "error",
        "useExhaustiveDependencies": "warn"
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noConsole": { "level": "warn", "options": { "allow": ["error", "warn"] } }
      },
      "style": {
        "useImportType": "error",
        "useNamingConvention": "off"
      },
      "nursery": {
        "noFloatingPromises": "error",
        "noImportCycles": "error"
      }
    },
    "domains": {
      "react": "recommended",
      "next": "recommended",
      "test": "all"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on",
        "useSortedKeys": "on"
      }
    }
  }
}

핵심 CLI 명령어 정리

Biome는 명령어 체계가 단순합니다. 외워야 할 것은 5개 정도입니다.

# 1) 검사만 (CI에서 사용, 수정 안 함)
npx biome check src/

# 2) 자동 수정 (포맷팅 + 안전한 린트 수정 + import 정리)
npx biome check --write src/

# 3) 더 공격적인 수정 (unsafe fix까지 포함)
npx biome check --write --unsafe src/

# 4) 포맷팅만
npx biome format --write src/

# 5) 린트만
npx biome lint --write src/

# 6) 변경된 파일만 검사 (Git 연동)
npx biome check --changed --since=main

# 7) 특정 파일만
npx biome check src/components/Button.tsx

ESLint/Prettier에서 마이그레이션

Biome는 기존 설정을 자동으로 읽어서 biome.json에 반영하는 마이그레이션 명령을 제공합니다. 수동 변환은 거의 필요 없습니다.

# ESLint 설정 자동 변환 (.eslintrc.js, eslint.config.js 모두 지원)
npx biome migrate eslint --write

# Prettier 설정 자동 변환 (.prettierrc, .prettierrc.json)
npx biome migrate prettier --write

# 두 개 모두 한 번에
npx biome migrate eslint --write && npx biome migrate prettier --write

마이그레이션 후 안전을 위해 다음 단계를 따르는 것을 권장합니다.

# 1단계: 기존 ESLint/Prettier 의존성 제거
npm uninstall eslint prettier eslint-config-prettier eslint-plugin-react \
  eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin

# 2단계: 설정 파일 백업 후 삭제
mv .eslintrc.json .eslintrc.json.bak
mv .prettierrc .prettierrc.bak
rm .eslintignore .prettierignore

# 3단계: package.json 스크립트 정리
# "lint": "eslint ." → "lint": "biome lint ."
# "format": "prettier --write ." → "format": "biome format --write ."
# "check": "biome check --write ."  ← 추천 통합 명령

VSCode/Zed/JetBrains 통합

VSCode에서는 공식 확장(biomejs.biome)을 설치하고 settings.json에 다음을 추가하면 저장 시 자동 포맷 + 린트 수정이 동작합니다.

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[javascript]": { "editor.defaultFormatter": "biomejs.biome" },
  "[typescript]": { "editor.defaultFormatter": "biomejs.biome" },
  "[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" },
  "[json]": { "editor.defaultFormatter": "biomejs.biome" }
}

Git Hook + CI 통합

커밋 직전에 변경된 파일만 검사하려면 lefthook 또는 husky + lint-staged를 사용합니다. Biome 자체에 --staged 플래그가 있어서 lint-staged 없이도 동작합니다.

# package.json
{
  "scripts": {
    "prepare": "lefthook install",
    "check": "biome check --write .",
    "check:ci": "biome check --reporter=github ."
  }
}

# lefthook.yml
pre-commit:
  parallel: true
  commands:
    biome:
      glob: "*.{js,ts,jsx,tsx,json,jsonc}"
      run: npx biome check --write --no-errors-on-unmatched --staged {staged_files}
      stage_fixed: true

GitHub Actions에서는 다음과 같이 사용합니다.

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: biomejs/setup-biome@v2
        with:
          version: 2.3.0
      - run: biome ci --reporter=github .

모노레포(Monorepo)에서 사용

v2부터 정식으로 모노레포를 지원합니다. 루트에 biome.json을 두고, 패키지별로 biome.jsonc로 일부만 오버라이드하는 방식이 권장됩니다.

// 루트 biome.json — 공통 설정
{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "formatter": { "indentWidth": 2 },
  "linter": { "rules": { "recommended": true } }
}

// packages/api/biome.jsonc — 백엔드만 다른 규칙 추가
{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "extends": "//",
  "linter": {
    "rules": {
      "suspicious": { "noConsole": "off" }
    }
  }
}

실전 성능 비교

실제 프로덕션 코드베이스(약 50만 줄, 8,000파일) 기준 측정값입니다.

# ESLint + Prettier (기존)
$ time npm run lint
real    1m23.5s   ← 약 84초

$ time npm run format
real    0m18.2s   ← 약 18초

# Biome v2.3 (마이그레이션 후)
$ time biome check --write .
real    0m1.8s    ← 약 1.8초 (총합 102초 → 1.8초)

CI 빌드 시간이 분 단위에서 초 단위로 떨어지면서, 큰 PR도 부담 없이 lint/format을 강제할 수 있게 됩니다.

v2.4부터 추가된 프레임워크 지원 (실험적)

2026년 2월 출시된 v2.4부터 Vue, Svelte, Astro 단일 파일 컴포넌트(SFC) 파싱과 포맷팅을 실험적으로 지원합니다. 아직 안정 버전은 아니지만 활성화 방법은 다음과 같습니다.

// biome.jsonc
{
  "experimental": {
    "vue": { "enabled": true },
    "svelte": { "enabled": true },
    "astro": { "enabled": true }
  }
}

마이그레이션 시 주의사항

Biome로 갈아탈 때 자주 부딪히는 5가지 함정과 해결법입니다.

# 1) ESLint의 모든 규칙이 1:1 매핑되지는 않음
#    → biome.json의 linter.rules를 직접 검토하면서 누락된 규칙은
#      "nursery" 그룹에 있을 가능성이 높음 (실험적 단계)

# 2) 커스텀 ESLint 플러그인을 많이 쓰던 팀은 GritQL 플러그인으로 재작성 필요
#    → 단순한 패턴은 GritQL이 더 짧고, 복잡한 건 점진 이주 권장

# 3) Prettier의 일부 옵션(예: pluginSearchDirs) 미지원
#    → 대부분의 표준 옵션은 그대로 매핑됨

# 4) .editorconfig 우선순위
#    → biome.json에 명시된 값이 .editorconfig를 덮어씀, 충돌 시 명시적 설정 권장

# 5) 글로벌 설치보다는 프로젝트 로컬 설치 권장
#    → 버전 차이로 인한 포맷 불일치 방지

마무리: 언제 Biome로 갈아타야 할까

2026년 4월 시점에서 Biome v2는 신규 프로젝트에는 무조건 기본 선택지입니다. 기존 프로젝트의 경우, ESLint 빌드 시간이 1분을 넘어가거나, 설정 파일이 너무 복잡해서 유지보수 부담이 큰 팀이라면 즉시 이주를 검토할 만합니다. 한 가지 남은 약점은 풍부한 ESLint 플러그인 생태계인데, 이마저도 v2 플러그인 시스템 도입으로 빠르게 좁혀지고 있습니다. "한 줄 명령으로 lint + format + import 정리"라는 간결함과 56배 속도가 주는 개발자 경험은 한번 맛보면 되돌아가기 어렵습니다.