Biome 해체 분석

'One toolchain for your web project'

Biome 공식 홈페이지

요약

• Rust로 작성된 JavaScript/TypeScript 프로젝트용 통합 툴체인
• 코드 포맷팅(formatting), 린팅(linting), import 정렬 정리와 같은 기능들을 종합적으로 관리
• 'JS 도구를 통합하자'는 Rome 프로젝트의 계보를 잇는 도구
• Algora Prettier 챌린지에서 우승한 이력이 있음

등장 배경

• 생태계 활성화: 코드 포맷터 분야에 경쟁과 혁신 촉진
• 성능 검증: Rust 기반 구현으로 속도와 효율성 테스트
• 웹 확장성: WASM/WASI 환경에서 동작 가능성 확인
• 커뮤니티 참여: 상금과 챌린지를 통한 개발자 참여 유도

사용법

설치

1. @biomejs/biome 패키지 설치
2. VSCode Biome Extension 설치
3. 프로젝트 루트에 biome.json 추가(biome init 실행) 및 설정 내용 작성
4. .vscode/setting.json 에 아래 내용 추가 혹은 에디터 설정 변경

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit",
    "source.fixAll.biome": "explicit"
  }
}

명령어

biome [command] [options] [path]

• lint: 코드 스타일 및 규칙 위반 검사
• format: 코드 포맷팅 수행
• check: 린트, 포맷팅, 오류 검사 수행 (lint + format)
• ci: CI 환경용 검사 수행 (check 와 유사하지만 자동 수정 X)

응용

• 저장 시 자동 검증 (앞의 VSCode 설정 확인)
• 기존 ESLint + Prettier를 대체하는 방안이기 때문에 당연히도 Git Hooks 기반 검증을 진행하면 유용하다.
  • ex. lint-staged 와 함께 pre-commit 단계에서 biome ci 실행

장단점

• 장점
  • 설정이 간단함
  • Rust 기반이라 비교적 빠름
• 단점
  • 현재 미지원 언어가 존재(React는 상관 없음)
  • 신생 프로젝트라 레퍼런스 부족

레퍼런스

• Seed Design GitHub Repository : biome.json

참고 링크

• Dable Tech Blog : Biome: 차세대 JS Linter와 Formatter