들어가며

그동안 프런트엔드 개발 환경에서 ESLint와 Prettier는 떼려야 뗄 수 없는 단짝이었습니다. 하지만 프로젝트 규모가 커질수록 이 둘을 설정하고 관리하는 번거로움, 그리고 수천 개의 파일을 처리할 때 발생하는 성능 저하는 우리를 괴롭히곤 했죠.

오늘 소개할 Biome은 이 모든 고통을 해결하기 위해 등장한 Rust 기반의 올인원 툴체인입니다. 왜 우리가 Biome에 주목해야 하는지, 그리고 기존 프로젝트에서 어떻게 갈아탈 수 있는지 핵심만 짚어보겠습니다.

1. 왜 Biome인가?

Biome은 단순한 도구가 아니라, 현대적인 웹 개발을 위한 **‘통합 툴체인’**을 지향합니다.

압도적인 속도: Rust로 작성되어 기존 도구들보다 수십 배 이상 빠릅니다. (수천 개의 파일을 1초 미만에 처리합니다.)
설정의 단일화: eslint.config.js, .prettierrc, .editorconfig를 따로 관리할 필요가 없습니다. biome.json 하나면 충분합니다.
충돌 없는 설계: 린터(Linter)와 포매터(Formatter)가 처음부터 하나로 설계되어, 스타일 규칙이 부딪히는 일을 원천 차단합니다.

2. 프로젝트에 Biome 도입하기

기존의 번거로운 의존성들을 걷어내고 Biome을 설치해 봅시다.

“bash

Biome 설치

npm install —save-dev —save-exact @biomejs/biome

설정 파일 초기화

npx @biomejs/biome init “

실행 후 생성된 biome.json에서 기본적인 규칙을 정의할 수 있습니다.

{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

3. Prettier/ESLint 설정 가져오기

Biome은 마이그레이션을 돕는 강력한 기능을 제공합니다. 기존에 사용하던 .prettierrc나 ESLint 규칙을 최대한 반영하여 자동으로 변환해 줍니다.

# Prettier 설정을 biome.json으로 이관
npx @biomejs/biome migrate prettier --write

4. 실무 워크플로우 적용

VS Code를 사용 중이라면 Biome 익스텐션을 설치한 후, editor.defaultFormatter를 Biome으로 설정하세요. 저장 시마다 빛의 속도로 코드가 정렬되는 것을 경험할 수 있습니다.

또한, CI/CD 파이프라인에서 체크하는 과정도 매우 간결해집니다.

// package.json
{
  "scripts": {
    "check": "biome check --apply .",
    "lint": "biome lint .",
    "format": "biome format --write ."
  }
}

마치며

물론 Biome이 아직 모든 ESLint 플러그인을 완벽하게 대체하지는 못합니다. 하지만 복잡한 설정 없이 표준적인 규칙을 따르고 싶거나, 무엇보다 쾌적한 개발 속도를 원한다면 지금이 바로 Biome을 도입할 적기입니다.

도구의 복잡함에서 벗어나 오직 코드 작성에만 집중하고 싶다면, Biome은 분명 최고의 선택이 될 것입니다. 여러분의 프로젝트에서는 어떤 린팅 도구를 사용 중이신가요? 댓글로 공유해 주세요!

Prettier와 ESLint를 버릴 때가 왔나? Biome 도입 가이드