💻 프로그래밍

Biome

Rust로 작성된 빠른 JavaScript 툴체인

📖 상세 설명

Biome는 Rust로 작성된 초고속 JavaScript/TypeScript 툴체인으로, 포매터(Formatter)와 린터(Linter)를 하나의 도구로 통합한 프로젝트입니다. 기존에 Rome이라는 이름으로 개발되다가 2023년 Biome로 리브랜딩되어 오픈소스 커뮤니티 주도로 활발히 개발되고 있습니다.

Biome의 가장 큰 장점은 압도적인 속도입니다. Rust의 성능을 활용하여 ESLint + Prettier 조합보다 10~20배 이상 빠르게 동작하며, 대규모 프로젝트에서 수십 초 걸리던 린팅 작업을 1초 이내에 완료합니다. 병렬 처리를 지원하여 멀티코어 CPU의 성능을 최대한 활용합니다.

설정이 매우 간단한 것도 큰 장점입니다. ESLint는 수많은 플러그인과 설정이 필요하지만, Biome는 biome.json 하나로 포매팅과 린팅을 모두 설정할 수 있습니다. Prettier와 호환되는 포매팅 규칙을 제공하고, ESLint의 추천 규칙 대부분을 기본 탑재하고 있습니다.

2025년 현재 Biome는 JavaScript, TypeScript, JSX, TSX, JSON, CSS를 지원하며, Vue, Svelte 등 프레임워크 지원도 확대 중입니다. VS Code, JetBrains IDE 플러그인을 제공하고, GitHub Actions에서도 쉽게 사용할 수 있어 CI/CD 파이프라인에 빠르게 통합할 수 있습니다.

💻 코드 예제

// biome.json - Biome 설정 파일
{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noExtraBooleanCast": "error",
        "noUselessConstructor": "warn"
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noConsoleLog": "warn"
      },
      "style": {
        "useConst": "error",
        "noUnusedTemplateLiteral": "error"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always",
      "trailingCommas": "es5"
    }
  },
  "files": {
    "ignore": ["node_modules", "dist", "build", ".next"]
  }
}

// 터미널 명령어
// 1. 설치
npm install --save-dev --save-exact @biomejs/biome

// 2. 초기 설정 생성
npx @biomejs/biome init

// 3. 포맷팅 검사 (변경 없이)
npx @biomejs/biome format ./src

// 4. 포맷팅 적용 (파일 수정)
npx @biomejs/biome format --write ./src

// 5. 린트 검사
npx @biomejs/biome lint ./src

// 6. 린트 자동 수정 (안전한 수정만)
npx @biomejs/biome lint --write ./src

// 7. 포맷팅 + 린팅 + import 정리 한 번에 실행
npx @biomejs/biome check --write ./src

// 8. CI에서 검사 (변경 없이 오류만 체크)
npx @biomejs/biome ci ./src

🗣️ 실무에서 이렇게 말하세요

💬 회의에서
"ESLint랑 Prettier 설정 충돌 때문에 시간 낭비가 심했는데, Biome로 마이그레이션하면 설정 파일 하나로 둘 다 처리되고 CI 시간도 절반으로 줄어들 것 같습니다. 이번 스프린트에 전환 작업 진행해볼까요?"
💬 면접에서
"Biome는 Rust로 작성되어 ESLint 대비 10배 이상 빠른 성능을 제공합니다. Rome 프로젝트에서 포크되어 2023년부터 Biome로 리브랜딩됐고, 포매팅과 린팅을 단일 도구로 통합해서 설정 관리가 훨씬 간편합니다. 저희 팀에서는 모노레포 환경에서 특히 효과를 봤습니다."
💬 코드 리뷰에서
"PR 올리시기 전에 `npx biome check --write .` 한 번 돌려주세요. import 정렬이랑 포매팅이 안 맞아서 CI에서 실패할 것 같아요. pre-commit 훅에 Biome 추가하면 이런 실수 방지할 수 있습니다."

⚠️ 흔한 실수 & 주의사항

ESLint 플러그인 의존성 확인하기

Biome는 아직 ESLint의 모든 플러그인을 지원하지 않습니다. eslint-plugin-react-hooks, eslint-plugin-jsx-a11y 같은 특수 플러그인이 필요하다면 Biome와 ESLint를 함께 사용하거나, 지원 현황을 확인하세요.

버전 고정 없이 설치하기

Biome는 빠르게 발전 중이라 버전 간 규칙이 달라질 수 있습니다. `--save-exact` 플래그로 정확한 버전을 고정하고, 팀 전체가 같은 버전을 사용해야 일관된 결과를 얻을 수 있습니다.

점진적 마이그레이션 권장

기존 프로젝트에서 ESLint + Prettier를 한 번에 제거하지 마세요. Biome를 먼저 추가하고 규칙을 조정한 후, 문제없으면 기존 도구를 제거하는 방식으로 점진적으로 전환하면 안전합니다.

🔗 관련 용어

📚 더 배우기