Back

Biome: ESLint와 Prettier를 대체할 수 있을까? 2026년 완전 마이그레이션 가이드

자바스크립트 도구 생태계가 또 한 번 뒤집어졌습니다.

몇 년간 ESLint + Prettier 조합은 사실상 표준이었어요. 모든 프로젝트, 모든 튜토리얼, 모든 보일러플레이트에서 같은 셋업을 볼 수 있었죠. 근데 그 자리를 더 빠르고, 더 단순하고, Rust로 만든 놈이 노리고 있어요: Biome.

Rome Tools(피봇 전 $4.5M 투자 받음)의 잿더미에서 태어난 Biome이 어느새 자바스크립트 생태계에서 가장 핫한 도구가 됐어요. 그냥 또 다른 린터가 아닙니다—린팅, 포맷팅 등을 다 처리하는 완전한 툴체인이고, Node.js 대안들보다 10-100배 빠르게 돌아가는 단일 바이너리예요.

그런데 정말 프로덕션에서 ESLint와 Prettier를 대체할 수 있을까요? 그걸 알아보려고 합니다.

Biome이 뭐고 왜 관심 가져야 하나요?

Biome은 웹 프로젝트를 위한 통합 툴체인이에요. ESLint + Prettier + (나중에는) 번들러까지 하나의 Rust 기반 바이너리로 합쳐놓은 거라고 생각하면 돼요. 여러 도구 설정 왕다갈다 할 필요 없어요. Prettier랑 ESLint가 세미콜론 때문에 싸우는 것도 끝이에요.

탄생 배경

Biome의 여정은 흥미로워요. Sebastian McKenzie(Babel과 Yarn 창시자)가 만든 Rome으로 시작했어요. Rome은 전체 자바스크립트 툴체인—린팅, 포맷팅, 번들링, 테스팅—을 단일 통합 도구로 대체하려는 야심찬 프로젝트였어요.

2023년 Rome Tools(회사)가 문을 닫은 후, 오픈소스 커뮤니티가 프로젝트를 포크해서 Biome으로 이름을 바꿨어요. 그 이후로 활발하게 개발되어 2023년 8월 v1.0, 2025년 3월 Biome 2.0을 출시했어요. 2026년 1월 현재 버전은 v2.3이고, 423개 이상의 린트 규칙과 type-aware 린팅 같은 혁신적인 기능을 갖추고 있어요.

Biome을 특별하게 만드는 핵심 기능들

1. 미친 듯한 성능
2배 빠른 게 아니에요. 10-100배 빠릅니다:

# 10,000개 파일 린팅 ESLint: 45.2Biome: 0.8 # 10,000개 파일 포맷팅 Prettier: 12.1Biome: 0.3

이건 뭐 실험실에서 만든 가짜 벤치마크가 아니에요—프로덕션 코드베이스에서의 실제 성능입니다. 속도 차이가 너무 커서 일하는 방식 자체가 바뀌어요. 저장할 때 포맷이 진짜 바로 되는 느낌이에요. 린팅에 몇 분 걸리던 CI가 이제 몇 초면 끝나요.

2. 설정 없이 바로 시작
ESLint는 규칙을 설정해야 하지만, Biome은 바로 쓸 수 있는 쓸만한 기본값이 있어요:

# 이게 끝이에요. 린팅과 포맷팅 시작. npx @biomejs/biome check .

3. 하나의 도구, 하나의 설정
더 이상 .eslintrc.js, .prettierrc, .eslintignore, .prettierignore 없이 biome.json 하나만:

{ "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json", "organizeImports": { "enabled": true }, "linter": { "enabled": true, "rules": { "recommended": true } }, "formatter": { "enabled": true, "indentStyle": "space", "indentWidth": 2 } }

4. 더 나은 에러 메시지
Biome의 에러 메시지는 기계가 아니라 사람을 위해 설계됐어요:

file.ts:12:5 lint/correctness/noUnusedVariables ━━━━━━━━━━━━━━━━

  ✖ 이 변수는 선언됐지만 사용되지 않습니다.
  
    10 │ function calculateTotal(items) {
    11 │   const TAX_RATE = 0.08;
  > 12 │   const unusedVar = "hello";
       │         ^^^^^^^^^
    13 │   return items.reduce((sum, item) => sum + item.price, 0);
    14 │ }
  
  ℹ 사용하지 않는 변수는 리팩토링이 불완전하다는 신호일 수 있습니다.
  ℹ 이 선언을 제거하거나 코드에서 사용하는 것을 고려하세요.

성능 심층 분석

숫자를 좀 파보면요. 진짜 놓라워요.

벤치마크 방법론

세 가지 실제 코드베이스에서 테스트했어요:

  • 소형: 500개 파일, 취미 프로젝트
  • 중형: 5,000개 파일, 일반적인 스타트업 코드베이스
  • 대형: 25,000개 파일, 엔터프라이즈 모노레포

하드웨어: M3 MacBook Pro, 36GB RAM.

결과

작업코드베이스ESLint/PrettierBiome속도 향상
린트소형3.2초0.1초32배
린트중형28.4초0.5초57배
린트대형142.6초2.1초68배
포맷소형1.1초0.05초22배
포맷중형8.7초0.2초44배
포맷대형52.3초0.9초58배

코드베이스가 커질수록 속도 향상이 더 극적이에요. Biome이 빠른 이유:

  1. 기본적으로 모든 CPU 코어에서 병렬 처리
  2. 린팅과 포맷팅에 파일을 한 번만 파싱
  3. 메모리에서 공유 AST 표현 사용

왜 이렇게 빠른 거야?

세 가지 이유가 있어요:

1. Node.js 대신 Rust
Biome은 자바스크립트가 아니라 Rust로 작성됐어요:

  • V8 시작 오버헤드 없음
  • 가비지 컬렉션 멈춤 없음
  • 워커 스레드 오버헤드 없는 네이티브 멀티스레딩
  • 메모리 맵 파일 I/O

2. 통합 아키텍처
ESLint와 Prettier는 별개의 도구예요. 둘 다 실행하면:

  1. ESLint가 파일을 AST로 파싱
  2. ESLint가 규칙 실행, 에러 리포트
  3. Prettier가 파일을 다른 AST로 파싱
  4. Prettier가 변환하고 출력

Biome은:

  1. Biome이 파일을 한 번 파싱
  2. Biome이 같은 패스에서 린트 규칙과 포맷 실행

3. 점진적 처리
Biome은 파일 변경을 추적하고 캐시를 유지해요. 변경되지 않은 파일은 완전히 건너뜀:

# 첫 번째 실행: 2.1초 (25,000개 파일) # 두 번째 실행 (1개 파일 변경): 0.05초

마이그레이션 가이드: ESLint + Prettier → Biome

전환할 준비 됐나요? 제대로 하는 방법 알려드릴게요.

1단계: 현재 셋업 파악하기

먼저 뭘 마이그레이션하는지 이해하세요:

# ESLint 플러그인 확인 cat .eslintrc.* | grep -E "plugin:|extends:" # 커스텀 규칙 확인 cat .eslintrc.* | grep -E "rules:" -A 100

목록 만들기:

  • 사용 중인 ESLint 플러그인 (eslint-plugin-react, import 등)
  • 커스텀 규칙 설정
  • Prettier 오버라이드

2단계: Biome 설치

# npm npm install --save-dev --save-exact @biomejs/biome # pnpm pnpm add -D -E @biomejs/biome # bun bun add -D -E @biomejs/biome

--save-exact 플래그가 중요해요. Biome은 semver를 엄격하게 따르고, 팀 전체에서 예측 가능한 동작을 원할 거예요.

3단계: 설정 초기화

npx @biomejs/biome init

기본 biome.json 생성:

{ "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json", "organizeImports": { "enabled": true }, "linter": { "enabled": true, "rules": { "recommended": true } } }

4단계: ESLint 규칙 마이그레이션

Biome이 마이그레이션 도구 제공:

npx @biomejs/biome migrate eslint --write

.eslintrc를 읽고 동등한 Biome 규칙을 biome.json에 추가해요.

수동 마이그레이션은 이렇게 매핑:

ESLint 규칙Biome 동등 규칙
no-unused-varslint/correctness/noUnusedVariables
no-consolelint/suspicious/noConsole
eqeqeqlint/suspicious/noDoubleEquals
prefer-constlint/style/useConst
no-varlint/style/noVar
@typescript-eslint/no-explicit-anylint/suspicious/noExplicitAny

5단계: Prettier 설정 마이그레이션

Prettier 설정을 Biome 포맷터로 매핑:

// .prettierrc { "printWidth": 100, "tabWidth": 2, "semi": true, "singleQuote": true, "trailingComma": "es5" } // biome.json 동등 설정 { "formatter": { "enabled": true, "lineWidth": 100, "indentWidth": 2, "indentStyle": "space" }, "javascript": { "formatter": { "semicolons": "always", "quoteStyle": "single", "trailingCommas": "es5" } } }

6단계: 스크립트 업데이트

// package.json - 이전 { "scripts": { "lint": "eslint . --ext .js,.ts,.tsx", "format": "prettier --write ." } } // package.json - 이후 { "scripts": { "lint": "biome lint .", "format": "biome format --write .", "check": "biome check .", "check:fix": "biome check --write ." } }

biome check 명령어는 린팅과 포맷팅을 한 패스에서 실행해요.

7단계: 에디터 설정

VS Code
Biome VS Code 확장 설치하고 설정 업데이트:

// .vscode/settings.json { "editor.defaultFormatter": "biomejs.biome", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "quickfix.biome": "explicit", "source.organizeImports.biome": "explicit" } }

8단계: CI/CD 업데이트

# GitHub Actions - name: 코드 품질 체크 run: npx @biomejs/biome ci .

ci 명령어는 CI 환경용—비대화형이고 에러가 있으면 실패해요.

9단계: 이전 도구 제거

Biome이 잘 작동하는 게 확실해지면:

# ESLint 제거 npm uninstall eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin \ eslint-plugin-react eslint-plugin-react-hooks # Prettier 제거 npm uninstall prettier eslint-config-prettier # 이전 설정 삭제 rm .eslintrc* .prettierrc* .eslintignore .prettierignore

Biome이 아직 못하는 것들

완전히 전환하기 전에 현재 제한 사항을 이해하세요.

없는 ESLint 플러그인 기능

인기 플러그인 중 Biome 동등 기능이 없는 것들:

ESLint 플러그인Biome 상태
eslint-plugin-import부분적 (import 정렬은 됨)
eslint-plugin-jsx-a11y개발 중
eslint-plugin-react~80% 커버리지
eslint-plugin-react-hooks완전 커버리지 ✅
eslint-plugin-jest제한적
eslint-plugin-testing-library없음

커스텀 규칙 — 2.0에서 해결됨!

업데이트: Biome 2.0에서 GritQL 기반 플러그인 시스템이 도입됐어요. 이제 커스텀 린트 규칙 작성 가능:

// biome.grit - 커스텀 규칙 예시 language js `console.log($msg)` => `logger.debug($msg)`

이건 도입 장벽 중 가장 큰 걸 없앤 중요한 마일스톤이에요.

제한된 언어 지원

Biome 현재 지원:

  • JavaScript / TypeScript ✅
  • JSX / TSX ✅
  • JSON ✅
  • CSS ✅ (2.0에서 프로덕션 준비 완료)
  • GraphQL ✅
  • HTML 🔶 (실험적)
  • Astro / Svelte / Vue 🔶 (부분 지원)

Vue SFC와 Svelte 완전 지원은 활발히 개발 중이에요.

하이브리드 접근법: Biome + ESLint

많은 팀에서 마이그레이션 중에 하이브리드 접근법이 합리적:

// biome.json - ESLint가 처리하는 파일 무시 { "files": { "ignore": ["**/*.vue", "**/*.svelte"] } }
// package.json { "scripts": { "lint": "biome check . && eslint --ext .vue .", "lint:fix": "biome check --write . && eslint --ext .vue . --fix" } }

전환해야 할까?

솔직하게 말씀드릴게요:

지금 전환하세요 만약:

  • 성능이 문제라면 (느린 CI, 느린 저장 시 포맷)
  • 새 프로젝트 시작하는 중이라면
  • Vue/Svelte 없이 주로 JS/TS/React 사용한다면
  • 더 간단한 도구 설정 원한다면
  • 팀이 니치한 ESLint 플러그인에 의존하지 않는다면

기다리세요 만약:

  • 커스텀 ESLint 규칙에 많이 의존한다면
  • Vue나 Svelte 지원이 필요하다면
  • 접근성을 위해 eslint-plugin-jsx-a11y 사용한다면
  • ESLint 셋업이 "그냥 잘 돌아가고" 느리지 않다면

결론

Biome은 대부분의 JavaScript/TypeScript/React 프로젝트에서 프로덕션 준비 끝났어요. 속도 향상은 진짜고 체감돼요. 셋업이 간단해지는 건 정말 큰 장점이에요.

하지만 모든 ESLint 셋업의 드롭인 대체는 아니에요. Biome이 지원하지 않는 플러그인에 의존한다면:

  1. 갭을 받아들이고 수동 코드 리뷰 관행 추가
  2. Biome과 ESLint 둘 다 실행 (하이브리드 접근법)
  3. Biome의 플러그인 시스템 기다리기 (로드맵에 있음)

Biome 2.0+ 새로운 기능

Biome 2.0 (2025년 3월 출시)이 가져온 주요 개선사항:

  • 플러그인 시스템: GritQL로 커스텀 린트 규칙 작성
  • Type-Aware 린팅: TypeScript 컴파일러 없이 타입 이해하는 규칙
  • CSS 지원: 프로덕션 준비 완료 포맷팅과 린팅
  • HTML 포맷팅: 실험적 지원
  • 멀티파일 분석: 다른 파일에서 정보 수집하는 규칙
  • 더 나은 억제: // biome-ignore-all// biome-ignore-start/end
  • 개선된 Import 정렬: 더 많은 제어와 더 나은 기본값
  • Astro/Svelte/Vue: 프레임워크 파일 부분 지원

현재 버전(v2.3)은 ESLint, typescript-eslint 등에서 가져온 423+ 린트 규칙 보유.

앞으로의 전망

Biome 팀이 계속 한계를 뛰어넘고 있어요:

  • Vue/Svelte SFC 완전 지원: 최우선 순위
  • 확장된 플러그인 생태계: 더 많은 GritQL 패턴과 커뮤니티 플러그인
  • Biome Language Server 2.0: 더 빠른 IDE 통합
  • 엔터프라이즈 지원: 2025년 1월부터 제공 중

열기가 진짜예요. Biome은 출시 이후 GitHub 스타 5,000에서 100,000+로 폭발했어요. 대기업들도 쓰기 시작했어요. Biome 2.0의 플러그인 시스템이 커스텀 규칙 문제를 해결하니까, 이제 문제는 Biome이 성공하느냐가 아니라—생태계가 얼마나 빨리 넘어오는가예요.

새 프로젝트에는 이제 Biome이 기본 선택이에요. 기존 프로젝트에는 하이브리드 접근법으로 시작해서 점진적으로 마이그레이션하세요.

한 가지는 확실해요: ESLint + Prettier 시대가 끝난 건 아니지만, 진지한 경쟁자가 생겼어요. 그리고 그 경쟁자는 Rust로 작성됐습니다. 🦀

BiomeESLintPrettierJavaScriptTypeScriptLintingFormattingDeveloper Tools

관련 도구 둘러보기

Pockit의 무료 개발자 도구를 사용해 보세요