Biome: ESLint + Prettier를 하나로 대체하는 올인원 도구
Rust로 만들어진 초고속 린터이자 포매터 Biome의 설치부터 설정, ESLint/Prettier 마이그레이션까지 핵심 사용법을 알아봅니다.
JavaScript 프로젝트를 세팅할 때마다 반복되는 의식이 있다. ESLint 설치, Prettier 설치, 둘 사이의 충돌 해결을 위한 eslint-config-prettier 설치, .eslintrc 작성, .prettierrc 작성, VS Code 설정 조정... 프로젝트의 코드를 한 줄도 작성하기 전에 설정 파일만 4~5개가 생긴다.
Biome는 이 모든 과정을 하나의 도구로 줄여준다.
Biome가 뭔가요?
Biome는 Rust로 작성된 웹 프로젝트용 올인원 툴체인이다. 린터와 포매터를 하나의 바이너리로 제공한다. ESLint와 Prettier를 각각 설치하고 설정을 맞추는 대신, Biome 하나만 설치하면 된다.
원래 Rome이라는 프로젝트에서 시작했는데, Rome 회사가 문을 닫은 후 커뮤니티가 포크해서 Biome로 이어가고 있다. 2026년 2월 기준 v2.3까지 출시되었고, 400개가 넘는 린트 규칙을 제공한다.
얼마나 빠른가?
숫자로 말하는 게 가장 직관적이다.
| 작업 (10,000개 파일) | ESLint/Prettier | Biome |
|---|---|---|
| 린팅 | 45.2초 | 0.8초 |
| 포매팅 | 12.1초 | 0.3초 |
ESLint 대비 약 25배, Prettier 대비 약 40배 빠르다. Rust로 작성되어 있고 병렬 처리를 적극 활용하기 때문이다.
설치 및 초기 설정
npm install --save-dev @biomejs/biome
npx biome init
biome init을 실행하면 biome.json 파일이 생성된다. 이 파일 하나가 ESLint와 Prettier의 설정을 모두 담당한다.
{
"$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2
}
}
설정 파일이 하나라는 건 단순한 편의성 이상의 의미가 있다. 린터와 포매터가 같은 설정을 공유하기 때문에 서로 충돌할 일이 없다.
기본 사용법
# 포매팅 확인
npx biome format ./src
# 포매팅 적용
npx biome format --write ./src
# 린트 실행
npx biome lint ./src
# 린트 + 자동 수정
npx biome lint --write ./src
# 린트 + 포매팅 한 번에
npx biome check --write ./src
biome check를 사용하면 린팅과 포매팅을 한 번에 처리할 수 있다. 대부분의 경우 이 명령어 하나로 충분하다.
지원하는 언어
- JavaScript / TypeScript
- JSX / TSX
- JSON / JSONC
- CSS (v1.5부터)
- GraphQL (v1.7부터)
HTML, Vue SFC, Svelte 등은 아직 완벽하게 지원되지 않지만, 계속 확장되고 있다.
ESLint/Prettier에서 마이그레이션
기존 프로젝트를 옮기고 싶다면 마이그레이션 명령어를 제공한다.
npx biome migrate eslint --write
npx biome migrate prettier --write
기존 ESLint 설정을 읽어서 대응하는 Biome 규칙으로 자동 변환해준다. 물론 모든 ESLint 플러그인이 지원되는 건 아니지만, typescript-eslint, eslint-plugin-react, eslint-plugin-jsx-a11y, eslint-plugin-unicorn 등 주요 플러그인은 80% 이상 호환된다.
VS Code 연동
Biome 공식 VS Code 확장을 설치하면 저장 시 자동 포매팅과 실시간 린팅이 동작한다.
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit"
}
}
ESLint 확장과 Prettier 확장을 비활성화하고 Biome 확장 하나만 활성화하면 된다.
지금 바꿔야 할까?
솔직히 말하면, 기존 프로젝트에서 ESLint + Prettier 조합이 잘 돌아가고 있다면 급하게 바꿀 이유는 없다. 하지만 이런 경우라면 Biome를 고려해볼 만하다.
- 새 프로젝트를 시작할 때
- ESLint 설정이 너무 복잡해져서 관리가 힘들 때
- CI 파이프라인에서 린팅/포매팅 시간을 줄이고 싶을 때
- 설정 파일 개수를 줄이고 싶을 때
마무리
Biome는 "ESLint + Prettier를 대체한다"는 야심찬 목표를 꽤 설득력 있게 실현하고 있다. 속도, 설정의 단순함, 그리고 꾸준한 업데이트까지 갖추고 있다.
JavaScript 툴링이 Rust로 재작성되는 흐름은 이미 거스를 수 없는 추세다. SWC, Turbopack, 그리고 Biome까지. 이 흐름에 올라타보고 싶다면, Biome가 가장 진입 장벽이 낮은 선택지다.