ESLint + Prettier VS Biome

[Jihyun0522]

팀 미팅에서 npm, pnpm, Yarn Berry에 대해 이야기하다가, ESLint + Prettier와 Biome에 대해서도 함께 논의해보면 좋을 것 같아 Discussion을 작성합니다.
혹시 Biome을 사용해보신 분 계신가요?

아래에는 part3 멘토링 때 Biome에 대해 듣고 제가 정리한 내용을 공유합니다!

---

Biome란?

Biome는 웹 프로젝트를 위한 올인원 툴체인으로, Rust로 작성되어 빠른 속도를 자랑하는 JavaScript/TypeScript 린터 및 포맷터이다. 2023년 10월 Rome 프로젝트가 중단된 후 커뮤니티에서 포크하여 만들어졌다.

Biome의 주요 특징

1. 뛰어난 성능

Rust로 작성되어 Node 기반 도구보다 훨씬 빠르게 동작한다. 벤치마크에 따르면 Prettier보다 25배, ESLint보다 15배 빠른 포맷 속도를 보인다.

# 실제 성능 비교 (450개 컴포넌트 React Native 앱 기준)
ESLint: 38초
Biome: 3-5초 (약 8-13배 빠름)

2. 통합 솔루션

• ESLint와 Prettier를 단일 도구로 대체하여 하나의 설정 파일만 필요하다
• 린팅과 포맷팅을 한 번의 실행으로 처리할 수 있다
• 번들링과 미니파이케이션 기능도 포함하고 있다

3. 간단한 설정

• 기본 설정만으로도 즉시 사용 가능하며, 추가 설정 없이 실행할 수 있다
• biome.json 또는 biome.jsonc 단일 설정 파일로 관리
• 의존성 제로로 하나의 바이너리만 설치하면 된다

4. 우수한 에러 메시지

Biome는 ESLint에 비해 훨씬 명확한 에러 메시지를 제공하며, 문제 해결 방법도 함께 표시한다.

ESLint: "Unexpected var, use let or const instead"

Biome: "Don't use var for variable declarations.
Use let or const instead. var is discouraged and
can cause unexpected behavior."

5. Prettier 호환성

Prettier와 97% 호환되어 기존 Prettier 설정에서 마이그레이션이 용이하다.

Biome 설치 및 사용

# 설치
npm install --save-dev @biomejs/biome

# 초기화
npx @biomejs/biome init

# 실행
npx @biomejs/biome check .
npx @biomejs/biome check --write  # 자동 수정 포함
npx @biomejs/biome format .  # 포맷팅만 실행

Biome의 장단점

Biome의 장점

1. 의존성 감소: ESLint + Prettier + 플러그인의 127개 패키지에서 Biome 1개 패키지로 축소된다
2. 빠른 CI/CD: 빌드 시간이 크게 단축되어 CI/CD 파이프라인이 효율적으로 개선된다
3. Pre-commit Hook 최적화: 커밋이 5-10초 걸리던 것이 즉시 완료되어 개발자들이 hook을 우회하지 않게 된다
4. 네이티브 TypeScript 지원: 별도 플러그인 없이 TypeScript를 네이티브로 지원한다
5. VCS 통합: 버전 관리 시스템과 통합되어 일관된 캐싱을 제공한다
6. Staged 파일 린팅: v1.7.0부터 --staged 옵션으로 staged 파일만 린팅할 수 있어 lint-staged를 대체할 수 있다

Biome의 단점

1. 제한된 플러그인 생태계: ESLint의 방대한 플러그인 생태계에 비해 아직 모든 플러그인을 지원하지 않는다
   • Cypress 린팅, GraphQL 포맷팅 등 일부 기능이 아직 지원되지 않는다
2. 짧은 역사: 2023년부터 시작된 프로젝트로 ESLint의 15년 역사에 비해 커뮤니티 지식과 자료가 적다
3. 언어 지원 제한: CSS, Vue, Svelte, Astro 등에 대한 완전한 지원이 아직 제공되지 않는다
4. JSON 설정 파일: 설정 파일을 JSON(또는 JSONC)으로만 작성해야 하며, JavaScript/TypeScript로 작성할 수 없다
5. 개발 난이도: Rust로 작성되어 있어 기여하기 어렵다

Biome vs ESLint 비교

성능 비교

도구	속도	설정 복잡도
Biome	ESLint 대비 15배 빠름 (멀티스레드), 4배 빠름 (싱글스레드)	단일 설정 파일
ESLint + Prettier	기준	여러 설정 파일 필요

설정 복잡도 비교

ESLint + Prettier 설정

# 필요한 패키지들
npm install --save-dev eslint
npm install --save-dev @typescript-eslint/parser
npm install --save-dev @typescript-eslint/eslint-plugin
npm install --save-dev prettier
npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-react
npm install --save-dev eslint-plugin-react-hooks

# 설정 파일
- .eslintrc.js
- .prettierrc
- .prettierignore
- .eslintignore

Biome 설정

# 필요한 패키지
npm install --save-dev @biomejs/biome

# 설정 파일
- biome.json (하나만 필요)

기능 비교

기능	Biome	ESLint + Prettier
린팅 규칙 수	200+	수백 개 (플러그인 포함 시 더 많음)
포맷팅	내장 (Prettier 97% 호환)	Prettier 필요
커스터마이징	제한적이지만 간단	매우 유연함
플러그인 생태계	성장 중	매우 방대함
타입 인식 린팅	아직 미지원	지원 (느림)

언제 Biome를 사용할까?

다음과 같은 경우 Biome가 적합하다.

• 새로운 프로젝트 시작 시
• 빠른 린팅/포맷팅이 중요한 대규모 모노레포 (10만 줄 이상)
• 간단한 설정을 선호하는 스타트업 팀
• CI/CD 빌드 시간이 중요한 프로젝트
• React, Next.js, Vue 같은 모던 웹 애플리케이션

언제 ESLint + Prettier를 사용할까?

다음과 같은 경우 ESLint + Prettier가 적합하다.

• 커스텀 플러그인을 많이 사용하는 레거시 프로젝트
• 세밀한 규칙 제어가 필요한 엔터프라이즈 환경
• 포맷팅과 린팅을 분리하고 싶은 경우
• Cypress, GraphQL 등 특정 도구의 린팅이 필요한 경우

하이브리드 접근

Biome로 포맷팅과 기본 린팅을 처리하고, ESLint로 고급 규칙을 처리하는 하이브리드 방식도 가능하다.

마이그레이션 가이드

Biome는 ESLint와 Prettier에서 자동으로 마이그레이션할 수 있는 도구를 제공한다:

# Biome 설치
npm install --save-dev @biomejs/biome

# 마이그레이션 도구 실행
npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

# 전체 코드베이스 체크
npx @biomejs/biome check . --diagnostic-level=error

# 문제가 되는 규칙들을 biome.jsonc에서 비활성화
# 만족할 때까지 반복

결론

대부분의 모던 웹 애플리케이션에서 Biome는 더 나은 선택이다. 10배 빠른 성능은 실제로 정확하며, 때로는 더 빠르다. 하지만 복잡한 코드베이스나 생태계 깊이와 장기 안정성을 중시하는 팀에게는 ESLint가 여전히 안전한 선택이다.

[aahreum]

이렇게 수치로 보니까 빠르다는게 확 와닿는것 같아요!! 좋은 자료 감사합니다!!!

[chldntjr1321]

➡️ 이 부분에서 저희 프로젝트 상황에서 도입할 수도 있을 것 같다는 생각이 드네요!! 잘 봤습니다!👀👍

[aahreum]

아 CI 단계에서 체크를 하면 biome이 더 빠른걸 확실하게 체감해볼 수 있겠네요!!!

[looks32]

css도 지원 안한다는데 추천한다니 요즘은 진짜 테일윈드가 대세이긴 한가보네요..
근데 속도 차이가 꽤 많이 나네요...?!