ESLint, Prettier 대체자

Biome (바이옴) 이란?

Biome은 웹 프로젝트에서 자주 사용하는 ESLint와 Prettier를 하나로 통합한 도구 상자(toolchain)입니다.

✅ Biome 장점

1. 간단한 설정

대부분 프로젝트에서 ESLint, Prettier 등을 사용하고 있을 겁니다.

하지만 아래와 같은 불편한 사항들이 있습니다.

ESLint, Prettier를 사용하기 위해서는 각각의 라이브러리를 설치하여야 하고
ESLint, Prettier 충돌을 막기 위해 esling-config-prettier 추가적인 플러그인을 또 설치해야 합니다.
.eslintrc,. prettierrc 등 설정 파일을 각각 관리해줘야 하는 단점이 있습니다.

Biome은 이 모든 과정을 단순화합니다.
단 한 번의 설치와 하나의 설정 파일(biome.json)만으로 통합 관리할 수 있습니다.

2. 빠른 성능

ESLint와 Prettier는 파일을 각각 두 번 파싱 하기 때문에 속도가 느려질 수 있습니다.

반면 Biome은 한 번만 파싱하고, 멀티스레드로 병렬 처리하기 때문에
ESLint, Prettier보다 약 2~10배 빠른 성능을 보여줍니다.

⚠️ Biome 단점

1. 다양한 언어 지원 제한

HTML, Vue, Svelte 등 다양한 언어에 일부 기능은 제공하지만, 특정 언어 전용 기능은 부족합니다.

2. 레퍼런스 부족

Biome은 비교적 최근에 출시된 도구이기 때문에,
ESLint나 Prettier에 비해 레퍼런스가 적은 편입니다.

Biome 설치 방법

npm i -D -E @biomejs/biome

설치 후 별다른 설정 없이 바로 사용할 수 있지만,
프로젝트에 맞는 세부 설정을 위해 아래 명령어로 biome.json 파일을 생성할 수 있습니다.

npx @biomejs/biome init

biome.json

{
  "formatter": {
    "indentStyle": "space", // default is `tab`
    "lineWidth": 100 // default is `80`
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single", // default is `double`
      "lineWidth": 120 // override `formatter.lineWidth`
    }
  },
  "json": {
    "formatter": {
      "enabled": false
    }
  }
}

ESLint, Prettier 마이그레이션을 지원합니다.

biome migrate eslint --write
biome migrate prettier --write

정리

Biome은 ESLint, Prettier의 대체를 위해 탄생하였습니다.

설정은 간단하고 속도는 빠르며, 관리과 훨씬 편리합니다.

한번 도입해볼만한 가치가 충분합니다.

728x90

저작자표시 비영리 변경금지 (새창열림)

ESLint, Prettier 대체자 - Biome 이란?