Devlery
Blog/Biome

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/PrettierBiome
린팅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가 가장 진입 장벽이 낮은 선택지다.