dev-guide
Biome 완벽 가이드 — ESLint와 Prettier를 하나로 대체하는 Rust 기반 도구
Biome의 린터·포매터 통합 기능, ESLint 대비 25배 빠른 성능, 마이그레이션 전략과 CI 통합 방법을 실무 관점에서 정리하였다.
- ·Biome v1 안정화: 2024년 초
- ·ESLint + Prettier를 하나의 도구로 대체
- ·Rust로 작성되어 ESLint 대비 25배 이상 빠름
- ·JavaScript, TypeScript, JSX, TSX, JSON, CSS 지원
팀 프로젝트에서 ESLint와 Prettier 설정 충돌로 시간을 낭비하던 중 Biome으로 전환하였다. 설정 파일이 하나로 통일되고 CI 린트 시간이 45초에서 3초로 줄어드는 비약적인 성능 향상을 경험하였으며, 설정 관리의 스트레스가 사라졌다.
Biome 등장 배경과 핵심 특징
Biome 도입 전 ESLint + Prettier 조합의 문제점
ESLint와 Prettier를 함께 사용하려면 eslint-config-prettier와 eslint-plugin-prettier 같은 통합 패키지가 추가로 필요하며, 두 도구의 규칙이 충돌하는 경우 원인 파악이 까다롭다. 설정 파일도 .eslintrc, .prettierrc, .eslintignore, .prettierignore, prettier.config.js 등 여러 파일로 분산된다. 패키지 업데이트마다 두 도구 간 호환성을 확인해야 하고, 새 ESLint 플랫 컨피그 방식으로 마이그레이션하면서 추가 학습 비용이 발생하기도 한다. Biome은 동일한 파서와 AST를 사용하는 린터와 포매터를 통합하여 이 복잡성을 원천 제거한다.
// biome.json — 설정 파일 하나로 통일
{
"$schema": "https://biomejs.dev/schemas/1.x/schema.json",
"formatter": { "indentStyle": "space", "indentWidth": 2 },
"linter": {
"enabled": true,
"rules": { "recommended": true }
},
"javascript": {
"formatter": { "quoteStyle": "single", "semicolons": "asNeeded" }
}
}Biome Rust 기반 성능 이점
Biome은 Rust로 작성되어 JavaScript 기반의 ESLint와 Prettier보다 수십 배 빠른 처리 속도를 보인다. 수천 개의 파일을 포함하는 대형 모노레포에서도 전체 린트+포매팅 검사가 수초 내에 완료된다. 병렬 처리를 기본으로 지원하여 멀티코어 CPU를 최대한 활용하며, 증분 분석으로 변경된 파일만 재검사하는 기능도 지원한다. 이 성능 차이는 특히 save-on-format을 사용하는 에디터에서 체감이 크다.
마이그레이션과 설정
ESLint에서 Biome으로 마이그레이션하는 방법
npx @biomejs/biome migrate eslint 명령으로 기존 .eslintrc 설정을 Biome 규칙으로 자동 변환할 수 있다. 모든 ESLint 규칙이 Biome에 구현된 것은 아니므로 변환 후 동등한 Biome 규칙이 없는 항목을 확인하고 대안을 결정해야 한다. 현재 약 200개 이상의 린트 규칙을 지원하며, 지원하지 않는 플러그인이 꼭 필요한 경우 Biome과 해당 플러그인을 병행하는 혼합 전략도 가능하다.
Biome CI/CD 파이프라인 통합 방법
biome ci 명령은 린트와 포매팅 검사를 동시에 실행하며, 오류 시 비제로 종료 코드를 반환하여 CI 실패를 트리거한다. --reporter=github 옵션으로 GitHub Actions 환경에서 PR에 직접 어노테이션이 표시되어 리뷰 효율이 향상된다. biome check --write로 자동 수정도 가능하여 간단한 포매팅 오류는 CI에서 자동으로 수정하고 커밋하는 워크플로우를 구성할 수 있다.
에디터 통합과 팀 도입
Biome VS Code 및 JetBrains 에디터 통합
VS Code, IntelliJ, Neovim 등 주요 에디터의 공식 플러그인이 제공된다. VS Code에서는 biomejs.biome 익스텐션을 설치하고 editor.defaultFormatter를 Biome으로 설정하면 저장 시 자동 포매팅이 적용된다. ESLint 플러그인과 동시에 활성화하면 같은 파일에 두 도구가 경쟁할 수 있으므로, 팀 내에서 Biome으로 통일한 후에는 .vscode/settings.json에서 ESLint 비활성화를 명시하는 것이 좋다.
Biome 팀 도입 전략
기존 ESLint/Prettier 설정을 제거하기 전에 팀 전체가 동일한 Biome 버전을 사용하도록 devDependencies에 고정하고, .vscode/extensions.json에 Biome 플러그인을 권장 익스텐션으로 추가하는 것이 좋다. 기존 코드베이스에 Biome 포매팅을 일괄 적용하는 커밋을 별도로 생성하면 이후 PR에서의 포매팅 diff를 최소화할 수 있다. Husky pre-commit 훅에 biome check를 추가하면 포매팅 오류가 커밋되는 것을 방지할 수 있다.
자주 묻는 질문
Biome이 ESLint를 완전히 대체할 수 있나요?+
일반적인 React/TypeScript 프로젝트에서는 대부분 대체 가능합니다. 매우 특수한 도메인별 ESLint 플러그인(예: i18n, GraphQL)이 반드시 필요한 경우 병행 사용이 필요할 수 있습니다.
Prettier와 포매팅 규칙이 동일한가요?+
90% 이상 호환되지만 일부 엣지 케이스에서 출력이 다를 수 있습니다. 기존 코드를 Prettier로 일괄 포매팅한 뒤 Biome으로 전환하면 전환 후 diff를 최소화할 수 있습니다.